Display a title in the query block only if there are results

Discover how to display a title in the WordPress query block only when results are available, and hide it if they are not.

The native WordPress block that allows you to display a list of posts, now called query block, has been greatly improved in the latest updates.

In fact, in this tutorial I go over all the options it offers in its user interface. Although there are quite a few, it does not reach the degree of customization that can be achieved by modifying the parameters of WP_Query.

For example, one of my clients asked me to create a page with different query loops for specific categories, and each one with its header introducing that category.

However, since the content was temporary or with expiration date, not all query loops always returned results. And in those cases, it looked terrible if the header was displayed without anything else appearing afterwards.

Do you want to know how I solved it? By creating a conditional header that is shown only when the query block returns results and is hidden when there are no results.

Here’s how I did it:

Steps to control the display of the title depending on whether or not there are results in a query block

First, add a query loop block and configure the settings to your liking.

1. Examine the block ID

Once you have created the block, go to “code editor” mode and examine the HTML.

Pro tip: use the keyboard shortcut Cmd Alt Shift M to go faster.

At the height where you have created the block you will see something similar to:

<!-- wp:query {"queryId":8,"query":{"perPage":3,"pages":0,"offset":0,"postType":"post","order":"desc","orderBy":"date","author":"","search":"","exclude":[],"sticky":"","inherit":false}} -->

The part you are interested in is the queryId since all content blocks have a numeric identifier. In this case it is 8.

2. Modify the query of the chosen block

Add the following code at the end of functions.php or in your functionality plugin:

This snippet checks for posts matching the query criteria within the query block with queryId 8. If there are results, it adds the heading “Upcoming” before the block content. If there are no results, it does not show this heading either.

Of course, you can change the queryId and the text or level of the header to your liking.

And if your CPT has a custom taxonomy you will have to indicate it in the code. In the following snippet I leave you an example with the taxonomy book-series. Replace it with the one of your CPT:

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

You can see how easy it is to display a title above the WordPress query block only when it returns results.

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. 🙂