Transcript
Introduction
In this lesson, we will cover how to customize the search results template. When visitors to your site search for content, they are taken to a search results page, and the search results template determines how this page and the results are structured. I am using the Twenty Twenty-Four theme, the default layout for results.
Customizing the search results template
We can customize the search results page by editing the template. So, to do this, let’s make our way to the dashboard, click on Appearance, and then open up the Site Editor. Click on Templates, and then select the search results template. You can add a unique header and footer to the template, or you may wish to change how results are displayed via the Query Loop block. Let’s open the List view to gain a better understanding of the page structure. Firstly, you can decide whether to keep or remove the Search Results title. If you keep it, you can show the search term in the title and you may choose to style the block further.
Selecting a new pattern
In this example, I will customize how my search results are displayed. The first step is to select the Query Loop block, which is used to display results. I am going to select a different pattern for my Query Loop block. To do this, I will use my Block Toolbar and click on Replace. This allows you to select a different pattern. And I am going to select the pattern called Small Image and Title. Now, I will go ahead and modify the Query Loop block further. Firstly, let’s change the alignment to Wide Width. Next, I will add a Post Excerpt block below the title. Once added, I will select the right column in the List View. Then, change the vertical alignment to align the top, as I want the title and the excerpt to align with the top of the image. Next, I am going to select the post-featured image. Open Styles and then change the aspect ratio of the Post Featured Image block to 3×4 to ensure uniformity and that all the images are the same size. Then, we can hit Save and check out our new search results page on the front end. Once again, I will search for some content. But this time, the results are displayed in a new format due to modifying the search results template.
Clearing customizations
To undo the changes, click on the three vertical dots next to the name and select Clear Customizations. This will revert back to the original state of the template.
Conclusion
All the best as you decide how your search results will be displayed.