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.


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:

How You Can Duet On TikTok

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

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

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:


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

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

Polaris Bank Money Transfer Code: Transfer Money Easily

Home page

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


  1. Hey great tutorial Samuel. Very simple and on spot. Just one observation which is…my home page had 12 posts on it and by putting ‘5’ in the number of post box as shown above in the image won’t bring right post on the next page when clicked. So I changed it to 12 and it was flawless.

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

    Select theme to edit: Select


Please enter your comment!
Please enter your name here