Every WordPress theme has a file template to govern the layout of the search results page. In most cases, the file named search.php. If you have coding skills (PHP and CSS in particular), you can edit the file to customize the appearance of the search results page of your WordPress site. Otherwise, you can use a theme builder plugin to customize the appearance of the search results page in a visual way. Brizy is one of the theme builder plugins that you can use. This article will show you how to use Brizy to create a custom search results page template on your WordPress site.
Brizy itself is a lightweight, yet powerful page builder plugin for WordPress. The pro version comes with a theme builder feature to allow you to create custom templates to replace the default templates of your theme parts. Some custom templates you can create with Brizy theme builder are:
- Single post
- Single page
- 404 page
- Search results
How to Use Brizy to Create a Custom Search Results Page in WordPress
Creating a custom search results page using Brizy, you can add creative elements other than the element to display the search query. Brizy Pro offers more than forty elements you can choose from to create the custom template. The main element you need is the Archives element.
Before getting started, make sure you have upgraded your Brizy to the pro version if you haven’t done so. You can get the pro version of Brizy on its official website.
Once you are ready, go to Brizy -> Templates on your WordPress dashboard. Click the Add New button to add a new custom template.
Give your template a name and add a display condition on the Display Conditions block. Since you want to create a custom search results page, you can set the display condition to Search page. Click the Publish button to publish the custom template and then click the Edit with Brizy button to edit the template using the Brizy editor.
Once the Brizy editor opens, you can click the plus button to add a new block.
You can either add a ready-made block or blank block. If you want to add the block’s content from scratch, you can select Create your own to add a blank block.
To help you better organize the block’s content, you can add a column before adding other elements. Column is not required but it helps a lot in managing the block’s content as well as the layout. You can read our previous article to learn how to work with a column in Brizy. You can simply drag the Column element to the canvas area to add a column.
You can style up your column (and block) beforehand before you add the content to it. You can set things like the background, border, and so on. Once your column is ready, add the Archives element to it.
By default, the Archives element displays the search results in three columns. You can customize it according to your needs.
Customizing the Archives Element
As said above, the Archives element displays the search results in three columns with each column consists of four components:
- Featured image
- Post title
- Post excerpt
- Read more button
The columns on the Archives element are connected each other. When you make a certain change of a component on one of the columns (e.g., the font size), the change will also be applied to the same component on other columns.
If you want to change the number of columns on the Archives element, you can hover your mouse over the Archives element and click the grey arrow icon to open the settings bar.
On the appearing settings bar, click the WordPress icon and set the number of columns on the Columns option. As you can see, you can also set the number of rows as well as the spacing.
After setting the number of columns and rows, you can customize the components of the Archives elements.
- Featured Image
A little note before you start to customize the featured image component. Brizy doesn’t display the actual featured image on the editor. Instead, the actual featured image is only displayed on the front-end and you can only see it on the actual search results page. You can’t see the featured image on the preview mode.
To resize the featured image, you can simply click and hold one of the dots on the edge and drag it to any direction. Alternatively, you can click the gear icon on the settings bar.
If you want to add CSS filters to the featured image, you can click the Filters sub-tab under the Image on the settings bar. You can play around with the settings bar to customize the featured image.
- Post Title and Post Excerpt
By default, the post title and post excerpt are represented by a holder, which makes it hard for you to customize them. To make it easy for you to customize them, you can replace the holder with the Text element and set it to dynamic content. Take a look at the screencast below.
You can read our previous article to learn how to add dynamic content in Brizy. You can style up the post title and post excerpt just like when you are styling up regular text in Brizy. You can click the post title and the post excerpt to open the settings bar where you can make the stylings.
- Read More Button
The Read More button is basically a Button element with the link is set to Post URL. In other words, you can customize it just like when you are customizing a regular button. You can refer to our previous article to learn how to customize the button element.
You can add more components to the Archives element if you want it. For instance, you can add the post meta or author’s profile picture. To add one, you can simply drag an element to one of the columns and customize it accordingly.
Once you are done customizing the key components on the columns of the Archives element, you can customize the pagination. You can simply click the pagination to show the settings bar where you can make the customization process. You can set the typography (font family, font size, font style, and so on) as well as the text color.
Adding More Elements
Once you are done customizing the Archives element, you can add more elements to your custom search results page template. You can add elements like search box, button, and so on according to your need. You can either add the additional elements to the same block as the Archives element or to the different blocks. To better manage the layout, you can always add a column first before you add a new element.
Once you are done editing the template, you can click the Update button on the bottom-right corner.
The Bottom Line
WordPress has a search feature to make it easy for your visitors to find a certain content on your website. The appearance of the search results page of WordPress is controlled by the search.php file belongs to the theme you use. If you have PHP knowledge, you can simply edit the file to customize the search results page on your website. Alternatively, you can use a theme builder like Brizy Pro to customize the search results page in a visual way.
The custom search results template you created with Brizy Pro will replace the default custom search results template of your theme. Thanks to a visual editor, you can effortlessly add the elements you like and want. One of the biggest cons of Brizy theme builder might is the absence of ready-made templates, forcing you to create a custom template from scratch. But overall, Brizy theme builder is functionally great.