How to Add Pagination to Front Page of News Pro or Magazine Pro Genesis Child Theme

Welcome to TechVaz. As you all know, it’s been a while since we last publish a tutorials. But today I am going to drop a very simple DIYS guide on how to add Pagination to most Genesis child theme Home Page.

Most StudioPress themes include a front page file which normally includes widgets. Pagination is absent in these type of themes. Type of theme we are talking about here is the Magazine Pro Genesis Child Theme, News Pro Genesis Child Theme (which we will be focusing on) and some others.

Most tutorial I have seen online seems not to work for me at all. The only problem is, it may not generate pagination. So I came up with a simple way to get this done without tampering with any .php file in your weblog.

In this tutorial, you don’t need to be web developer or a programmer to get this done. All you need to do is follow the steps properly. I’ll provide the entire code to use which includes all the code tested on the News Pro Genesis Child Theme that we currently run on this website. You can modify the code to fit in with your existing themes if you are good.

Here it is without wasting too much time:

Steps to Add Pagination to Front Page of News Pro or Magazine Pro Genesis Child Theme

• Go to your WordPress dashboard to create a new page.
• Name the new page “next” and change the page attributes to template to “Blog”.

• Before you save make sure that the new page permalink is something like this https://siteURL.com/next depending on the type of permalink you are using on your site, then click on “publish” to save.
• Go to Appearance – Widgets and drag a new Text Box under the Genesis – Features Posts

• If you are using the News Pro Genesis Child Theme then paste this code in the Text Box:

<div class="archive-pagination pagination tech-next"><ul><li class="active"><a href="https://siteURL.com">1</a></li>

<li><a href="https://siteURL.com/next/page/2/">2</a></li>

<li><a href="https://siteURL.com/next/page/3/">3</a></li>

<li class="pagination-omission">…</li>

<li><a href="https://siteURL.com/next/page/35/">35</a></li>

<li class="pagination-next"><a href="https://siteURL.com/next/page/2/">Next Page»</a></li>

</ul></div>

• Change “siteURL” to your domain name and click save.
• Now, go to Genesis – Theme Settings and change the Content Archives to the setting in the image below:

• After this, you will definitely see a pagination in your homepage but won’t be as clean as the one in page 2. Here is when you will need to apply little CSS knowledge.
• Go to Appearance – Editor to add styling to the pagination. Add the style below:

/*

TechVaz HOMEPAGE PAGINATION

---------------------------------------------------------------------------------------------------- */

.news-pro-home .content li::before{

   content - "" !important;

   font-size - 0px !important;

   margin - 0px 3px !important;

}

Screen Shots

Confused? Here’s what the the front page & paginated pages look like after adding the code.

And here’s what the 2nd and subsequent paginated pages look like without the home page widgets.

We ♥ Comments

Do you have anything to add to this article? Please do not hesitate to share it in our comment box below…↓

Join us on Facebook or Twitter now to receive instant notifications as soon as they happen.!!!