Published on March 28, 2021

Custom CSS Grid Layout for Post Archives in Oxygen

Sridhar Katakam

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 $499 one-time).

Already a member? Log in below or here.

tagschevron-leftchevron-rightchainangle-rightangle-upangle-downfolder-omagnifiercrossmenuchevron-downarrow-right