There are good arguments to customize many parts of WordPress — but the search results page? What reason could there possibly be to make changes to that? How could this page be any different?
The truth is, the WordPress search results page isn’t natively very interesting. This gives you the chance to highlight the articles you want more eyes on and make the page a little more useful.
I hereby, cordially, invite you to find out along with me. Just imagine, at the end of this post, we could both be smarter than we were before. Are you in?
Why Customize WordPress’ Search Results?
Alright, let’s start off with reasons why you should consider making changes to your site’s search results page and what things you might customize.
The Purpose of the Search Results Page
First, let’s get clear about what the function of the search results page is. As you can probably guess, it is supposed to help users find content they are looking for. To that end, they can enter a search term into the search field (that’s hopefully present on your site — more on that below).
WordPress will then serve up the search results page with everything it can find regarding that query.
Why should you care about this? Seems like WordPress has this part covered automatically, doesn’t it?
Because the search results page can have great impact on your site’s user experience, especially for eCommerce websites:
According to Econsultancy, up to 30% of ecommerce visitors use internal site search. Due to the increased level of purchase intent from searchers, they’re known to convert up to 5–6x higher than the average non–site search visitor.
Makes sense, doesn’t it? Just think about how often you use the search function when you shop online. Exactly! But even WordPress sites without eCommerce functionality can benefit from learning how to customize the search results page.
What Could Be Improved About WordPress Search?
During my research, I could find the following areas of complaints about the native WordPress search function.
For one, until recently, there was no non-code way to customize the way the search results page looks. Unless you knew your way around PHP, CSS, and a code editor, you simply had to trust that your theme was doing a good job of displaying it and be satisfied with the content of the search page.
Secondly, the native WordPress search function is not always very good at what it does. It will often return no results for searches that actually have fitting matches.
In addition, it can be kind of slow. In good old PHP fashion, the WordPress search needs a page reload in order to display results, which isn’t the fastest way of doing things.
As a consequence, this leaves us with the following areas for improvement:
- Design — We’ll go over how to control the look of the WordPress search results page as well as the elements that show up on it.
- Search results — Making sure the results your visitors can find on the search page are relevant and satisfying.
- User experience — Improve search speed, make it more comfortable to use, and add some functionality to WordPress search that visitors are used to from Google or other search engines.
Sounds convincing at first glance, if you ask me. So, let’s get down to business.
Add a Search Form to Your WordPress Website
Naturally, working with the search results page in WordPress only makes sense if you even give your users a chance to access it. That means, you offer a search form somewhere where they can input their queries.
For that, WordPress offers a built-in search widget that you can place wherever want in your page templates and template parts. The latter is an especially good idea if you are using the same header on every page. In that case, you only need to edit the template part once and your changes will show up everywhere.
Generally, it’s a good idea to add the search form to a header, sidebar, or footer — elements that appear on every page. That way, you give your visitors an opportunity to search what they are looking for from wherever they may find themselves on your site.
How to make the search field show up on your site depends on whether you are using a block theme or classic theme.
Using a Block Theme and the Site Editor
If you use a block theme like Twenty Twenty-Two, you can perform this action via the Site Editor. You find it under Appearance > Editor.
In the initial screen, you can edit your homepage. When you click on the logo in the upper left corner, you gain access to the Templates and Template Parts menus.
For example, let’s say you want to add the search form to your theme’s default header. For that, go to Template Parts and then click on Header (Dark, small).
Doing so leads you to this screen:
Here, adding the search form is pretty simple, you can do it in several ways.
For one, use the plus sign in the upper left corner, look for the Search widget, and drag-and-drop it to your desired location.
Alternatively, create an empty element in the editor (e.g. via Insert before or Insert after on an existing element), click the plus sign on the editor page, and look for the search widget or enter /search to add it directly.
Either of these methods will make the search form appear in your theme that you can then customize with the help of the block options on the right and settings bar on top.
Save your changes and it will show up on the page.
The Same Process in a Classic Theme
If your site runs on a classic theme, you can add the search widget in any widgetized area that it offers. To find out which options exist, go to Appearance > Widgets.
Adding a widget works the same way as with the Site Editor. Click on the plus sign in the upper left corner or on one of the widget areas. Then, search or browse for the search widget and input it into the widget area.
If you are not satisfied with your choices, you can also add more widget areas to your theme.
Alternatively, it’s also possible to add the search form directly into your page templates via code. Paste the snippet below wherever you want it to appear.
Here, too, it makes sense to go for a template part such as your header, so you don’t have to do it for each template separately. Be aware, however, that you should always make file changes like this in a child theme.
Change the Design of the Search Results Page
Alrighty, now that you have search form on your site, it’s time to customize the look of the WordPress search results page once someone uses it. This process, too, depends a lot on your theme.
Using the Site Editor, Again
The look of the search results page in WordPress is controlled by a page template. The one we are looking for in the Site Editor is called Search (who would have thought) and you find it in the aforementioned Templates menu.
Click it to land in the Template Editor.
Here, you can make all the changes you want. For example, this is what the search results page looks like in Twenty Twenty-Two by default:
One of the easiest things I can do to modify the way it looks is to exchange the default Query Loop block with a block pattern. After that, it ends up looking like this:
Quite different, don’t you think?
Customizing the Search Results Page Via Code
In case you are not using a WordPress theme that lets you customize the search results page visually, you can also do it with code. To render the page, the theme will either use search.php, if it is present, or else fall back on index.php (check out the WordPress template hierarchy to understand how that works).
Once you have created a child theme, copy the parent theme’s search.php to it or else, make copy of index.php, rename it to search.php and place it in the child theme. After that, open it with your favorite code editor and customize it to your needs.
Of course, if you are using a classic theme and don’t know code, you can also use a page builder plugin.
Plugin Options to Improve the WordPress Search Results
After dealing with the design of the search results page, it’s time to talk about how to customize its content. For that, we will concentrate on plugin options. First of all, because there are several good ones out there, secondly, because customizing the search results via code simply goes beyond what we can cover in this article.
1. Relevanssi
This plugin replaces the standard WordPress search function completely and makes the following changes:
- Order search results by relevance, not date.
- Enable fuzzy matching, meaning it also shows partial matches to the search query.
- Support for using the AND and OR query modifiers as well as quotes for exact match search.
- Highlight search terms in search excerpts and in the results when you click on them.
- Ability to search taxonomies, comments, custom fields, including WooCommerce SKUs and Advanced Custom Fields content.
- Search suggestions when there are no result (“did you mean…?”).
The free version offers a lot more features and there is a premium version with even more. Just be careful: Relevanssi needs a lot of database space for its index, so be sure you have that available in your hosting before installing the plugin.
2. Ivory Search
One of the main functionalities of Ivory Search is that it lets you create unlimited search forms and display them wherever you want. Available positions include the site header, footer, widget areas, navigation, and anywhere where you can place shortcodes. You can design and customize your forms as needed or use the included templates. In addition, you can customize what content exactly each will search for.
Besides that, the plugin improves the search functionality on your site in the following ways:
- Faster search through an index-based search engine.
- Search images, files, and attachments, shortcode content, WooCommerce products, and more.
- Live search functionality.
- Search specific content or exclude content from results.
- Track searches on your site in search analytics.
- Multilingual search.
A premium version with additional features is available.
3. Better Search
This plugin, too, replaces the default WordPress search. It produces results acccording to both the title and content of your posts, pages, and custom post types. You can also control where the plugin searches, including meta fields, authors, taxonomies, even comments.
What’s more, Better Search shows results by relevance and allows you to customize the search output, assign greater weight to the title or content, and offers other filters and actions. Finally, you can show the most popular searched content in form of a widget and customize searach results with your own template and custom CSS.
4. Paid Search Plugins
Aside from the above plugins, there are also a bunch of paid offers:
- WP Fastest Site Search — Though in the WordPress directory, this is actually a paid plugin with a 14-day trial period. The only free part is the voice search functionality, which is useful for mobile. Aside from that it comes with no-code UI customizations, PDF and image search, synonyms and autocomplete, and more.
- SearchWP — Sorts results depending on where they are found. The plugin can search custom fields, ecommerce products and details, categories, tags, and other taxonomies, the content of documents on your site (e.g. PDF, docx), and more. You can adjust the importance given to different search attributes and exclude taxonomies. The same company also makes a free enhancement for live search.
- YITH WooCommerce AJAX Search — Specifically for improving search on WooCommerce sites. Allows to search within a specific category, by vendor, or by SKU. It can show prices in search results and has different search form layouts available, including full-screen.
5. Other Search Plugins
Finally, here are a few plugins that make smaller changes to the WordPress search functionality:
- Search & Filter — A free plugin that allows searchers to refine their search by choosing categories, tags, or post types to search in. It also displays the search term at the top of the search page. That way, users can be sure that the search was done, even if it turns up empty.
- Highlight Search Terms — A small and lightweight plugin that does only one thing: highlight the search term in search results as well as on the pages it found after clickthrough. It’s compatible with BuddyPress/bbPress as well.
Final Thoughts: WordPress Search Results
And there you have it, both the reasons why you might want to customize the WordPress search results page and how to do it. I, for one, feel a bit smarter, how about you? I hope you use the information above to improve this vital part of your WordPress website.
Do you know any other ways to customize the WordPress search results page? Anything else to add? Let us know in the comments!
