WordPress Search Results Template Customisation Guide: Improving My Site’s User Experience

WordPress Guide Customising Your Search Results Template
Read time: 3 min.

Table of Contents

Are you looking for ways to enhance your website’s user experience? Customising your website’s search results template may be something you’d like to consider. 

Let’s take a look at how you can modify the search results template on your WordPress site to modify the appearance of search result pages based on what you feel may provide your site’s visitors with the best experience.

Understanding the Importance of Search Results Template

YouTube Video on Customising Search Results Template by WordPress

When visitors search for content on your website, they are directed to the search results page. 

The layout and structure of this page, known as the search results template, significantly influence how these results are presented to users.

For instance, if you’re using the “Twenty Twenty-Four” theme or any other WordPress theme, the default option will be as seen above.

Perhaps you like the theme’s general looks but the default search results layout is not according to your desired content presentation goals.

Cases like this are where customising the search results template is what you’ll need to do as you can keep the general looks of the theme but modify only the search results template.

Step-by-Step Customisation Process

Step 1: Accessing the Site Editor

First, go to the site you want to make changes to and then navigate to your WordPress dashboard. Click on “Appearance” and then select “Site Editor.”

Step 2: Navigating to the Search Results Template

Once you’re in the Site Editor, locate the “Templates” section.

Afterwards, choose the “Search Results” section.

Step 3: Customisation Options

  • Adding Header and Footer:

Here, you can choose to modify the headers and footers of your search results template.

  • Modifying Query Loop Block:

The Query Loop block determines how search results are fetched and displayed. If you customise this block, it will let you modify how the results of each search are presented.

Step 4: Choosing Display Patterns

Click on Query Loop then click “Replace” if you’d like to replace the display pattern of the Query Loop Block.

You’ll be able to then see many different choices of patterns. A pattern like “Small Image and Title” provides a good balance between image and text depending on the contents of your website.

Once you’re satisfied with the pattern of your choice, there are more options for customising the Query Loop Block, where you’ll have more in-depth customisations.

To see these customisation options, you can expand Query Loop in the toolbar on your left, followed by Post Template, and you’ll see more options for customising your Query Loop Block. 

If your selected display pattern displays your content in columns, some of the things you can customise include the column’s size, alignment, and many more.

Step 5: Preview and Save Changes

Once you’ve made you’ve made your final desired modifications, click on “Save” to ensure that your changes have been saved.

After saving your modifications, it’s good for you to try to preview your newly updated website.

This will allow you to put yourself in the shoes of your website’s visitor and perhaps you can try to search for something in your website to see if the search results page displays the contents according to what you’ve envisioned.

Reverting Customisations

If, for any reason, you intend to undo the changes made to the search results template, you may do so by simply navigating back to the Site Editor. 

Afterwards, locate the Search Results similar to before, then click on the three vertical dots next to its name, and select “Clear Customisations”.

This action will restore the template to its original state.

All in all, customising the search results template on WordPress is good for you to learn if you would like to create a search experience that aligns seamlessly with your website’s design and content goals.

This is especially true for larger websites where visitors often use the search function within the website.

By customising your search results template well, you can enhance user engagement and satisfaction by presenting search results in a more visually appealing and user-friendly manner.

Feel free to experiment with the various layouts, patterns, and settings available to find the best modifications to your search template that best displays your content.

Related to:

WordPress Guide: Choosing and Installing Plugins

Checking my Windows 10/11 PC’s Login History