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

Welcome to TechLector. 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.

newspro

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.

DONT MISS THIS==>  How to Convert Slow Motion Video to Normal Video on iPhone/iPad

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.

DONT MISS THIS==>  How To Transfer Money To Anyone From Your Phone With GTBank

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”.

New page

  • Before you save make sure that the new page permalink is something like this http://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
DONT MISS THIS==>  Glo Configuration Settings For All BB10 Devices (Q10, Q5, Z3, Z10, Z30)

widget

  • 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="http://siteURL.com">1</a></li>

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

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

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

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

<li class="pagination-next"><a href="http://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:
DONT MISS THIS==>  How to Root Infinix Zero 2 in One Click

genesis setting

  • 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:
/*

TECHLECTOR 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.

DONT MISS THIS==>  How To Receive Payments With Your US or UK Adsense In Nigeria [SOLVED]

Home page

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

second page

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.!!!

Never Miss An Update; Like Our Facebook Page Or Follow Us On Twitter. You Can As Well Subscribe To Our YouTube Channel To Get 1st Hand Information.

Subscribe Now With Your Email To Receive Free Updates!!!

SHARE
Samuel Afolabi is a tech savvy that loves writing almost all tech related kinds of stuff. He is the Editor-in-Chief of TechLector. You can connect with him via the social buttons below :)

2 COMMENTS

  1. This was very helpful, thank you!

    I didn’t want to mess around with the style.css file so I modified the widget content to only include the last item on the list, and changed the text to “Older blog posts this way” (which I may change again later on, but it’ll work for now).

    That means that the link takes you to a list including the post you have already seen, but it looks fine and more importantly it helps readers go deeper into the blog.

    style.css
    Select theme to edit: Select

LEAVE A REPLY

Please enter your comment!
Please enter your name here