Archive with Query Loop

Hi there,

in the next GP Premium update we will be adding a new Element Type that allows you to replace the Theme archives with those GBP Query Loops.

In the meantime, it can be done using a Block Element - Content Template:

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

Which GBP Query Loop pattern did you use ? Can i see it ?

Hi David,

thanks for your answer.

If I do it with Block Element content Template, do you mean I have to rebuild the Query Loop? If so, are there the exact same settings available as in the Query Loop? Because I take a look, and dont know ho I would do this there.

Would it be better to wait for the Update you mentioned? Do you know when it will be released?

I use the free Query Loop from GPB, but with some changes.

But I build the design on a not public website and I cannot set a staging site because my Hoster did not have this feature, so I cannot show this site.

You can try this:

1. Appearance > Elements --> New Block
2. Set the Element Type to: Content Template.
3. In the 3 dot top bar menu, switch to code view:
4. In the code editor paste the following code:

<!-- wp:generateblocks/image {"uniqueId":"2265530a","sizeSlug":"full","useDynamicData":true,"dynamicContentType":"featured-image","dynamicLinkType":"single-post"} /-->

<!-- wp:generateblocks/container {"uniqueId":"4a0e425e","paddingTop":"12","paddingRight":"18","paddingBottom":"18","paddingLeft":"18","backgroundColor":"var(\u002d\u002dbase-2)","zindex":0,"isDynamic":true,"blockVersion":2} -->
<!-- wp:generateblocks/image {"uniqueId":"0f810950","sizeSlug":"thumbnail","width":"36px","height":"36px","borderColor":"var(\u002d\u002dbase-3)","alignment":"floatLeft","useDynamicData":true,"dynamicContentType":"author-avatar","marginRight":"4","borderSizeTop":"2","borderSizeRight":"2","borderSizeBottom":"2","borderSizeLeft":"2","borderRadiusTopRight":"36","borderRadiusBottomRight":"36","borderRadiusBottomLeft":"36","borderRadiusTopLeft":"36"} /-->

<!-- wp:generateblocks/headline {"uniqueId":"1710792f","element":"div","fontWeight":"700","fontSize":14,"marginBottom":"12","inlineWidth":true,"useDynamicData":true,"dynamicContentType":"author-name"} -->
<div class="gb-headline gb-headline-1710792f gb-headline-text"></div>
<!-- /wp:generateblocks/headline -->

<!-- wp:generateblocks/headline {"uniqueId":"d8375f7c","element":"div","borderColor":"var(\u002d\u002dcontrast-3)","fontWeight":"700","fontSize":14,"marginBottom":"12","marginLeft":"6","paddingLeft":"6","borderSizeLeft":"2","inlineWidth":true,"useDynamicData":true,"dynamicContentType":"post-date"} -->
<div class="gb-headline gb-headline-d8375f7c gb-headline-text"></div>
<!-- /wp:generateblocks/headline -->

<!-- wp:generateblocks/headline {"uniqueId":"bcdb0fb1","textColor":"#222222","linkColor":"#222222","linkColorHover":"#575760","fontSize":20,"marginTop":"6","marginBottom":"6","useDynamicData":true,"dynamicContentType":"post-title","dynamicLinkType":"single-post"} -->
<h2 class="gb-headline gb-headline-bcdb0fb1 gb-headline-text"></h2>
<!-- /wp:generateblocks/headline -->

<!-- wp:generateblocks/headline {"uniqueId":"b0e62723","element":"p","fontSize":15,"useDynamicData":true,"dynamicContentType":"post-excerpt","useDefaultMoreLink":false,"excerptLength":15} -->
<p class="gb-headline gb-headline-b0e62723 gb-headline-text"></p>
<!-- /wp:generateblocks/headline -->

<!-- wp:generateblocks/button-container {"uniqueId":"f4522935","isDynamic":true,"blockVersion":2} -->
<!-- wp:generateblocks/button {"uniqueId":"5904d52c","hasUrl":false,"backgroundColor":"#0366d6","backgroundColorHover":"#222222","textColor":"#ffffff","textColorHover":"#ffffff","fontWeight":"700","fontSize":10,"textTransform":"uppercase","letterSpacing":0.18,"marginRight":"2","paddingTop":"4","paddingRight":"6","paddingBottom":"4","paddingLeft":"6","blockVersion":2,"useDynamicData":true,"dynamicContentType":"terms","dynamicLinkType":"term-archives","termTaxonomy":"category"} -->
<span class="gb-button gb-button-5904d52c gb-button-text">Button</span>
<!-- /wp:generateblocks/button -->
<!-- /wp:generateblocks/button-container -->
<!-- /wp:generateblocks/container -->

5. Switch back to the Visual editor.

You should see the single content template, with placeholder text.
Adjust it how you need it.

6. Set the Display Rule Locations:

All Archives
Blog

And then you should see the same design as the your Query Loops.

The alternative is to wait for the update. It will be soon but we are probably a few weeks before we release a beta version for testing.

Thanks, this works very well.

The only problem is, that on the archive, the containers are separated and on blog page not.

Blog Page:
https://prnt.sc/fEajClNtccaH

Archive:
https://prnt.sc/XT0L4G1yXzIW

i can't decide yet which version looks better, but how can i make them both look the same?

In Customizer > Layout > Container you cans set the: Content Layout to: One Container

Yes, I know, but this is for the whole site.
I now have container separated, but the blog page with query loop is not separated. Why is that? And can i make this separated too?

Hi David,

I have another question. With the code you provided, each post has a button for the categories. Is it possible the make this button a read more button? I have tried it, but with no success. Unfortunately, I can't see through all the settings there yet.

1. Edit the Element Content Template, in the sidebar with the Element tab selected, check the Keep default post container this will give you the separated containers.

2. Add a GB Buttons block, type straight into the label your text eg. Read more
then set the dynamic settings like so:

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

Hi David,

thanks a lot.

For 2: Can I also use the categories button for this, which is already there? Because it looks good.

Yes, make a Duplicate of the ButtonSSSS Block - emphasis on the S there :) - that contains the Category button
See here:

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

Then change its settings to the ones i provided above.

Hi David,

thanks, but I meant if I can keep this button but it gets the function of a Read More button. I don't need a category button.

Then you can just select the category button and change it settings to those i provided here:

https://generatepress.com/forums/topic/archive-with-query-loop/#post-2271054

Ahhh, that was easy. I would not have thought that.

thank you very much, that worked well.

Awesome - glad to hear that!