How to Create Custom Search Results Page in WordPress with Elementor

Whether you have a personal blog, an e-commerce site, or a large website with multiple users, adding a search feature is crucial enough. It allows your visitors to find the content they look for more easily, rather than clicking here and there on the navigation menu. 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 Elementor (or other page builder plugins that have a theme builder feature like Divi Builder and Brizy) to create a custom search results page template on WordPress.

To be able to create a custom search results page template using Elementor, you need to use the pro version of Elementor as the theme builder feature is only available in Elementor Pro (read: Elementor Free vs Elementor Pro).

How to Create Custom Search Results Page in WordPress with Elementor

When creating a custom search results page using Elementor, you can add any element you like just like when you are creating a page. There are over 90 elements (called widgets) that you can add. Elementor itself offers some premade search results page templates to streamline your workflow. Or, if you have your own design concept, you can also create the custom search results page yourself.

In this article, we will show you how to create a custom search results page template from scratch. Here is the screenshot of the search results page we want to create.

We use two sections to create the custom search results page above:

• Section 1: To place the heading (the description of the search results)
• Section 2: To place the search form and search results

Before getting started, make sure you have upgraded your Elementor to the pro version in case you haven’t done so. Once you are ready, go to Templates -> Theme Builder on your WordPress dashboard to open the Theme Builder screen. Click the plus icon on the Search Results label on the left panel.

On the appearing templates library window, you can select a pre-made search results page layout. Since we want to create the search results page from scratch, you can close the window.

Before you start adding any widget, you can set the layout of the page first. To do so, click the gear icon on the bottom side of the settings panel (panel on the left side). You can set the layout on the Page Layout option on the General Settings block under the Settings tab.

Section 1

As said above, we will use this section to place the heading to display the description of the search results page. Simply click the plus button on the canvas area to add a new section. You can select the one-column structure. Once the section is added, drag the Heading widget to it.

Go to the left panel. On the Title block under the Content tab, click the database icon on the Title field and select Archive Title.

You can then go to the Style tab to style up the heading. You can set things like the text color, typography (font family, font size, font style, and so on). You can also apply blend mode and text shadow if you want it.

If you want to set the background of the section, adding a divider, or setting the margin, you can click the section handle to turn it into an editing mode. You can read our previous article to learn how to use Elementor in case you are new to Elementor.

Section 2

Click the plus button to add a new section just like you did on section 1 above. You can also select the one-column structure. Once the section is added, drag the Search Form widget.

You can then go to the settings panel to make the settings. On the Search Form block under the Content tab, you can set the skin on, place holder, icon, icon size, and so on.

To style up the form, you can open the Style tab. There are two setting blocks you can open: Input and Button. From the Input block, you can set the typography, text color, background color, border color, border size, and border radius.

While from the Button block, you can set button text color, background color, typography, icon size and button width.

Once done styling up the Search Form widget, you can add the Archive Posts widget. You can place it right beneath the Search Form widget.

Once the Archive Posts is added, go to the left panel. On the Layout tab under the Content tab, you can set the skin, number of columns, image position, excerpt length, meta data, and so on.

On the Pagination block, you can et the pagination type, page limit, and alignment. Read this article to learn more.

On the Advanced block, you can set the message to be displayed when WordPress can’t find the provided search query.

Once done making the basic settings on the Content tab, you can switch to the Style tab to style up the Archive Posts widget. There are 5 blocks you can open on this tab.

• Layout

You can open this block to set the alignment of the text content of the posts (post title and meta). You can also set the gap between columns and rows.

• Image

You can open this block to set the border radius of the post thumbnails. You can also set the spacing as well as apply CSS filters.

• Content

You can open this block to set the typography, text color, and spacing of the text content of the posts.

• Pagination

If you enable pagination, you can open this block to style up the pagination. You can set things like the typography, text color, and space between numbers.

• Nothing Found Message

You can open this block to style up the error message when WordPress can’t find the content according to the provided search query. You can set the typography and text color on this block.

You can add other widgets if you need ones. Once you are done editing the page, you can click the PUBLISH button on the bottom side of the settings panel.

If you are asked to add a display condition, simply add one by clicking the ADD CONDITION button. Since you are creating a custom search results page, set the display condition to Search Results. Click the SAVE & CLOSE button to apply the change.

The Bottom Line

Each WordPress-based website has a unique search results page, depending on the theme used by the associated website. If the layout of the search results page offered by the theme you use doesn’t look appealing to you, you can customize it. Unless you have PHP skills, you can use Elementor to create a custom search results page on your WordPress site. Everything is drag and drop. No need to deal with PHP code. In addition, you can also use Elementor to create a custom header, custom footer, custom 404 page, and other parts of your theme.