[Resolved] Custom Layout on Category Archive Pages

[Kumara]

Hello,

Sorry if this question is asked a lot – I couldn’t find an easy solution in the forum so far.

I’ve created custom image sizes and generated thumbnails.
I’d like to now customize my category archive pages so that:

the first post (newest post in category) is in it’s own row on top with it’s own layout and image size
the next 6 results are in columns of 3 using one custom image size
the remaining results are in columns of 4 using another custom image size

I have WP Show Posts installed but am not sure if I should use that or use filters, edit a template, etc.

Thanks so much!

[David]

Hi there.

I would do this:

1. Customizer > Layout > Blog and set the Columns to 3 and Make First Post featured.

2. Use the Block Element – Content Template to design your post templates for those in the Columns – for the posts displayed in the columns. Set the Display Rules to your Category Archives and Save it.

https://docs.generatepress.com/article/block-element-content-template/

Then create a second Block element – content template this one is for your Featured Post.
But when you create the element – set the Apply to: First Post. Then in the Parent field select the first block element you created.

3. We will need some CSS to change the columns from 3 to 4 – which i can help with if you can set the above up and share a link to the site.

NOTE Regarding image sizes – i wouldn’t bother creating various size images, they would only be applicable to a desktop device where performance and network speed won’t be a problem. On mobile devices i assume all posts will be displayed in a single column, and therefore all the same size.

[Kumara]

David,

Thanks so much! Block elements were super easy to use and did the trick. Looking forward to your CSS fix to adjust the number of columns.

Also, in the featured post I’m using icons to represent some custom taxonomy terms. They are currently being separated by commas. Is there anyway to remove the commas?

Thanks again! Adding a link below.

[David]

Awesome – so glad to hear that 🙂

If you use Headline Block to display the List of Terms then there is the Term separator field in the dynamic data drop down, just leave that field empty.

Try adding this CSS to adjust the columns:

@media(min-width: 1024px) {
    .generate-columns-container  article:nth-child(n+9) {
        width: 25%;
    }
}

[Kumara]

That worked perfectly. Thanks so much David!

One final question… is it possible to manually insert this element on a page? I realize this is a long shot but I’m curious if I could use this format (newest post full width followed by next three in a row underneath) in a section of my homepage.

Thanks again!

[David]

Not yet.
We’re working on that for the new year 🙂

[Kumara]

That’s great! Thanks so much David!

[David]

You’re welcome

[Author]

Posts