How to customize WordPress search results page

Hello!

When designing websites, especially websites that have an active blog, it is often necessary to style, customize and design the WordPress search results page. When styling the search results, we typically like to modify the way the results are presented as well as append a few custom CSS container classes in order to ensure the results resemble the way content is arranged throughout the rest of the site.

In addition to the CSS containers, we would also manipulate the results containers with responsive CSS @media queries in order to ensure that the results are displayed efficiently and responsively on mobile and tablet devices.

Typically we like to keep things clean and minimal, so the data presented and styling are styled as such. Typically in most WordPress starter themes such as underscores, you will have a standard search.php file which will be our starting point.

Modify your theme’s search.php file

What we want to do is first take a look at the current search results page. If your theme is not presenting a search bar to make an actual search query, then you can simply append the following to your site’s URL : yoursite.com/?s=your+search+string.

Passing this query will send you to the search results page. Ideally your query should actually produce results so you could try to use a general search phrase that you know will produce multiple results.

Once you have a good idea as to how the results looks now, you can visualize a clear direction as far as how you want it to look. The search.php file usually starts with the following code :

What we want to do is add a CSS container right above the section with the CSS id “primary”. This will allow us to manipulate all the results :

Dont forget to close the div tag at the bottom :

Now that we have a main container wrapping the search results, we can delve deeper into customizing the results as well as the data that is displayed in the actual results.

What I’ll do is move further down in the search.php file and itemize all of the changes. If you wanted to have the search bar displayed on the top of the actual search results pages, you could call the function get_search_form() in this file to display the form. You could then wrap the function in a container with a custom class that we can style later :

The main bulk of the search.php customization will be in the while-loop that queries the posts based on the search phrase. What I’ve done (and will show below) is wrap all the elements of the results such as the title, excerpt and post link URL in custom span CSS classes that I will use to style later.

You can see three CSS classes defined in the above snippet : search-post-title, search-post-excerpt and search-post-link.

The only other thing I would want to highlight as far as changing and improving the search.php file in your WordPress theme is to reduce the amount of useless information, widgets or sidebars that will be displayed.

A clean page looks much nicer, so we’ll want to comment out the following functions to reduce the amount of clutter that will be displayed on this page :

You can see above that I’ve commented out the_posts_navigation(), get_template_part() and get_sidebar(). Depending on how you’ve configured your theme, these functions will produce different results. Removing them outright will produce a very minimal page.

Style WordPress search results with CSS

Now comes the fun part, right? What we want to do is modify your theme’s style.css file to add the new classes and ID’s that are necessary to style the search page so it looks good.

The first thing we want to do is declare that search-container class that should be wrapping everything :

Before you get too concerned, we’ll be re-declaring the above container in a @media query to accommodate smaller devices. Next thing we’ll do is add the CSS to style the search form. We want a clean and minimal search form :

You can see we are using the ID ss-search-page-form to apply the styling. Next we get to the CSS styling of the actual search results themselves :

You can see that we’re applying the font family “Open Sans”. Obviously you can make your own customization to apply a different font or simply inherit the fonts already applied elsewhere.

Set responsive media queries for WordPress search results

This is obviously an important part of the process. You want to make sure that the results are not “squished” and that the content responds to the screen’s width so that it can still be easily read no matter what device you are on.

We are using a media query with a popular “max-width” breakpoint of 768 pixels. If you already have breakpoints defined, you could inject the CSS class declarations in that. Otherwise, the above CSS simply reduces the left/right padding and extends the percentage width of the container itself to 100%. Simple enough?

After customizing the search results with the above considerations, you might get a search results page similar to the screenshot below. I hope this helps you with your WordPress web design project!