[Resolved] Category templates with Query Loop

[Erika]

Hi there,

David had an interesting post few days ago on blog styling and query loops: #2281552.

I have a similar issue and seem to miss someting.

I´d like to create a query loop block on a page that displays only two categories with two different designs. I created two block elements (just like in Leos fantastic video). These blocks have the settings:
-custom template –> article
-taxonomy category –> category choosen
-no parent element
-display rule: blog
On the page “Query Loop with two categories and block elements” I have set the query loop to display only these two categories.

On my blog page I´d like to exclude these two categories and have the blog page to have its own block element design. The block element is a content template that applies to all posts.
On the page “New Blog Query Loop” I excluded the two categories in the taxonomy.

On the two new sites the proper blog articles are displayed, but without design, it seems that the block elements are not “connected”.

What setting do I have wrong or what do I miss here? Maybe the display rules should be set different?

Thanks,

Erika

[Fernando]

Hi Erika,

To clarify, you have a Query Loop Block displayed in you Posts page, and you want to exclude the categories you’ve added in the Query Loop Block in your blog page main query?

If so, you’ll need to manually exclude it through code. For instance:

function exclude_category_home( $query ) {
if ( $query->is_home ) {
$query->set( 'cat', '-5, -9' );
}
return $query;
}
 
add_filter( 'pre_get_posts', 'exclude_category_home' );

Kindly replace 5 and 9 with your category id. Getting the category id: https://www.wpbeginner.com/beginners-guide/how-to-find-post-category-tag-comments-or-user-id-in-wordpress/#:~:text=You%20can%20also%20view%20your,hover%20on%20your%20category%20title.

Hope this clarifies!

[Erika]

Hi Fernando,

sorry, no, this is not the problem. I have already excluded the categories which I do not need. Content is fine.

The problem is that the blocks in the Query Loops do not pull the design from the elements, i. e. I created different layouts as block element for the different categories. On the Blog Page all fine. On other pages where I inserted a Query Loop block no design is pulled.

I hope you can follow me…

Thanks, Erika

[Fernando]

Sorry, I still can’t follow.

What do you mean by “pull the design from the element”?

Query Loop Blocks design should come from how you designed the Query Loop itself, not from an Element.

You’re using a Content Template – Block Element for your Blog which is correct.

The design made through a Content Template doesn’t apply to Query Loop Blocks.

Perhaps you can provide screenshots for us the have a better grasp of the context?: https://docs.generatepress.com/article/using-the-premium-support-forum/#uploading-screenshots

Kindly let us know.

[Erika]

Hi Fernando,

then this is what is wrong. I had the idea that I could create two elements, one designed for categorie #1 and one designed for categorie #2, display categorie 1&2 in the Query Loop and set it up the way that the block elements are used just like on the Blog Page.

Any idea how to realize this?

Basically I would like to have the design which I have on the homepage under the section “Elternstimmen”, categorie #1 white background and categorie #2 no background.

Thanks, Erika

[Fernando]

To clarify, do you want the category 1 and 2 to alternate in order of appearance? You would need custom code for this.

What you can do is create a Query Loop Block that gets category 1 and 2, and change the background color alternatively through CSS.

Something like this: https://share.getcloudapp.com/YEukzQze

Example CSS:

.gb-grid-wrapper.gb-grid-wrapper-e8814357.gb-query-loop-wrapper > .gb-grid-column:nth-of-type(even) {
    background-color: #ffffff;
}

Hope this clarifies!

[Erika]

Yes, this is what I would like to reach and just started to think in CSS direction. However, this code is not yet functioning.

See link.

[Fernando]

Try adding my-query to the class list of the Query Loop Block. This can be done in the Advanced settings section of the Query Loop Block.

Then, add either of this CSS:

Target category:

.gb-grid-wrapper.my-query > .gb-grid-column.category-waskundensagen {
    background-color: #ffffff;
}

Alternate:

.gb-grid-wrapper.my-query > .gb-grid-column:nth-last-of-type(even) {
    background-color: #ffffff;
}

You can modify waskundensagen with the category slug, #ffffff with your preferred color code, and even with odd if you prefer.

Kindly let us know how it goes.

[Erika]

Hi Fernando,

very stupid, but if I select the Query Loop block, I don´t have an Advanced settings in the settings. Every other block has it. Why?

If I add WPs own Loop-query, that has the Advanced settings.

However, I added the class to the grid and it works now.

Thanks, Erika

[David]

Hi there,

just to cover, mixing ‘content templates’ in the query loop isn’t possible at this time. The way we did it in Elements was kinda unique and dare i say clever, but its reliant on Theme Hooks that don’t exist in Blocks.

But we are looking into how to achieve that and other design options in the future.

Regarding the CSS Classes, the Grid Block is the correct place for adding the class.
Our Query Loop differs greatly to core.
The core block is responsible for building the query, rendering the HTML and the CSS
GB Query Loop is responsible for building the Query and auto inserting the Grid and Container.

This meant we did not have to create or maintain a grid system specifically for the Query Loop. We just used what we had already 🙂
Aside from less code the advnantages are many.

1. You get the styling controls of Grid and Container Blocks.
2. Any updates to any of our blocks will be available, where feasible, in the query loop.
3. We can repurpose the Query Loop for other things 🙂

I hope that clears things up. And its great to see Query Loop being used like this !!

[Erika]

Hi David,

wow, thanks for taking time to explain this. I see so many possibilities to use this on different sites and it is real fun to experiment with it. Unfortnately you will get some more questions to answer, although I try to figure out a lot of things myself. I am exited to see what features are to come.

Thanks again!

Erika

[David]

You’re welcome !

[Author]

Posts