Highlight the last post in WordPress query loop block

Learn in this tutorial how to create a layout that allows to display the first post of WordPress query loop block as featured.

The native WordPress block that allows you to display a list of entries, called query block, has improved a lot in the latest updates.

In fact, in this tutorial I go over all the options it offers in its user interface. I have also explained how you can modify the query parameters to customize which entries are displayed.

To get even more out of it you can create your own block styles to customize the design of the displayed entries.

Specifically, in this tutorial you are going to see how to create a custom block style so that the first entry fills the entire width when you are using a grid layout. With the following image you will understand it even better:

Here’s how to do it:

Steps to highlight the last post in a WordPress query loop block

1. Register the new style

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

With this code you are registering a new block style called “Osom First Post” that will display the first post at 100% width.

In it you indicate the name of the block to which you are going to add the new style, in this case the entries loop (core/query), and you define 3 parameters:

• name: internal name that will also be given by the CSS class.
• label: tag used for the name to be displayed in the editor.
• inline_style: inline CSS that will be applied.

Obviously you can customize these parameters to your liking. Now, let’s see what you have to take into account to modify the CSS.

2. Customize the CSS

When registering the new block style you have given a name (name) which translates into a CSS class. Specifically:

• is-osom-first-post

So, that class will be added when you choose that block style and that’s the one you use to tell it that the first entry takes up the full width.

Adding the CSS inline while registering the block has two very interesting advantages:

1. The CSS is applied on both the frontend and the backend, i.e. you will see the changes also in the editor without having to do anything extra.
2. The CSS will only load when that block is used, specifically when the block style is used.

And remember that this is a simple example that can inspire you, you can add all the CSS you see fit to highlight that first post (frame, background color…).

3. Customize the query loop and select the block style

The only thing left to do is to add the query loop block on the page of your choice and customize it to your liking.

To apply the new style you have created just go to Block > Styles and select it.

Conclusions

As you can see, with a little bit of code you can achieve a very attractive design to highlight the last post in a query loop .

Any questions? Let me know in the comments.

And if you want to give me any suggestion for future tutorials, leave it in the contact form. Advantages of being a subscriber. 😉