[Resolved] Enclosing the loop on category archive pages in its own div

[Callista]

Hi there!
I want to be able to enclose the loop on my parent category archive pages in its own div. I’ve been able to do it by creating a child theme and modifying the category.php file. I placed the <div class="cat-archive-posts-loop"> right after do_action( 'generate_archive_title' ); and the closing div right before

/**
 * generate_after_main_content hook.
 *
 * @since 0.1
 */

It works great, except now for some reason on the rest of my archive pages, the grid is off. There are 2 posts in the first row, 1 on the second on the right side, 2 on the third row, 1 on the 4th row on the right side, etc. It looks messy. I’m not sure why creating a div would do this.

The reason I wanted to create this div is I want to turn off the loop with display:none on certain archive pages. So then I thought I could use a hook element and just have the div appear on selected archive pages. The problem with that is there is no hook that goes after the page header and before the content. I’ve tried both ways. If I use generate_after_archive_description, the opening div ends up in the page header. If I use the next hook, generate_before_content, the opening div gets repeated inside each article in the loop, which isn’t what I want either.

Can you help me either fix the grid issues caused by the div, or help me figure out how to make the div only appear on certain pages? Or some other creative solution? 🙂

I really appreciate your help. I have been struggling with this for days.
Have a great day!
Best,
Callista

[Tom]

Hi there,

Is it not possible to use an existing class to hide the loop? Any chance you can link me to a page where it’s working vs a page where it’s not?

Let me know 🙂

[Callista]

Hi Tom,
If I could use an existing class, that would be great! Let me explain what I’m trying to do. On the parent category pages, I don’t want the default loop to show. Instead, I want to use instances of WP Show Posts to display the first 3 or so posts from each sub category. Here’s an example: https://www.beautiful-muslimah.com/beauty-style/ The example of where the post loop is active is here: https://www.beautiful-muslimah.com/beauty-style/sets/ (Right now I’ve got a “coming soon” message – it seems that before I sent you my login details via the contact form. I’ll do that again right now.)

I know I can disable the loop through PHP on category archive pages, but that also makes the WP Show Posts not work because I DO want to show posts, just organized by subcategory. (I’ve also tried preventing child posts from displaying on parent category pages, with the same problem.)

I also know I can use pages instead of parent categories (or this method), but I want the breadcrumbs to show the correct path and hierarchy. That’s why I just wanted to be able to hide the loop, not get rid of it.

Thank you for allowing me to pick your brain!
Best,
Callista

[Tom]

You could try this:

1. Remove the container you’ve created.
2. Add this CSS:

.category-86 .generate-columns-container:not(.masonry-container) .generate-columns,
.category-123 .generate-columns-container:not(.masonry-container) .generate-columns {
    display: none;
}

Just adjust the category-xx class so they have the right IDs 🙂

[Callista]

PERFECT, as always!! Thank you so much, Tom. (I added some CSS to hide the navigation below as well.) You guys are the best!
Callista 🙂

[Tom]

Glad I could help! 🙂

[Author]

Posts