Adding own category style

Hi Niek,

The front page is using a query loop block for the posts, if you want your archive pages to use the same template, you'll need to create ablock element - content template and assign it to your archives.

Please check this article for more info, make sure you watch the video to understand the concept.
https://docs.generatepress.com/article/block-element-content-template/

A quick way to do this is:
1. Go to the query loop block, and copy the Post template block.

2. Paste it to the block element.

3. Duplicate the content, and remove the original content. (this step generates a new set of ID for the new blocks to avoid CSS conflicts issue).

Hiya,

I did that, and that works. Thank you!
What i do notice is that it for some reason is looping that content 5+ times?

Hi there,

did you add a Query Loop block inside the Content template ?

If so thats not possible today. As you're adding a loop inside a loop.

Instead you need to design that same layout for the individual post in the Block Element Content Template, and then the GP loop will do the rest.

In a future update you will be able to add your Query Loops directly to archive pages.

Oke that makes sense.
I did pull it out of the query loop and its showing.
Now the only thing is that it shows all posts and not only related to that category?

Could i get temporary admin access so i can see that Element ?

Yea sure! I've added it to the secret box :-)

Oh my - have no clue how that is working lol
But see here:

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

You only want the blocks marked in red highlight, which you can copy from the 3 dot menu, and paste in as your content template. The end result being, you will only see 1 x Placeholder template in the Block Element.

So for sanity sake, you could

1. Save you current block element content as draft ( and delete it later when the below works ... fingers crossed).
2. Create a new one, and set the existing display rules
3. Switch the editor to code view ( Top bar 3 dot menu ) and paste in this HTML:

<!-- wp:generateblocks/grid {"uniqueId":"c7c6f65d","columns":2,"verticalGap":0,"isDynamic":true,"blockVersion":2} -->
<!-- wp:generateblocks/container {"uniqueId":"f930d6c0","isGrid":true,"gridId":"c7c6f65d","width":10,"widthMobile":30,"paddingRight":"0","marginTop":"10","marginRight":"0","marginRightMobile":"5","bgImageInline":true,"verticalAlignment":"flex-start","verticalAlignmentMobile":"flex-start","isDynamic":true,"blockVersion":2,"useDynamicData":true} -->
<!-- wp:generateblocks/image {"uniqueId":"1addb577","sizeSlug":"full","className":"cat-image"} -->
<figure class="gb-block-image gb-block-image-1addb577"><img class="gb-image gb-image-1addb577 cat-image" src="https://racingnews.online/images/category/.webp" alt=""/></figure>
<!-- /wp:generateblocks/image -->
<!-- /wp:generateblocks/container -->

<!-- wp:generateblocks/container {"uniqueId":"9b21db65","isGrid":true,"gridId":"c7c6f65d","width":75,"widthMobile":70,"marginLeft":"0","isDynamic":true,"blockVersion":2} -->
<!-- wp:generateblocks/headline {"uniqueId":"bf6260d8","element":"p","textColor":"var(\u002d\u002dcontrast)","fontSize":10,"marginTop":"0","marginRight":"0","marginBottom":"0","marginLeft":"0","inlineWidth":true,"useDynamicData":true,"dynamicContentType":"post-date","className":"dynamic-term-class","gpDynamicTextType":"terms","gpDynamicTextReplace":"Terms","gpDynamicTextTaxonomy":"category"} -->
<p class="gb-headline gb-headline-bf6260d8 gb-headline-text dynamic-term-class">Terms</p>
<!-- /wp:generateblocks/headline -->

<!-- wp:generateblocks/headline {"uniqueId":"1078ae5e","element":"p","fontWeight":"bold","fontSize":0.8,"fontSizeMobile":1,"fontSizeUnit":"em","lineHeight":1,"letterSpacing":0.02,"marginBottom":"0","useDynamicData":true,"dynamicContentType":"post-title","dynamicLinkType":"single-post"} -->
<p class="gb-headline gb-headline-1078ae5e gb-headline-text"></p>
<!-- /wp:generateblocks/headline -->

<!-- wp:generateblocks/button-container {"uniqueId":"3346fc18","marginTop":"5","marginBottom":"0","isDynamic":true,"blockVersion":2} -->
<!-- wp:generateblocks/button {"uniqueId":"decdc738","hasUrl":true,"backgroundColor":"var(\u002d\u002dcontrast-2)","backgroundColorHover":"var(\u002d\u002dcontrast-3)","textColor":"var(\u002d\u002dcontrast-3)","textColorHover":"var(\u002d\u002dcontrast-2)","fontSize":10,"letterSpacing":0.02,"marginRight":"5","marginBottom":"5","paddingTop":"2","paddingRight":"5","paddingBottom":"2","paddingLeft":"5","blockVersion":2,"className":"dynamic-term-class","gpDynamicTextType":"terms","gpDynamicLinkType":"term-archives","gpDynamicTextReplace":"Button","gpDynamicTextTaxonomy":"post_tag"} -->
<a class="gb-button gb-button-decdc738 gb-button-text dynamic-term-class" href="#">Button</a>
<!-- /wp:generateblocks/button -->
<!-- /wp:generateblocks/button-container -->
<!-- /wp:generateblocks/container -->
<!-- /wp:generateblocks/grid -->

4. Then switch back to Visual Editor

Oke that worked!
2 questions left;

1. How can i change the amount of posts in the category?
2. On other pages i have another pagination style (see highlight pages). How can i change it on this category page?

OK, so in the instanced, the Loop and all its related paramters including the number of posts is now in the hands of the Theme and WordPress.

So your category archives by default should show the same number of posts as your blog, which is defined in Settings > Reading > Blog pages show at most

Do you want a different number of posts to the blog ? If so you can use a PHP Snippet like so:

function number_of_posts_on_archive($query){
    if (!is_admin() && $query->is_archive ) {
        $query->set('posts_per_page', 15);
   }
    return $query;
}
 
add_filter('pre_get_posts', 'number_of_posts_on_archive');

Ah yea, i changed that in the normal settings of wordpress, works now.
How about the 2nd question? Any idea for that?

In the other pages i can just click on the pagination for the query loop and it pops up and i change the background color and text color.

See secret area for link on how i have it there.

Probably easiest to match with some CSS:

.paging-navigation .nav-links {
    display: flex;
}

.paging-navigation .nav-links>* {
    flex: 1;
    display: block;
    text-align: center;
    text-decoration: none;
    background-color: var(--contrast-2);
    color: var(--contrast-3);
    padding: 15px 20px;
}

.paging-navigation .nav-links a:hover,
.paging-navigation .nav-links .current {
    background-color: var(--contrast-3);
    color: var(--contrast-2);
}

Mm that css does not work.
But if CSS is the way to go ill figure it out.

Thanks again for your help!

Odd, i wrote it in the dev tools on your site.
If you get stuck let us know :)

Glad to be of help!