This members-only tutorial provides the steps to display 1 wide post at the top, then a banner (any custom HTML), 4 next posts in columns, another banner (any custom HTML) followed by the next 4 posts in a 2 x 2 grid on category and tag archive pages in Oxygen - all this while using a single query (the default one) i.e., without using multiple queries having offsets.

We shall use Easy Posts and add custom CSS for the responsive CSS Grid. It is not possible to use the built-in Grid Layout option because it can not detect the banner HTML that we are going to inject using the WordPress' post counter in Easy Posts' PHP.

This can be applied to the blog posts index or any other kind of archive.

Step 1

Edit your Template with Oxygen.

Add a Section and inside that, an Easy Posts component.

Assign stacked-grid class to it.

Templates > Template PHP:

This is a premium members-only content.

To view the rest of the content, please sign up for membership ($47/month or $399 one-time).

Already a member? Log in below or here.

Need help implementing a tutorial in your site or want to hire me for custom work?

HIRE ME

Find the article helpful and wish to donate?

DONATE

Comments

You need to be logged in to view and post comments.
Not a member yet? Join here.
magnifiercross
linkedin facebook pinterest youtube rss twitter instagram facebook-blank rss-blank linkedin-blank pinterest youtube twitter instagram
%d bloggers like this: