2 Ways To Improve Your WordPress Search Page

Here are a couple of PHP snippets that you might want to incorporate in to your WordPress search file to improve your site’s search results page. The first one will display the number of results found, whereas the second will basically highlight the search terms used within the contents of the results.

ScreenHunter 610 Oct. 11 09.14 2 Ways To Improve Your WordPress Search PageImage source

To change WordPress’ search results page title from “Search Results” to something like “Search Result for search terms – 12 Articles”, just follow the steps below:

Open your template’s search.php file, and search for the following line of code:

<h2>Search Results</h2>

Replace it with:

<h2>Search Result for <?php
/* Search Count */
$allsearch =& new WP_Query("s=$s&showposts=-1");
$key   = wp_specialchars($s, 1);
$count = $allsearch->post_count;
_e('');
_e('<span>');
echo $key;
_e('</span>');
_e(' — ');
echo $count . ' ';
_e('articles');
wp_reset_query();
?></h2>

And that’s it! Next, highlight the words the user searched (i.e. the search terms) which makes it easier for the reader to skim through the results.

In your search.php file, search for <?php the_title(); ?>

This is the part of the code that shows the title of each of the results. If you’re using the default theme, you’ll find it wrapped inside a line of code that looks like this:

<h3 id="post-<?php the_ID(); ?>"><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>"><?php the_title(); ?></a></h3>

Replace <?php the_title(); ?> with <?php echo $title; ?>

And then before that line, paste the following:

<?php $title = get_the_title(); $keys= explode(" ",$s); $title = preg_replace('/('.implode('|', $keys) .')/iu', '<strong>\0</strong>', $title); ?>

Your search terms will now be wrapped in tags in which setting them in bold fonts helps putting more emphasis to the search terms.

Source: Michael Martin

Incoming search terms for the article:

Related Posts

Create A Responsive Retina-Ready Menu

How to Create a Geometric Shaped Typography with Grungy Background

Optimize Your Site For Retina Display

How to Create a Clean and Colorful Web Layout