Discover in this tutorial how to add a read more button in a query block using code.
The native WordPress block that allows you to display a list of posts, called query block, is one of the most versatile blocks.
In fact, in this tutorial I review all the options it offers in its user interface.
But, although there are quite a few, it does not allow to introduce a button that displays the “read more” option.
So, in this tutorial you are going to see how to automatically add the permalink of an entry to a button block thanks to the render_block_{$this->name} filter.
Let’s see how:
Steps to create a read more button in the WordPress query block
1. Add the button to the query block post template
First, choose the query loop block and the layout you want. Once done, inside the post template, add a button block and customize it to your liking.
2. Add a custom CSS class
Once done, go to the “Advanced” section of the button block (the one inside “Buttons”) and enter add-permalink in “Additional CSS class(es)” of the block.
3. Automatically add the permalink to the entry
Add the following code at the end of functions.php or in your functionality plugin:
To see this and another 1097 code snippets of this website, login or subscribe here.
In this code you use the render_block_{$this->name} filter in combination with the WP_HTML_Tag_Processor class.
In it you order that, if the button block has the CSS class add-permalink, it should add the link to the post.
Keep in mind that since you are using a PHP filter you have the limitation that you will only see the result in the web frontend, in the backend the changes will not be reflected.
Conclusions
Now you know how to add a button that links to the post in the query block.
If you have any question, please leave it in the comments. And if you want to give me a suggestion for future snippets, please send it through the contact form.
Benefits of being a subscriber. 🙂
