How to Customize Your WordPress Search Results Page
Do you want to customize your WordPress search results page? The default WordPress search engine works well out of the box. But when a user searches for a term that is not on the site, they may see a blank screen.
This would look unprofessional and could make your users decide to search elsewhere.
Also, having a dedicated search page makes it easy for your site users to initiate a search, and see richer results. For these reasons, you need to optimize your search results page for maximum performance.
This guide will explain what a search results page means in WordPress. Then we will share tips on how to customize your search results page in WordPress.
Content:
- About WordPress Search Results Page
- Why Customize Your Search Results Page
- How Do I Create a Search Result Page in WordPress?
- Customizing WordPress Search Results Page
- Conclusion
About WordPress Search Results Page
When your audience uses the search feature on your website, WordPress lists out the relevant results on a new page. This page is known as the search results page.
WordPress search works much like Google search results, but it only shows results from your website. Traditional search engines like Google show results from all websites.
An internal search results page is essential for websites that display text-based content and that receive organic traffic from search engines.
Generally, if a user stumbles on your website, one of 2 things could happen:
- They find what they are looking for right away, or use the search form to find what they need.
- If they are unable to find what they came for, they end up leaving your website.
A dedicated page for searching and viewing results is a great way to keep users on your site for longer.
Why Customize your Search Results Page
When visitors search your website, they expect to get relevant results for their query. Even if the term they are looking for does not exist on your website, it would be better to show related results. That’s considerably better than showing a blank page.
Having a customized search results page can boost user engagement on your website. That’s because your content will be easily accessible to them.
When done right, the search results page will ensure user queries never come out dry. This will make users spend more time on your website.
If they spend more time on your website, it reduces bounce rate. So in a way, optimizing your search results page can improve your website’s ranking on search engines.
Most importantly, a search result page makes it easy to find content on your website. This is useful for large blog sites with thousands of blog posts. It will be very tedious for users to browse through every page on your website when they are looking for something in particular.
If your search returns many results, you can also customize it and add pagination so it will not consume server resources.
How Do I Create a Search Results Page in WordPress?
You can easily create a search page in WordPress using the Gutenberg block editor. However, if you are not using the block editor, you can manually create a search page by creating a search template. We will explain both methods in this section.
Creating a Search Page Using the Block Editor
To start, log in to your admin panel and then go to Pages >> Add New to create a new page.
Next, enter a title for the page. On the page editor, click on the Add Block (plus) icon and enter “search” in the text box. Select the Search block from the list.
This will add a search form to the page you are editing. You can add other content to the page or simply hit Publish/Update to save your changes.
When users access this page, they will see a search form that can be used to find specific content.
Using the block editor, you can add other elements to your search page. This makes it easy to customize the page. It is also perfect for beginners who have no technical experience.
Manually Create a Search Results Page
If you are using the classic editor, you can create a search page manually by creating a custom search template. Then use the template on a page on your website. We will walk you through the steps in this guide.
First, keep in mind that some of the steps involved are a bit technical. You should consider getting a professional to help you.
But if you’re feeling confident, then let’s proceed.
Before we begin, you should take a backup of your site. See the guide for help with creating backups.
Most WordPress themes come with a search.php template. Note that this is not a search page, rather, it is intended to be used as a template to display search results.
You can create a search page in WordPress based on the default page.php file.
To create a new page template, you need to access your site files from the server. We will use FTP for this guide. You can check this guide to learn how to use FTP.
After connecting your website to an FTP client such as FileZilla, you need to navigate to the directory containing your WordPress files. This is usually the public_html folder.
In this folder, you will see all your WordPress site files.
Now, navigate into the wp-content and then the themes directory.
Once you find your active WordPress theme, double-click on it. Here, we will create a new file for the search results page. You may see a search.php file depending on the theme you are using.
Creating a New Search Page Template via FTP
To create a new template file, right-click on a file and then click on Create new file.
Now enter a name for the file you are creating. The name search.php is reserved by WordPress. You should use a different name. WordPress recommends naming the file searchpage.php.
After creating the file, we need to convert it into a page template. For this, right-click on the new file and then select View/Edit. You will be required to choose a text editor to edit the file.
On the text editor, copy and paste the code below into the file. The code tells WordPress to treat the file as a template.
<?php
/*
Template Name: Custom Search Page
*/
?>The template name is the name you will see when you use the template on any page on your website. You can use any name as the template name.
After creating the template, we need to populate the template with some codes such as the header, search form, and footer of your website. We can use the page.php file as a starter template.
To use this template, login to your WordPress dashboard and then go to Appearance >> Theme File Editor. Next, click on the page.php file from the list on the right.
Below is a sample code from the page.php file of the Astra theme. The code might look different depending on your WordPress theme.
<?php
/**
* The template for displaying all pages.
*
* This is the template that displays all pages by default.
* Please note that this is the WordPress construct of pages
* and that other 'pages' on your WordPress site may use a
* different template.
*
* @link https://codex.WordPress.org/Template_Hierarchy
*
* @package Astra
* @since 1.0.0
*/if ( ! defined( 'ABSPATH' ) ) {
exit; // Exit if accessed directly.
}get_header(); ?><?php if ( astra_page_layout() == 'left-sidebar' ) : ?>
<?php get_sidebar(); ?>
<?php endif ?><div id="primary" <?php astra_primary_class(); ?>><?php astra_primary_content_top(); ?>
<?php astra_content_page_loop(); ?>
<?php astra_primary_content_bottom(); ?></div><!-- #primary --><?php if ( astra_page_layout() == 'right-sidebar' ) : ?>
<?php get_sidebar(); ?>
<?php endif ?><?php get_footer(); ?>In this template, we are interested in the code from the get_header() function. Go ahead and copy the code through to the get_footer() function.
After copying the code, paste it into your new searchpage.php file. The code will look similar to the one below.
<?php
/*
Template Name: Custom Search Page
*/
?><?php get_header(); ?><?php if ( astra_page_layout() == 'left-sidebar' ) : ?><?php get_sidebar(); ?><?php endif ?><div id="primary" <?php astra_primary_class(); ?>><?php astra_primary_content_top(); ?><?php astra_content_page_loop(); ?><?php astra_primary_content_bottom(); ?></div><!-- #primary --><?php if ( astra_page_layout() == 'right-sidebar' ) : ?><?php get_sidebar(); ?><?php endif ?><?php get_footer(); ?>This code essentially displays the layout of your website, ie the header, footer, and sidebar area.
Adding Search Function to the Code
We need to insert the search form into the main content area.
For this, replace all the code in between the div tag with the following lines of code.
<h2>Search Our Blog</h2>
<p>Welcome to our tech blog! Here you will find all kinds of reviews of the best tech gadgets.</p>
<p>Use the search form below to browse our vast collection of content.</p><?php get_search_form(); ?>This is a sample template code you can use on your website regardless of the theme you are using. Keep in mind that you will need to style the page using CSS to suit your website design. Put together, the search page file should look like this:
<?php
/*
Template Name: Custom Search Page
*/get_header(); ?><div id="primary" class="content-area">
<h2>Search Our Blog</h2>
<p>Welcome to our tech blog! Here you will find all kinds of reviews of the best tech gadgets.</p>
<p>Use the search form below to browse our vast collection of content.</p><?php get_search_form(); ?>
</div>
<?php get_footer(); ?>In the code above, we use the get_search_form() function to display a search form on the page. The form contains all the logic needed to search and retrieve results from your WordPress database.
You can replace the text in the heading and paragraph tag with your website information.
After adding the code, save the file and FileZilla will prompt you to reupload the file with the new changes. When uploading, select the option to overwrite the old file.
After that, click on Ok to continue.
Using the Custom Search Page
To use this template we just created, login to your WP admin dashboard and then go to Pages >> Add New. Enter “Search” as the title for the page.
Under the “Page Attribute” section, click on the Template dropdown and select the template we created in the previous step above.
Leave the page content empty and finally hit the Publish button to save your changes. When you preview this page, you will see a form where your users can type and get responses to their queries.
You can copy the URL of this page and add it to any post or page on your website.
The benefit of having a custom search page is that you can customize and add elements to the template as you see fit. However, you need some knowledge of PHP and CSS to customize WordPress files.
You can check the official CODEX documentation for more information on creating a search page in WordPress.
Customizing WordPress Search Results Page
You can either customize your search results page manually or use a plugin for it. We recommend the plugin approach because it is easy to install and configure WordPress plugins. Plus, you need to be an advanced WP user to manually customize the page.
You can also use the full site editing feature WordPress provides to customize your search results page. We will explain both methods in this guide.
Use a WordPress Search Plugin
Using the right search plugin will essentially improve the default WordPress search feature. Some of the plugins are fully packed with the tools needed to build a robust search engine on your site.
There are many search plugins for WordPress. Therefore, choosing the right plugin for your site may seem a difficult task.
To help you with that, you can go through our review of the best WordPress search plugins available.
Some of the plugins are free to use. However, there are a couple of premium options available as well.
If your website is small, then you can get away with the features provided by free plugins. Large website owners should consider opting for a premium plugin to get more advanced features for their website.
Add a Search Box to the Results Page
You may think this step is redundant considering you may already have a search form on your navigation menu. While true, it does have additional benefits.
For example, if a user’s search query comes back dry (no result), it would be logical to show users that the query actually went through. One way to achieve this is to add a search form and populate the form with the user’s query.
To add this feature you can use the Ivory Search plugin. This free plugin extends the functionality of your default WP search engine.
With the plugin, you can create an unlimited number of search forms and customize them to suit your page layout and style.
After installing and activating the plugin, you can access the plugin’s setting page by selecting the Ivory Search menu.
The plugin will automatically create a form for you. You can add the shortcode it generates to the area you wish to display the form.
Extend Your Search to Go Beyond Posts and Pages
By default, WordPress search only scans your posts and pages. This can be sufficient for a simple blog. However, if you have a large website with custom post types or ecommerce products, then you need to extend your WP search.
A WordPress search plugin extends the functionality of your website by including support for categories, taxonomies, and even media files.
Earlier in this guide, we showed how to install and set up the Ivory Search plugin. When creating a search form using this plugin, you can choose the post types you want to allow.
Add Suggestions / Related Search Content
You can increase user engagement by suggesting related content on your WordPress search results page.
Aside from returning the information your users searched for, you can include a section that will always display related results even if the search comes back dry.
You can use a WordPress plugin to add this feature to your website. The plugin we recommend is the Better Search plugin.
With this plugin, you can enable heatmap to track the most popular searches on your website. The plugin will use the information to display a list of trending posts on the search results page.
After installing the plugin, you can access the plugin settings page via Better Search >> Settings.
On the “Heatmap” tab, tick the option to enable heatmap on the search results page. After that, scroll down and click on the Save Changes button.
Your users will begin to see suggestions on the search result page even if they do not get a response to their query.
Enable Ajax Loading
If you want to take your WordPress search to the next level, enabling “live” search will help your users see results as they type on the search form.
WordPress plugins such as Ivory Search support live search and it also integrates well with WooCommerce. So you don’t have to worry about installing new plugins to your website.
To use this feature, log in to your WP admin dashboard and then go to Ivory Search >> Search Forms.
After that, select the AJAX menu and toggle the switch to enable Ajax search.
Click on Save Changes to update the settings. Now, you need to copy the shortcode the plugin generates and add it to the area you wish to display the search form.
The plugin contains the necessary styles and scripts to activate live search on your website.
If users use this form to search on your website, the form will automatically populate with relevant results as soon as they begin to type.
Using WordPress Full Site Editing
From WordPress 5.9 and above, Full Site Editing was introduced by the dev team. This feature lets you customize your website using the block editor. With it, you can easily customize your search results page as well.
Note: You need to have the latest version of WordPress and be using a block theme to have access to the full site editing. However, if you are using a classic theme, you can use the plugin method we explained above to customize your WordPress search results page.
Customizing Search Results With Block Editor
To use this feature, log in to your admin dashboard and then go to Appearance >> Editor to access the block editor.
From there, click on the Page dropdown and select Browse all templates.
Next, scroll down and locate the “Search” template. The description of this template indicates that it displays search results in WordPress. To edit this template, click on the Search link.
It will open the template in the block editor. The template shows how your search results will look when users search on your website. You can preview the structure of the page by clicking on the List View icon.
This page contains a search form that lets users enter their search query.
Below the search form is the query loop that displays the search results. You can change the layout from “list” to “grid” view depending on your preference.
The benefit of using this method to customize your search results page is that you can use the drag-and-drop block editor to add elements to your page.
To add an element, click on the Add Block icon and then choose from the blocks WordPress provides.
After editing the search results page, click on Save to update your changes.
There are other customizations you can apply to this page such as changing the background image. You can learn more in our WordPress 5.9 release guide.
Add a Search Form Widget
Although it does not necessarily apply to customizing the search results page, you need to make your search form easily accessible to your users.
One way of doing this is to add a search form widget into strategic sections of your website such as the main navigation menu and sidebar area.
Users who are looking for something specific can easily find the content by using the search form.
The placement can differ depending on your WordPress theme. For example, some themes may not allow adding a search icon to your navigation menu by default. In such cases, you can use a plugin.
However, if your theme supports it, you can access the widgets page through Appearance >> Widgets. You can find all the widgets, and areas where you can add them to here.
Scroll down and locate the search widget. After that, click on the dropdown menu and then select the area you wish to place the widget. Once done, click on Add Widget.
Alternatively, you can simply drag and drop the widget to your desired location.
Conclusion
Keeping readers longer on your website should be your priority as a website owner. Something as little as improving your WordPress search results page can reduce bounce rate on your website.
In this guide, we have shown you the importance of customizing your WordPress search results page. We also shared tips on how to extend the default WordPress search feature.
In a nutshell, you need to install a WordPress search plugin if you want to customize and improve your WordPress search.
For more tips on SEO, do check our complete SEO guide for WordPress websites. Also, check the rest of our blog for other WordPress tutorials.
