Display the category entry number in a WordPress block theme

Find out in this tutorial how to show the number of entries in a category in a WordPress block theme using code.

When you have a blog or platform with many posts and you use categories to organize them, you may be interested in showing how many of each of them you have.

For example:

On OsomCode there are currently over 388 tutorials and, of those, 159 are for WordPress in general. This is something that visitors may not know at first glance, but if they visit the category, they will be able to see it quickly because I show it as part of the title.

Here’s how it looks:

In a previous tutorial I explained you how to enter a number of entries of a category in the title of your archive page in a Genesis child theme.

But what if you want to achieve the same result but in a theme block?

This would be the result in Twenty Twenty-Two:

Let’s see how to achieve it.

Instructions for displaying the number of entries of a category in a block theme

1. Add the number of entries to the title of the archive page

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

With this snippet you use the render_block filter to add the number of entries right after the block showing the category title.

For this you use the conditional tag is_category() and identify the block that displays the title so that the modification only affects it. In the case of Twenty Twenty-Two it is the core/query-title.

Most block themes will use this structure but a simple way to make sure is to apply the tutorial where I explain how to display the name of the blocks in the frontend and check the name of the block where you want to add the number of entries.

In case it is a different one, just replace it in the code above.

2. Customize the CSS of the title

Once you’ve got the number of entries displayed on the category archive page, all you need to do is assign the styles to make it look the way you want it to.

In fact, in the snippet above you add two new CSS classes (cat-title and post-number), to make the layout easier for you.

Add this block to the end of style.css:

By inserting these CSS lines you make sure that the number of posts is displayed right after the title.

The example uses the Twenty Twenty-Two theme and it is possible that with other themes you may have to finish adjusting the CSS styles.

Conclusions

Now you know how to display the number of posts in a category for a WordPress block theme (FSE).

You just have to put it into practice. 😉

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