[Support request] Change pagination to “load more” button

[Gabriel]

Hello,

I’m struggling to change the pagination to a “load more” button. From my understanding, I have to visit Customize > Layout > Blog and enable both “Use Infinite Scroll” and “Use button to load more posts.” However, I’m still unsure how to make the load more button appear on queries.

[Leo]

Hi Gabriel,

Have you resolved the issue?

I went to the News feed page (your posts/blog page) and can see the infinite scroll button at the bottom of the page:
https://www.screencast.com/t/iVqum74Hcm

[Gabriel]

Thanks for the prompt response, Leo.

Though, I’m a little confused. Are the pages I created (NBA, NFL, Soccer, etc) not the “News Feed” post
page?

I understand there’s a “News Feed” section in the backend, but it’s blank, and there’s nothing to edit. How do I edit the section in your screenshot?

[David]

Hi there,

the Load More button is only an option for the theme archive and blog pages.
it won’t work with the GenerateBlocks Query Loop block on a static page. Load more for those blocks is a planned future feature.

If the Load More is an important feature than it would require a different approach.
Theres a few steps involved, and i am happy to walk through them if you want.

Let me know

[Gabriel]

I understand, David.

Please let me know what those steps are, and I’ll try my best to follow them.

[David]

OK.
Before we get into the details. Are your current pages the exact design you want ? e.g a Featured Post with image, and the rest as a list ?

[Gabriel]

Yes, they’re exactly how I want.

[David]

OK.
So each of those links in your menu would need to be changed to Category links for the specific terms.
In doing so you will see a very similar layout as you have now.
And this is because the site you imported has a Block Element -> Loop Template displaying the posts.
This template can be found in Appearance > Elements and is titled: All Archives

1. The first thing to do is to Quick Edit the All Archives template and set its status to Draft
This will disable it.

2. Then in Appearance > Elements -> Add New –> Block Element.
Give it a title eg. Archive Content Template
Then set the Element Type to Content Template:

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

2.1 now you can design the post article for the main feeds – ie, the post template with just the Title and Post meta ( no featured image ).
To save some time, go to the 3 dot menu in the top bar, and select the Code editor, and paste in this code:

<!-- wp:generateblocks/headline {"uniqueId":"c528b4c2","blockVersion":2,"flexDirection":"column","position":"relative","order":0,"sizing":{"height":"","width":""},"alignment":"","fontSize":13,"fontFamily":"Helvetica","marginRight":"500","marginBottom":"1","marginRightTablet":"350","marginRightMobile":"100","paddingTop":"0","paddingRight":"0","paddingBottom":"0","paddingLeft":"0","paddingRightTablet":"0","borderRadiusTopRightTablet":"0","borderRadiusBottomRightTablet":"0","borderRadiusBottomLeftTablet":"0","borderRadiusTopLeftTablet":"0","backgroundColor":"","textColor":"#000000","linkColor":"var(\u002d\u002dcontrast-3)","linkColorHover":"","borderColor":"","highlightTextColor":"","iconColor":"","className":"dynamic-term-class","gpDynamicTextType":"terms","gpDynamicLinkType":"term-archives","gpDynamicTextReplace":"Terms","gpDynamicTextTaxonomy":"category","gpDynamicTextTaxonomySeparator":""} -->
<h2 class="gb-headline gb-headline-c528b4c2 gb-headline-text dynamic-term-class">Terms</h2>
<!-- /wp:generateblocks/headline -->

<!-- wp:generateblocks/headline {"uniqueId":"5d72c7b6","blockVersion":2,"fontWeight":"600","textTransform":"capitalize","alignment":"left","fontSize":17,"fontFamily":"Arial","marginBottom":"-1","paddingTop":"10","paddingBottom":"0","paddingLeft":"0","backgroundColor":"","textColor":"","linkColor":"","linkColorHover":"","borderColor":"","highlightTextColor":"","iconColor":"","useDynamicData":true,"dynamicContentType":"post-title","dynamicLinkType":"single-post"} -->
<h2 class="gb-headline gb-headline-5d72c7b6 gb-headline-text"></h2>
<!-- /wp:generateblocks/headline -->

<!-- wp:generateblocks/headline {"uniqueId":"b4a86526","element":"p","blockVersion":2,"fontSize":11,"paddingTop":"0","paddingRight":"0","backgroundColor":"","textColor":"","linkColor":"","linkColorHover":"","borderColor":"","highlightTextColor":"","iconColor":"","useDynamicData":true,"dynamicContentType":"post-date"} -->
<p class="gb-headline gb-headline-b4a86526 gb-headline-text"></p>
<!-- /wp:generateblocks/headline -->

it is the code for those 3 blocks i copied from your existing design.
Now switch back you the Visual editor to see that.

3. Set the elements Display Rule locations to All Archives.

4. Publish the

Now view one of your Category archives,

You should see just the list of posts.

Let me know and we can then look at the Featured post and any other changes.

[Gabriel]

All done. I noticed the query displays more content now. You mentioned that I should change the menu links from pages to categories?

[David]

OK, so thats getting there.
Menus, in Appearance > Menus, WordPress adds a category link for each term, see here:

https://www.screencast.com/t/4u1eHALvcd1l

So you can add those to your menu and they will show the relevant category archive.
Example of which is seen here:

https://sidelinesoudev.wpengine.com/?cat=23

Next thing we need to do is to create the Featured Post for those archives.

1. In Appearance > Elements -> Add New –> Block Element.
Give it a title eg. Archive Featured Post
1.1 set the Element Type to Content Template.
1.2 set the Apply to -> First Post
1.3 set the Patent Element to your first template ie. Archive Content Template

See here:

Those last 2 steps will remove the elements display rules as it will now use those of the Archive Content Template and just replace the first post.

2. Then for your first post design, switch to code editor and add the code below and then switch back to visual editor.

<!-- wp:generateblocks/container {"uniqueId":"e3472f06","borderColor":"#008eff","gradient":true,"gradientDirection":180,"gradientColorOne":"rgba(255, 255, 255, 0)","gradientColorTwo":"var(\u002d\u002dcontrast)","gradientSelector":"pseudo-element","bgOptions":{"selector":"element","opacity":1,"overlay":false,"position":"center top","size":"cover","repeat":"no-repeat","attachment":""},"bgImageInline":true,"verticalAlignment":"flex-end","verticalAlignmentMobile":"","innerZindex":1,"shapeDividers":[],"isDynamic":true,"blockVersion":3,"display":"flex","flexDirection":"column","justifyContent":"flex-end","sizing":{"width":"","widthMobile":"100%","minHeight":"250px","minHeightTablet":"200px","minHeightMobile":"250px","height":"","widthTablet":"75%"},"marginBottom":"200","marginBottomTablet":"200","marginBottomMobile":"50","paddingTop":"20","paddingRight":"20","paddingBottom":"20","paddingLeft":"20","paddingTopTablet":"20","paddingRightTablet":"20","paddingBottomTablet":"20","paddingTopMobile":"20","borderSizeTopTablet":"0","borderSizeRightTablet":"0","borderSizeBottomTablet":"0","borderSizeLeftTablet":"0","borderSizeTopMobile":"0","borderSizeRightMobile":"0","borderSizeBottomMobile":"0","borderSizeLeftMobile":"0","borderRadiusTopRight":"0","borderRadiusBottomRight":"0","borderRadiusTopRightTablet":"0","borderRadiusBottomRightTablet":"0","borderRadiusBottomLeftTablet":"0","borderRadiusTopLeftTablet":"0","borderRadiusTopRightMobile":"0","borderRadiusBottomRightMobile":"0","borderRadiusBottomLeftMobile":"0","borderRadiusTopLeftMobile":"0","useDynamicData":true,"dynamicContentType":"featured-image","lock":{"move":false,"remove":false},"opacities":[],"transitions":[],"boxShadows":[],"transforms":[],"textShadows":[],"filters":[],"advBackgrounds":[]} -->
<!-- wp:generateblocks/headline {"uniqueId":"a8c661f2","element":"h4","blockVersion":2,"position":"relative","zindex":"1","fontWeight":"900","textTransform":"uppercase","fontSize":40,"fontSizeTablet":30,"fontSizeMobile":25,"lineHeight":0.8,"lineHeightMobile":0.9,"letterSpacingMobile":0,"marginBottom":"10","backgroundColor":"","textColor":"var(\u002d\u002dbase-3)","linkColor":"var(\u002d\u002dbase-2)","linkColorHover":"var(\u002d\u002dbase-3)","borderColor":"","highlightTextColor":"","iconColor":"","useDynamicData":true,"dynamicContentType":"post-title","dynamicLinkType":"single-post"} -->
<h4 class="gb-headline gb-headline-a8c661f2 gb-headline-text"></h4>
<!-- /wp:generateblocks/headline -->

<!-- wp:generateblocks/headline {"uniqueId":"b72a7626","element":"p","blockVersion":2,"display":"flex","alignItems":"center","position":"relative","zindex":"1","fontSize":14,"fontSizeMobile":11,"letterSpacing":-0.01,"marginBottom":"0","backgroundColor":"","textColor":"var(\u002d\u002dbase-2)","linkColor":"","linkColorHover":"","borderColor":"","highlightTextColor":"","hasIcon":true,"iconColor":"","useDynamicData":true,"dynamicContentType":"post-date"} -->
<p class="gb-headline gb-headline-b72a7626"><span class="gb-icon"><svg aria-hidden="true" role="img" height="1em" width="1em" viewBox="0 0 448 512" xmlns="http://www.w3.org/2000/svg"><path fill="currentColor" d="M148 288h-40c-6.6 0-12-5.4-12-12v-40c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v40c0 6.6-5.4 12-12 12zm108-12v-40c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12h40c6.6 0 12-5.4 12-12zm96 0v-40c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12h40c6.6 0 12-5.4 12-12zm-96 96v-40c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12h40c6.6 0 12-5.4 12-12zm-96 0v-40c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12h40c6.6 0 12-5.4 12-12zm192 0v-40c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12h40c6.6 0 12-5.4 12-12zm96-260v352c0 26.5-21.5 48-48 48H48c-26.5 0-48-21.5-48-48V112c0-26.5 21.5-48 48-48h48V12c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v52h128V12c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v52h48c26.5 0 48 21.5 48 48zm-48 346V160H48v298c0 3.3 2.7 6 6 6h340c3.3 0 6-2.7 6-6z"></path></svg></span><span class="gb-headline-text"></span></p>
<!-- /wp:generateblocks/headline -->
<!-- /wp:generateblocks/container -->

3. Publish the element.

[Gabriel]

Thanks for your patience. I just completed the steps above.

[David]

OK, so its getting there with a few things to fix 🙂

The Archive Featured Post if you edit that.
Select the Container Block.
1. In Layout – set the Position to Relative , this will make sure the Background -> Gradient overlay only covers the container and not the whole page as it is now.

2. In Spacing – remove the 200px bottom margin.

3. In Sizing – change the min-height to a value you would like.

Question, will there be a right sidebar or something to the fill the empty space ?

[Gabriel]

Thanks again for your patience, David.

I’ve completed the last tasks.

To answer your question, I will not include a sidebar on this site and will prioritize the mobile version since more than 80% of our visitors are on their phones.

[David]

Ok, so the archive pages are now working with the Load More button.

Any other modifications you want to make to them ?

[Gabriel]

Thank you.

Yes, I have three questions, then I’ll be out of your hair. But I feel it’s best to address each question separately.

The headline’s text appears at the top of the block on the tablet and mobile view. I try adjusting the spacing blocks, but none of them seem to move the headline down. How can I adjust them to appear at the bottom like the desktop view?

[Author]

Posts