Improving WordPress search results pages.

If you have a growing website then no matter how careful you are with organising your websites’ content there comes a time when adding search functionality becomes necessary. We were recently asked to add a search box to a clients WordPress powered website and set about making some improvements to enhance the users experience.

Everyone is used to searching on Google and with the search terms being bold in their results pages. So firstly lets add this to our WordPress website.

Open up your themes folder and look for the following files;

functions.php
search.php
style.css

Firstly open up your functions.php file and add the following code to make three new functions.

// functions to add a <strong> and a class to search terms on search results pages.
function search_excerpt_highlight() {
$excerpt = the_excerpt();
$keys = implode('|', explode(' ', get_search_query()));
$excerpt = preg_replace('/(' . $keys .')/iu', '<strong class="search-highlight">\0</strong>', $excerpt);

echo '<p>' . $excerpt . '</p>';
}
function search_title_highlight() {
$title = get_the_title();
$keys = implode('|', explode(' ', get_search_query()));
$title = preg_replace('/(' . $keys .')/iu', '<strong class="search-highlight">\0</strong>', $title);

echo $title;
}
function search_content_highlight() {
$content = get_the_content();
$keys = implode('|', explode(' ', get_search_query()));
$content = preg_replace('/(' . $keys .')/iu', '<strong class="search-highlight">\0</strong>', $content);

echo '<p>' . $content . '</p>';
}

These are simple functions that will replace default WordPress functions in our search template file wrapping our search terms in <strong>and adding a css class “search-highlight”, so next step is to open up our search.php file.

Look for the WordPress loop and inside it, your template may be calling a separate loop to handle the display, so a little digging may be necessary. We’re looking to replace the following;

the_title();
the_excerpt();

And if your theme isn’t using excerpts then possibly;

the_content();

Next we need to change these to use the new functions we added to functions.php

search_excerpt_highlight();
search_title_highlight();
search_content_highlight();

Now all that’s needed is little css and we’ll have our links bold just like Google. Open your style.css file and add the following someplace;

strong.search-highlight {
  background-color: #fdc058;
  font-weight: bold;
}

You’ll notice that we also added a background-colour rule to make our terms really stand out on results page, adjust to whatever suits your theme. Try a quick search on your website and you should now see any search terms in the titles, excerpts or content highlighted nicely.

Relevant excerpts for search results in WordPress.

Google’s results pages use either the meta description tags of web pages or, more usually, snippets from the page content where it finds matching search terms. Most WordPress themes use excerpts, either manually written, or automatically generated from the first 55 words or so from the posts content to represent the posts on search and archive pages. What would be better is if these post excerpts were automatically taken from the posts content containing our users search terms.

Scott Yang wrote an excellent bit of code to generate relevant excerpts, follow this link and download the plugin, then upload it to your website and activate. Alternatively you could just add the php code to your functions.php file if you’re feeling that way inclined.

Scotts’s code, without altering, wraps the search terms in its excerpts with <strong> and adds a css class “search-excerpt”, so rather than editing scotts file lets simply add this class to our css rule from earlier;

strong.search-highlight,
strong.search-excerpt {
 background-color: #fdc058;
 font-weight: bold;
}

Including custom post types in WordPress search results.

Maybe you have a custom post type or two that you’d like to include in the WordPress search results, or perhaps you’d like to exclude the standard WordPress ‘pages’ from inclusion. This is simply done, open up search.php and look for the start of the loop, probably it will be an if, or while loop;

if(have_posts()) :

Directly above this line add in the following code, adjusting the post_type array to whatever post types you want included in the results, these can be custom post types or the ones already built into WordPress.

//adjust query to include custom post types
global $wp_query;
$wp_query->query['post_type'] = array( 'page', 'post', 'custom-post-type');
query_posts( $wp_query->query );

Displaying the total number of search results in WordPress.

$total_results = $wp_query->found_posts;
echo $total_results;

That about wraps up this little tutorial, if you want to see a demo of the above in action then try a search on this website.

How have you customised your WordPress search pages? and how do you think it can be improved?