Pagination not showing up for blog archive

[dstro003]

I am having trouble showing adding the pagination to my blog archive.

My blog archive is on this page here: https://soundshockaudio.com/blog/

any help getting the pagination set up would be appreciated.

Thanks

[tristup]

Hi @dstro003,

Thanks for reaching out.
The reason behind the problem is the looper and the post pagination elements are not connected. The post pagination element work with the default WordPress query and predefined templates only. I would like to request you go through the following thread on a similar topic.

Using Post Pagination With a Looper Consumer

@stevenburles and @armandogomez, pagination of content is certainly possible with the Archive Layout Builder, and if you’re just getting started I would recommend working through those videos provided by @tristup in addition to this main article on Loopers in our Docs: As well as some other helpful quickstart videos we’ve provided on the Single and Archive Layout Builders: [Layout Builder: Single Templates] [Layout Builder: Archive Templates] The primary thing to wa…

Thanks

[dstro003]

thanks for the reply, but I am still lost here.

Can you please just set this up for me.

I have recorded a video to show what issues I am having.

[ruenel]

Hey @dstro003,

This “Blog” page you have here, https://soundshockaudio.com/blog/, is just a normal page. This is NOT a Blog Index or an archive. This is why the Pagination is not displaying. You are running a Looper Provider Query Builder and Looper Consumer on this normal page. As we have mentioned, the Pagination element works only with the Archive pages which are using the default WordPress Loop.

Please check out this codex first (see #2):

• Create a static front page – WordPress.org Documentation

Best Regards.

[dstro003]

Okay I changed the static page to the blog page and the blog archive is now editable.

I added the post grid and pagination, but the pagination still doesn’t work.

I set the looper provider to query builder and only showed post category “blog” I am not sure if this had an effect on anything.

The grid is off to the right and the pagination

Also, I can’t figure out how to make the grid to go in the center of the page like I have for the search results page. https://soundshockaudio.com/?s=hip+hop+sample+pack

[ruenel]

Hello @dstro003,

The Pagination did not show up because in your custom “Blog” archive layout you have added a Looper Provider. Just a reminder that archive layouts should NOT have a Looper Provider. You only need to use Looper Consumer. Please edit your custom “Blog” archive layout and disable the Looper Provide so that the Pagination will show up.

Best Regards.

[dstro003]

Okay removing looper provider and adding looper consumer worked, but there are still 2 issues.

Blog - SoundShock

• How do I show only posts with category “blog”
• The layout is messed up. I have layout set to 3 columns but only one shows
  

[ruenel]

Hello @dstro003,

1.) To display only the post items under the “Blog” category, please check out this article instead:

• https://wpmudev.com/blog/one-category-wordpress-homepage/

2.) Yes, because you are still running another Looper provider. You should make your column the Looper Consumer instead. Check out the demo section I created for you.

• See the secure note below.

Best Regards.

[dstro003]

Thank you for letting me know what was wrong with the displaying of posts.

I have one final issue for this blog page.

For some reason, only the desktop menu layout doesn’t center the grid.

I don’t have any extra left or right margins or padding on the section, column, or row.

What can I do to make the section centerd for the desktop view?

[ruenel]

Hello @dstro003,m

The Blog index is not centered because somewhere in the settings, you have added this custom CSS:

@media only screen and (min-width: 992px) {
				#x-site .x-container{
					align-items: center;
					display: flex;
					justify-content: flex-end;
					left: 7%;
					position: relative;
					}	
}

You will have to find it and remove the left: 7%; line.

Best Regards.