Build a Divi search results page template

When a user searches your website via a search widget or in the header search box they are shown the results in a search results page.

You can create a custom Divi search results page using the Divi Theme Builder.

There are a few simple steps in the process which include;

1. Create a new template in the Theme Builder
2. Assign the template to “Search Results”
3. Create a custom body template
4. Add the Divi Blog module into the template
5. Select “Yes” for “Posts For Current Page”

This post will show you how to add a Theme Builder template that will display your search results in a custom-designed page.

1. Add a new Theme Builder template and assign to search results

In your WordPress dashboard go to Divi > Theme Builder and click on the Add New Template icon.

This will then load the Template Settings window where you can assign the template to your search results pages by using the checkbox for Search Results.

The “Search Results” option is at the bottom in the window in the “Other” category.

Click the Create Template button.

2. Creating a custom body template

You will need to add a custom body to your new template. Adding a custom header and/or footer to the template is optional.

You can choose to either Build Custom Body or Add from Library.

If you have a premade Divi layout for a search results page you can just load it via the Add From Library button and save your templates.

The Build Custom Body button will load the Theme Builder where you can build your search results page body from scratch.

3. You MUST add a Blog module in the template

The only thing you must have in your search results Theme Builder template is a Divi Blog module. This is what makes your search results show on the page.

The Blog module will need to be set to “Posts For Current Page”, which can be set in the module Content settings.

At this point, you have everything you must-have for your page. Anything listed below is optional but would be found on most search results pages.

4. Style your search results in the Blog module

You can use any of the Divi Blog module settings to style the main element and the listings of the search results page.

Some of the key results page Blog module layout options would be;

• Choose between full-width and grid layout in Design > Layout
• Selecting which elements to display on each listing in Content > Elements

Featured image size – If you are using the full-width option your featured images are going to be displayed fullwidth which is the main issue with just using the default Divi search results page. You can use the Elements setting to turn off the featured image so it does not display, but it is often better to just resize the image using a little CSS.

To make your featured image display as a smaller image to the left of the search results entry add the following CSS code to the Theme Builder template. You can add using a code module or via the Page Settings > Advanced > Custom CSS.

@media (min-width: 981px) {
.et_pb_post .entry-featured-image-url {
float: left;
width: 100%;
max-width: 250px;
margin-right: 20px;
}
}

4. Add a dynamic search results page title

Just to make sure users know what page they are on when on your custom results page you can add an optional page title using dynamic content.

Add a new Divi Text module to the top of the page and select the dynamic content icon (3 stacked circles) in the body section. Choose “Post/Archive Title” from the dropdown list.

This will now display “Results for “archive title”” in your text module.

You can add text before and after the dynamic archive title, and add heading tags to give the title a heading style by clicking on the Post/Archive Title settings icon. Just add the text in the before and after im=nput areas and be careful to check there is a space after the before text area. To make the title a specific heading style you can add <h1> in the before text area and </h1> in the after text area.

4. Add a sidebar to your search results page

Another optional element to your search results page would be a sidebar.

This can be added just like any sidebar using the DIvi Builder. Choose which sidebar to add and edit the WordPress widgets in the sidebar under Appearance > Widgets.

Final thoughts

The default search results page in WordPress and Divi is not that great looking. If you have a featured image it will show the full-width of the results page and look very out of place. Creating a custom template for your search results page is quick and easy using the Theme Builder template system and your users will thank you for having one.

You can add any Divi sections, rows, and modules to your Divi search results page layout just like any page on your website. You must include the Blog module to display your actual results, but beyond that, you can get as creative as you like.

Did you build a custom search results page using the Divi Theme Builder?

Drop a link in the comments below if you want to share your page, or if you have any questions.