[Resolved] category pages

[a1reno]

Hi,

I can never find a way to make my category pages look good using the default options that come with wordpress/generatepress (I’m not sure if this is just me, however, if you have examples of great looking category pages I’d love to see them!)

So I imagine the best way to do this is to make a custom page using generateblocks for each category instead. What is the best way to implement this into generatepress assuming I have created all the custom pages already?

I hope this makes sense.

Thanks in advance.

[David]

Hi there,

do you have any example websites that show a design you like ?

[a1reno]

Hi David,

Thank you for your reply.

I don’t need anything elaborate. Perhaps some simple boxes like in my related posts section at the bottom of my blog posts.

I just wonder if it’s easier to make multiple custom pages in generateblocks and use a redirect, or can it be designed simply using generatepress customisation?

[David]

OK, so you could use a block element – loop template:

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

1. Create a new Loop Template in Appearance > Elements.

2. then Copy your current Related Post Query Loop block and paste that into the Loop template.
2.1 select that Query Loop and Delete ALL of its Parameters.
2.2 then enable the Inherit Query from Template
2.3 with the Query Loop Block selected, in the block toolbar, click Add Pagination icon.

3. Set the Display Rules to the archive pages you want it to replace.

You will now have a block built template for your archives.

As a note, before or after the Query Loop block you can add other content too. eg. for the Archive Title and Description.

[a1reno]

Wow! I did not know that was possible! (I hope this is something new and not something that was there along but i didn’t know about!)

I’ve now got something to work with and can edit it accordingly.

The only thing I couldn’t manage to do was to add the pagination. Do you have a screenshot of where I can find this icon?

Thanks once again!

[David]

Its a fairly recent edition to GPP 🙂

See here:

https://www.screencast.com/t/st7ckCtwxd

[a1reno]

Ok that’s perfect. I’ve now added pagination.

One more thing, I want to put a headline (using dynamic text) at the top of each template that is the title name of the post category archive but I wasn’t sure how to do this.

Is this possible?

Thanks in advance.

[David]

For sure:

1. Add a GenerateBlocks Headline Block.
2. In the Blocks toolbar there is the GP Dynamic Data options:

https://docs.generatepress.com/article/dynamic-data/

Notes: you only see this in the GP Elements.
It will at some point be absorbed into the GB Dynamic data options.
But for now its the only way to get the archive title.

2.1 from the Dynamic Data select: Title

[a1reno]

Ok. That’s all done now.

Thanks for your help. The query loop and your suggestions really helped solve a potential headache I’ve been putting off for ages.

Thanks a lot for your help and have a great day!

[David]

Really glad to hear that 🙂

[a1reno]

Sorry, one more question.

I’ve noticed that on desktop the container doesn’t seem to span across the full page, there seems to be some room for a side bar I think?

How do I make the category archive full page?

[David]

Ok, so thats because you have this CSS:

@media only screen and (min-width: 1200px) {
    body:not(.page) .site-content .content-area {
        max-width: calc(100% - 300px);
    }

    .is-right-sidebar {
        min-width: 300px;
        margin-left: 20px !important;
    }
}

Which effects everything except Pages.
If you want to keep that for just Posts then change the CSS to:

@media only screen and (min-width: 1200px) {
    .single-post .site-content .content-area {
        max-width: calc(100% - 300px);
    }

    .single-post .is-right-sidebar {
        min-width: 300px;
        margin-left: 20px !important;
    }
}

[a1reno]

That worked well thank you!

Another hurdle that has now presented itself, is that I’ve put a blue container at the top that should be full width, however, there appears to be margin appearing all the way around it including the top and bottom.

Is there something wrong with my block setting or is it inheriting margin from some other setting?

[David]

Ok, so you will need to make the category page full width.
To do that, create a Layout Element in Appearance > Elements, set the Content > Content Area to Full width and set the display rules to match the loop template.

Now in your content template, each of the Container Blocks you can set Container width and Inner container width to suit.

[a1reno]

Super that worked great!

I have noticed that on desktop and mobile, the container seems to be as expected. But when I look at ipad in google inspect view, I see there is a faint line under the nav bar. Is this chrome not displaying it correctly or is there really a faint line there? I’ve added a screenshot to explain what I mean.

[Author]

Posts