[Resolved] How to customize category/archive page layouts?

[Roger]

Hey Guys,

I’m currently designing a site in a staging environment and have run into a bit of a roadblock.

The issue is trying to edit the category/archive page layouts so they are designed exactly as I’ve illustrated in this image: Custom Website Layout

Would you mind letting me know if it’s possible to the following customizations to the category/archive pages:

1. Hook to make the header on category pages full width

2. Hook to add text or ads between the category header and the blog posts for that category

Appreciate the help.

[David]

Hi Roger,

1. Have you considered using the GP PageHeaders? These can be assigned to the Category / Archives on global locations and the content can be set to full width.

https://docs.generatepress.com/collection/page-header/

2. You can use the GP Hooks > After Header Hook and use a Conditional:

https://docs.generatepress.com/article/using-hooks-conditional-tags/

bottom of the page links to the WP Codex, you’ll be interested in the the is_category or is_archive conditional.

[Roger]

Hey David,

Thanks for replying.

1. You’re right, I totally forgot about the GP PageHeaders. That takes care of that.

2. This one is proving to be a bit more challenging. I did try the After Header Hook before but when I used the following code, it places the text between the navigation menu and category header:

<?php if ( is_category( $category ) ) : ?>
This Content will ONLY show on the static front page
<?php endif; ?>

I’m not sure how to get it between the category header and post area (as per the image). Thoughts?

[Tom]

Let’s try writing a function instead:

add_action( 'generate_before_main_content', 'tu_add_content_above_posts', 0 );
function tu_add_content_above_posts() {
    if ( is_category( 'category-name' ) ) : ?>
        Your content
    <?php endif;
}

Let me know if that helps or not 🙂

[Roger]

Hey Tom,

Thanks for chiming in with the function.

It helped and it looks like I’m just a step away from achieving the desired layout.

Adding the function resulted in the text being displayed just fine when the category/archive pages were not set to “Display posts in columns” in the Customizer. Here is the result: https://imgur.com/59We6ba

However, if I set “Display posts in columns” to 3 (which I’d like to do), the text only shows up to the left. You can see that here: https://imgur.com/lALnqhC

How can this be resolved?

[Tom]

I just edited the code above, can you try it instead?

[Roger]

Perfect Tom! It worked.

Thank you very much for the excellent support as usual.

Cheers.

[Tom]

You’re welcome 🙂

[Rafał]

Hi! Is it possible to hook here? >
between archive header and the loop content?

[Leo]

There is no existing hook there but we can use a workaround solution.

Can you open a new topic and I’ll provide it?

Thanks 🙂

[Rafał]

Leo, as suggested → Hook after archive header / Wrapper for archive posts
🙂

[Leo]

Thanks 🙂

[Author]

Posts