Customizing the WordPress search results page

This tutorial goes over how to customize the WordPress search result page. We are going to make the post meta look like the rest of the site and also highlight the searched terms throughout the content of the results page. This will provide a better user experience for your visitors since they will be able to easily scan the content to find exactly what they are looking for on your site.

Steps

  1. Just like we did in the Customizing the WordPress Post Meta and Adding the Categories and Comments to the Post Meta section tutorials, we want to edit the search results page meta. To do this open the content-search.php page template and edit the code to look like the following:

  2. Reload the search results page and you will see the new search results page meta
  3. The next thing we want to do is add some functions to our WordPress theme to highlight the terms that are searched for on the search results page. To do this, create a new file in the /inc/ directory called search-highlight.php
  4. The search-highlight.php file should include the following code:

  5. Open the functions.php file and at the very bottom add the following code:

  6. Now we need to edit the content-search.php template file to use our new search_excerpt_highlight function. Open content-search.php and replace the_excerpt(); tag with the following:

  7. The last thing we need to do is add some CSS to our stylesheet. Open the style.css file and add the following CSS code:

  8. Done! You should now have highlighted search terms of the search results page.

Notes from the Video

Here is the link to StackExchange where I found the code to do the search term highlighting. This is also the place where you can find the code to highlight the Title terms if you would like to add it to your theme.

Feedback

Please let me know what you think of this tutorial and if you need help with anything.

  • Antonella

    Nice little touch, highlighting the search term. Thanks.

  • Abu Jorhom

    I’ve modified your code a little bit to work for both titles and excerpt and used filters instead.

    Thanks

  • frede_z

    Everything is working great as far as my search results being returned and the searched term being highlighted but for some reason when I perform any search my sidebar ends up below the returned results. My sidebar only ends up below my content on the returned search results page…Any suggestions ? Thanks.

  • Mark

    Please note your missing a semi-colon on the css highlight after the color.

    • Technically, and I am referencing CSS standards the last semicolon is optional. I always like to add one anyway to make everything uniform. Thanks for pointing this out.