As web designers, we must surely improve user experience. Adding search features is one of the ways to contribute to the user experience. When the users land on your site and want to find specific information or content, they usually go to the search field and type the keyword. The users may leave your site if you don’t provide the search result page properly. This means you will lose potential business possibility or visibility.
In WordPress, the appearance (layout) of the search results page is controlled by a template on the theme you use (the search.php file in most cases). If the default layout doesn’t suit you, you can create a custom template to replace it. If you have no PHP skills, you can use the help of Divi (or other page builder WordPress plugins with a theme builder feature. Such as Elementor and Brizy) to create a custom search results page template on WordPress.
This article will show you how to create a custom search results page in WordPress with Divi. With Divi, creating custom search page results is very easy.
Steps to Create Custom Search Results Page in WordPress with Divi
Step 1: Create a Search Results Page Template
On your WordPress Dashboard, go to Divi -> Theme Builder. We want to create everything from scratch, add a new template by clicking the plus icon (+), and then click Build New Template. On the Template Settings, find the Search Results option and select it. Click Create Template -> Add Custom Body -> Build Custom Body; it brings you to the Divi editor.
Step 2: Add an Archive Title
First, we want to add the title of the search results page. The title will be displayed dynamically. It depends on what keyword users are searching for.
Add a section with a single column, select the Text module and insert the module into the column.
On the text editor field, find the Use Dynamic Content icon by hovering on the text field. Once you see that icon, click on it. Next, please set it to the Post/ Archive Title.
Now, you can edit and style up the title as you prefer.
Step 3: Add a Search Module
Adding a search module to the search results page is optional. Because most websites already have a search feature on the header. So, you can skip this step if you don’t want to add a Search module to your search results page. In this example, we will add a search module to our search results page and give tips on how to customize and style it.
Add a section with a single column, select the Search module and insert the module into the column.
As you can see from the image above, by default, the Search module looks plain and boring. Alright, let’s start solving this thing.
On the Search Settings, go to the Design tab -> Sizing. Set the Width to 50%.
Next, go to the Advanced tab -> Custom CSS. Next, paste the CSS snippet below to the Input Field.
width: calc(100% - 145px); border: 3px solid #2C9FC7; border-radius: 45px; padding-left: 35px!important;
Now, we want to customize and style up the Seach module button. Paste the CSS snippet below to the Button field on the Custom CSS.
width: 75px; background: #FFFFFF; border: 3px solid #2C9FC7; border-radius: 45px; margin-left: 15px
Well, now the search module looks way better.
Step 4: Add the Blog Module
Next, it’s time to build the search results page so that when the users come to the search feature and type some keyword, whatever they were looking for, a page will display the results. We will use a Blog module to get a dynamic search results page in Divi.
Add a new section with a single column, select a Blog module and insert the module into the column.
Your posts will be displayed when you’ve added a Blog module. So, make sure that you already have some posts on your site.
On the Blog Settings, go to the Post For Current Page, then enable it by switching the toggle to YES. Enable this option will allow you to display posts for current pages, which will be helpful for archive and index pages. In this example, we want our search results page to contain a maximum of nine posts per page. So, go to the Post Count and then set it to 9.
Next, go to the Design tab -> Layout. On the Layout option, set it to Grid.
That’s it. You can play around with other settings if you want to. Once everything is done, save and publish your template. To see how it worked, go to your site and start to test it.
The Bottom Line
This article shows you how to create a custom search results page in WordPress with Divi. As we mentioned at the beginning of this article, customizing a search results page is one of the ways to ensure a better user experience. So, create a search results page as well as possible, and get potential business possibility and visibility.
