Publishers of technology books, eBooks, and videos for creative people

Home > Articles > Web Design & Development > Usability

Web Design Reference Guide

Hosted by

Customizing WordPress 2.5.1: Search

Last updated Oct 17, 2003.

After arriving at your blog, visitors may want to search for specific items you have written about. Make sure visitors have easy access to Search and that results are useful to them. This article, based on WordPress 2.6.1, shows you how to make sure visitors find what they're looking for on your blog. 

Implement a Sidebar Search Box

WordPress 2.6.1 includes a Search widget for the sidebar. The first step is to make sure it appears in the sidebar, and in a useful spot. If you bury the Search box, visitors may never see it. Quite often when visiting websites I've accidentally tried to search using a subscription box because it was not only more prominent, but also in the place where I'd expect a Search box to appear—near the top of the page, or at least near the top of the content part of the page.

Log in to your blog's Dashboard and go to the Design - Widgets section. Under Current Widgets choose either Sidebar 1 or Sidebar 2 from the drop-down (your blog's theme may have only one sidebar) and click the Show button, if necessary. A list of that sidebar's widgets is displayed.

Figure 1

Figure 1 I already use several widgets in my blog's Sidebar 1, but Search isn't one of them.

Add the Search Widget to the Sidebar

If your Sidebar doesn't include a Search widget, locate Search in the list of unused widgets on the left of the Widgets page and click the Add link beside it. The Widget is added to the bottom of the list of widgets in use.

Hover your cursor over any part of the widget and it changes to a hand. Drag the widget to the position you'd prefer it to occupy. I suggest the top of the sidebar.

Click the Save Changes button below the list of widgets in use. The Search box will now appear on your blog.

Figure 2

Figure 2 I've added the Search widget and am dragging it to the top of the list of widgets in the Sidebar.

Customize the Search Form

The search form itself is very simple, and it's probably best not to change it significantly. Visitors are used to standard search boxes and may be disoriented if you change it around too much.

However, if you want to make changes, then locate the theme file searchform.php and edit it. For example, at line 4, the form has this coding that puts the word 'Search' as the button text:

<input type="submit" id="searchsubmit" value="Search" />

You may decide to change the button text slightly, perhaps to 'Search this blog':

<input type="submit" id="searchsubmit" value="Search this blog" />

If you're using WordPress as the framework for a more general website, rather than for blogging, it may be appropriate to change that text to something like: 'Search this site' or 'Search Reviews', or whatever reflects the purpose of your site.

Terse Search Results

Of more interest than the Search form is the Search Results page. The default results page is terse and somewhat unfriendly if nothing is found.

Figure 3

Figure 3 My search was not successful. This rather unfriendly page offers me a Search box to try again.

Even if the Search does return some results, by default it includes only the minimum information: A headline and date, with tags and categories.

Figure 4

Figure 4 My successful search returns some rather brief headlines only.

Customize the Search Results

Search.php in the theme folder controls the search results. To make the results more friendly, edit this file.

Lines 7 to 29 control what happens if one or more posts are found that contain the search term. They put up a heading, links to navigate between pages of results, and the headline, date, tags, and categories for each post that's found.

Lines 33 and 34 come into action if there are no results: They put up a different heading and present the search form again.

Improve the No Results Page

As with the article about 404 pages, it would be a lot more friendly and helpful to give the visitor who's “lost” some possibilities, such as a tag cloud, a list of categories, and maybe even some recent posts. 

Take the coding from the article about 404 pages and add it in between lines 33 and 34. It would pay to rewrite line 33 as well to be friendlier. In my screenshot, I've changed the heading, added a short paragraph of text, and used the coding from my 404 page above the Search box, so that visitors have more choices about what to do next. I also changed the numbered list to a bulleted list, just to make the page a little more coherent.

Figure 5

Figure 5 My search was not successful. This much friendlier page offers me a Search box to try again, as well as tags, categories, and even a list of recent posts.

Improve the Results Page

Lines 18, 19, and 21 of search.php provide the title, time and date, tags, and category of any posts found in a search. It may be more helpful to also add in an excerpt from the post, as it gives more context than a simple heading.

Paste the following in at line 20:

<?php the_excerpt(); ?>

This tells the search results page to include the first few words of any post it finds.

Figure 6

Figure 6 My search was successful and a couple of results were found. An extract of each found post appears, in addition to the title, tags, categories, and date.

When your visitors are stuck or lost, they are likely to give up on your blog in frustration. Adding in a few friendly lines to the search results page can keep them on your site longer, and give them greater feelings of success. With any luck, they'll keep coming back for more.