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.

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

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

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:

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.

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

CLICK HERE TO COMMENT

Got any tech-related questions to ask? Feel free to ask in the comments section or you could also head over to ask.techlector.com for quick and prompt replies.

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

Don't Tell Anyone! Enter Your Email Address To Receive Free Updates!!!

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