The WordPress search engine sucks
I don't know anyone who uses WordPress who speaks well of its search engine and I still don't understand that it has barely evolved since the first versions.
Not only is it primitive in terms of how it works, it offers no configuration whatsoever. Even the appearance of its results page leaves a lot to be desired. Depending on the template you use, it may have a slightly better design, but in general it is still prehistoric
The appearance of the results can be improved a bit with CSS and responsiveness with a free plugin (with a paid version) like Relevanssi (although it will triple the weight of your database) or this other one that connects with the external service Algolia (free up to 10,000 search requests per month).
But I'll leave the issue of performance for another day as I'm still wrestling with it and I'll deal with the purely aesthetic reforms using GeneratePress (GP) and GenerateBlocks (GB).
GeneratePress and GenerateBlocks
GP and GB are still two tools from a young project with a lot of usability to improve, GB doesn't offer the same learning curve as you might expect if you come from using builders like Elementor or similar.
As we will see in this example, some processes to build certain things with GenerateBlocks are much longer and more laborious and can be a bit desperate in the first attempts. As you add more and more blocks, things get more complicated.
On the other hand, once you understand how they work and get to grips with them, you have much more control over the look and feel of each element.
the difficulty is balanced by its documentation and an impeccable support in which its creators even help out with specific design issues that are not of their competence, so it is still a great alternative to take into account as they remain faithful to their philosophy; fair, clean and light code.
Block Elements
Blocks Elements, hereafter Elements, was added in July 2020 in GeneratePress Premium version 1.11.0. It can be used as a normal hook to insert content almost anywhere on your blog without having to fiddle with code.
When combined with GenerateBlocks it allows you to use the WordPress block editor to create hooks, headers, footers, sidebars, a "Hero" page, content templates, etc.
Let's get down to business.
Structure template
The first thing we'll do is create what we'll call a "structure template". This step is optional, but it doesn't hurt to create one in case one day we want to change something with a couple of clicks.
I give it this name because it will only define structural aspects and not its content. That is, if we want to show or not the header, the footer or its widgets, a sidebar or define the width, etc, and so we don't get confused with the names of the blocks of the rest of the steps.
From the main menu Appearance/Elements or from the top, we can access the creation and management of the elements.
For the specific use that concerns us, when adding a new element we choose Design and press create.
Then we tell the element on which page we want it to be applied. To do this we move to the tab "Rules to display" and in position we select "search results" from the dropdown.
Elements offer a lot of customisation possibilities. As you will see, in that dropdown you can select most of the positions of your blog to apply these settings there.
We can also decide which elements we want to hide. In my case I'm only going to use one option to do without the sidebar, so I select"Content (No sidebars)".
There are other ways to hide the sidebar, but this one, besides being the easiest and quickest, allows us to revert any changes by simply returning here or directly "unpublishing" this element/template to "Draft" status, thus returning the page to its original appearance.
In addition, in the"Deactivate Elements" tab you can leave the page practically clean. You could say that it is the equivalent of Elementor's "Canvas" page template, even slightly improved and simpler to use.
A good practice, which is also recommended in one of the configuration tabs, is to document what each Element does with internal notes in case the title is not descriptive enough or we don't want it to be too long.
I've gotten used to adding notes and comments to everything because when you make a lot of modifications and over time it's inevitable that you end up forgetting where and/or how they were made. So, in internal notes you will always have all the information you need to retrace your steps if something goes wrong or if you want to make new modifications.
By publishing this template we would already have the results page configured to our liking, but, of course, now it would be blank when doing a search because we need to create and publish a new element that will determine the appearance of those searches.
You can leave this template in draft for the moment while we do this and publish it when everything is ready.
Appearance template
Although this is just another Element, I call it an "appearance template" for this little guide because at the time I was a bit confused by the nomenclature of things and their different possible uses.
This is where the real customisation work begins.
We create a new element, this time a Block and give it a descriptive name.
We add a GenerateBlocks container and inside that container we put a Query Loop block.
And this is what we will see.
I've chosen"Start blank" to replicate the native structure of the results, but you can choose any of the templates that this block offers.
The best thing to do is to try them before you decide because once you start working on one of them you won't be able to apply another one and you will have to start the whole process from scratch if you want to change it (something that should solve GB).
After choosing the template, select the query loop block (1) and you will see the "Block" tab on the right (2). Click on it and check the option"Inherit query from template" (3) under "Query parameters". Finally, at the bottom, under "Display Rules"/"Position" (4) we search and set "Search Results" and save as a draft.
When we unfold the query loop we will see this:
We add another grid block inside "Query Template" and select the structure we want.
For the example we are going to use one of two containers that will act as columns. The left column will be the place for the featured image and the right column will show the excerpt of the entry.
You can also play with three containers and configure the central one as a space. I insist, the possibilities are many and the best thing to do is to play around with them.
As you may have noticed, we are building almost from scratch a container with all the pieces that will make up the final aspect of what we want to show. In this case the search results, but you can do it with any other content.
Now let's empty those two containers.
We select the first container and set its width to 33 (which is actually set to 33.33) as you'll see if you scroll down to the resize options.
We do the same with the second container and select 66 (which will automatically be set to 66.66). Obviously, the point is that all the containers you use add up to 100 so that they don't go outside the horizontal space of the page and are displayed on the same line.
Now, with the first container selected, we add a GenerateBlocks image block inside.
What will happen then is that different image spaces will appear. Don't panic, that's because the block detects the Loop and recreates its behaviour. If your search engine shows ten results, those are the spaces that will appear. Just keep working on the image container, passing much of the rest, which is nothing more than the preview of the results page.
We select again the container containing the image (1). In the menu of the block on the right we go down to "Enable dynamic data and activate it (2). Select "Featured image" in Background image source ( 3) and the images will appear in the editor.
In link source we choose "Individual link" (4) so that each image links to its corresponding post and we save again as a draft.
Now we go to the second container, select it and add a "Headline" block from GenerateBlocks.
Select the "Headline" block (1) with the dynamic data activated (2) and repeat the previous process (3), but this time selecting "Title" as the source of the content ( 4) and individual entry in the source of the link ( 5)
Finally, we will add another "Title" block below, which will be used to show the extract of the entry following these steps.
Once added, we repeat the same process again. With this new block selected (1) we activate the dynamic data (2) and as source of the data (3) the current entry and the source of the content "Extract" (4). Now you can also set the length of the extract in words (5).
Finally we will add the pagination, which will appear below the results. To do this, select the query loop block (1) and click on the little + symbol with the dots that you will find in the edit bar (2).
The pagination is built with a block of buttons to which you will have to give the format, colour and shape that fits the look you are looking for. All possible configurations, which are not few, are in the menu of the block in which you will always have the options to fine-tune each block for mobile, tablet and desktop.
I'm going to leave it here so as not to extend this post too much.
I advise you to do all this first in a test environment to see how it really works beyond the preview offered by the editor and publish it when you are sure that it shows as it should.
Remember also that if you did that design block that was proposed at the beginning and which we call the Structure template that we had left in draft, you will need to publish it.
This would be the starting point to further customise the look of the results page depending on your aesthetic preferences.
Lots of possibilities for customisation
You can continue editing or adding whatever you want, such as a grid block with two containers between the title and the excerpt and add there the date of publication, the number of the author of the entry or whatever you like.
If you feel like it, you can even create another template for that bland default page when WordPress doesn't find results when searching and add help buttons or any other element that helps the visitor.
You can change the font type and size, justify it to one side or another, adjust spacing and dimensions of the elements, play with the background colour by adding images and shapes, add icons, borders, hover effects on the links, shadows on the containers, etc.
All this without leaving the editor and without having to fiddle around with CSS or touching your template files.
Here you can try the basic layout of my search results that I still have to polish some things like adding the reading time and the number of visits, writing the empty excerpts and adding the missing featured images.
Bonus ball: If you need to add the typical"Showing (number) results for: ( searchedword )" to the results, here you can find the necessary code code and instructions to make it work with your Query Loop block, thanks to David from GB support
