In this lesson, we will cover how to customize the search results template.
When visitors on 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 and this is the default layout for results.
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 if you want to keep or remove the Search Results title.
If you keep it, you have a choice to show the search term in the title or not.
And you may choose to style the block further.
In this example, I am going to customize how my searchresults are displayed.
So 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.
So 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.
And then change the vertical alignment to align 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 3x4
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 display in a new format due to modifying the search results template.
To undo the changes, click on the three vertical dots next to the name and select Clear Customizations.
And this will revert back to the original state of the template.
All the best as you decide how you want your search results to be displayed.