Home » Technology » Add and style post pagination in Genesis Themes without a plugin

Add and style post pagination in Genesis Themes without a plugin

written by Anand July 13, 2012

This post describes how to add post pagination in Genesis Theme Framework without a plugin and style it using CSS. Most bloggers know that splitting posts into pages is one way of increasing pageviews, decreasing bounce rate, and increasing CTR. StudioPress's Genesis Theme Framework offers some of the professionally designed WordPress themes and templates. Impressed with its features and customizability, we moved htpcBeginner to Genesis Theme Framework in June 2012. Since moving to Genesis, our traffic has continually increased. Of course, we made other improvements as well but premium paid themes do have several benefits that will help your site in the long run. While most Genesis theme customizations are fairly easy, some require a bit of work. One such task is adding post pagination. If you prefer to add post pagination using a plugin instead, check this post.

You may also like to read:

Paginating Posts

Genesis Theme Framework supports post page numbers by default. You do not have to mess with any codes. All you have to do is add <!--nextpage--> at the point where you want to split your post. See the example below:

First page contents

<!--nextpage-->

Second page contents

<!--nextpage-->

Third page contents

Really, adding post pagination is that easy.

Styling Post Page Numbers

Now comes the difficult part. Regular WordPress themes have plugins such as WP-PageNavi and WP-PageNavi Style that work out of the box. These plugins do not work in Genesis Theme Framework out-of-the-box. Don't worry. You do not need them and it is extremely easy to style your post page numbers. A post with multiple pages by default looks like this in a Genesis Child Theme:

Post Pagination in Genesis Themes without a Plugin

Post Pagination Before

As you can see, it is plain without any styling. To style it, edit style.css file in your theme folder (usually /wp-content/themes/ThemeName). Post pagination is styled using the class pages. Add the following styles for the class pages:

/*The section below styles the whole post page numbers area*/
.pages
{
font-size:12px;
display:block;
clear:both;
padding: 3px 0 5px 5px;
}

/*The section below styles the post page number links and visited links*/
.pages a,
.pages a:link,
.pages a:visited,
.pages a:active {
    padding: 4px 8px !important;
    margin: 3px !important;
    text-decoration: none !important;
    border: 1px solid #C8C8C2 !important;
    background: #FCFCFC !important;
    box-shadow: 0 0 3px rgba(0, 0, 0, 0.1) !important;
    color: #0088B3 !important;
}

/*The section below styles the post pagination link while hovering mouse over over it*/
.pages a:hover {
    border: 1px solid #a7a7a3 !important;
    color: #fff !important;
    background: #0088B3 !important;
}

For Genesis 2.0.2 (HTML5) replace .pages with .entry-pagination.pagination (see comment).

It helps greatly if you already know a little bit of CSS. The names are self explanatory. Colors are specified in hexadecimal codes. Borders, padding, and margin are specified in pixels (px). You can use this site as good reference and play with various settings.

Recommended Guides:

The above code styled my post page numbers as shown below:

Post Pagination in Genesis Themes without a Plugin

Post Pagination After

Manually Adding Post Pagination to Your Theme

By default the post page numbers are shown below the post on the left side. Manually adding pagination function to your theme provides you more control over how and where the post page numbers are displayed. This requires a bit of knowledge on WordPress theme structure and PHP. First you will have to remove the default post pagination that is displayed after content to the left side. To do that, add the following code to the functions.php file in the child theme folder.

//Remove Default Post Pagination
remove_action( 'genesis_post_content', 'genesis_do_post_content_nav' );

Then, you can display post pagination in the location of your choice by including the following PHP code:

Genesis Post Pagination - Numbers

Genesis Post Pagination – Numbers (Click here for a text version)

Instead of numbers, if you would like to display “Next Page” and “Previous Page” as shown in the picture below:

Genesis Post Pagination - Text

Genesis Post Pagination – Text

Then, use the following PHP code, instead of the one above:

Genesis Post Pagination - Next Previous

Genesis Post Pagination – Next Previous (Click here for a text version)

One way of adding pagination to your theme is by editing the post.php in Genesis Parent Theme (themes/genesis/lib/structure), at the location of your choice. This requires some PHP knowledge to control the appearance location and to not break your theme. An example is shown in my other post, which also shows how to insert custom affiliate banner or content between post content and post pagination. Keep in mind that any changes made to the parent theme files will be lost during Genesis update. Therefore, this is not the recommended way of adding post pagination.

Recommended Guides:

The second and the recommended method is using Genesis Theme filters and hooks. You could use one of the several built-in hooks. To add post page numbers before post content, open the functions.php file located in your child theme folder and add the following PHP code:

Genesis Pagination Function

Genesis Pagination Function (Click here for a text version)

You may change the location of the page numbers by changing genesis_before_post_content hook. Save and exit. You should now see the page numbers on your post.

If you think this is complicated, try post page numbers with a plugin instead. Hope this helps! Go ahead and add post pagination to your site to increase pageviews.

Related Articles

24 comments

Andrea July 15, 2012 - 2:09 pm

I was going to pay some to do this. Fortunately I found this post. Worked great. Now all that is left is customize the CSS style. My page numbers appear after the post on the left side. I notice that in some of your other multi-page posts you make your page numbers appear in a different location than the default one. How can I do that?

Reply
Anand July 19, 2012 - 2:26 pm

Andrea, in order to customize the location of the page numbers, you have to edit this file /wp-themes/genesis/lib/structure/post.php. Move the wp_link_pages( ) function to the location you want and save the file. Thats it. You can have your page numbers at the top and bottom of the post like in my blog. You will need to little bit of coding to know what you are doing, else you might break your page. Keep in mind that you are edit genesis theme framework not the child theme. So when Genesis updates their framework your changes will be lost. I always keep a backup of all the files I edit.

Hope this helps. Good luck.

Reply
Hitesh Bhasin October 15, 2014 - 1:20 am

Hii. I tried moving the wp_link_pages upwards but i couldnt bring it just after post content. There is the Digg Digg plugin showing, then authorbox, then related posts and then page navigation. I am really confused how to do this. Can you have a look please?

Reply
Madeline September 16, 2012 - 12:59 pm

Thanks for your post. That was a wealth of information. I do have a question though – hopefully you can help. I am using Genesis Child Agency Theme and I cannot get the page numbers to show up for my product. Right now, it shows up with Page 1 2 but nothing shows up on page 2. It’s not ideal for me to list out the product ID’s that i want per page bc its always changing. Is there a way to make it so that it automatically show the first 16 items on the first page and the next 16 items on the 2nd page and so on.

This is the code I am currently using to show the first 16 items of the first page:
[product_category category=”Specialty Foods” per_page=”16″ columns=”4″ orderby=”date” order=”desc”]

I need to somehow tell it that after the first next page it should show items 17-36.

Thanks for your help in advance.

Reply
Arafat Hossain Piyada February 1, 2013 - 5:36 am

Is there is anyway to input something for example a banner between post pagination and post content in Genesis?

Reply
Anand February 11, 2013 - 1:58 pm Reply
Arafat Hossain Piyada February 11, 2013 - 8:58 pm

Thanks for your help. However, I did it by inputting the code in separate file and then calling the PHP file. Another thing is, if I use the method you mentioned the draw back is ad will appear in pages. It may be OK but putting separate ads on a Google powered search engine with Adsense support isn’t good idea. So I added an if statement to fix this issue. Though I did it before you publish the article but I appreciate your help and your article will surely help other who want it.

Reply
Anand February 12, 2013 - 9:30 am

I was travelling and hence couldn’t reply sooner. I am glad you already figured it out. Actually, I also call a PHP file as well that displays banners dynamically based on post category. It also checks if the page being displayed is a single post. For this post, I wanted to simplify things. I think I will edit the post to add at least the post/page checking part.

I did not understand what you mean by this: “It may be OK but putting separate ads on a Google powered search engine with Adsense support isn’t good idea. So I added an if statement to fix this issue. ”

Could you please explain? Thanks.

Reply
Michael July 8, 2013 - 7:23 pm

Hi Anand,

I was referred here by Genesis tech support when I asked what their preferred method for customizing pagination was. Did you know they think that highly of you? Impressive I think.

On topic, I could not find post.php but did see ‘single.php’ under the headings Genesis: Single Post. However, when I pasted, saved,

” . __( ‘Pages:’, ‘genesis’ ), ‘after’ => ” ) );
?>

and then refreshed a separate window (I had prepared with pagination for review during this process).. it resulted in error and I had to remove the code, and save again, to straighten this out.

Do you see where I’m going wrong? Thank you very much. Great site.

Reply
Anand July 11, 2013 - 8:49 am

Hi Michael, thanks for the kind words and good to know that StudioPress referred you here. About your issue, are you sure you are looking for post.php in the right location? It is typically found here /wp-content/themes/genesis/lib/structure/post.php.

You do not have to edit the single.php.

Although the PHP code you pasted in your comment is incomplete, I am assuming that you used the full code as shown in the post. One of the most common errors is not opening closing the PHP tags properly. That you need a bit of PHP/HTML knowledge.

I recommend that you also read this post post, which is on a very similar topic: https://www.smarthomebeginner.com/genesis-theme-customization-banner-between-post-content-and-pagination/ (it shows an example that could help you).

Let me know if you need further help.

Reply
King October 20, 2013 - 3:19 am

How can I change the numbers to Next and Previous page

Reply
Anand October 20, 2013 - 10:59 am

You request delivered. I updated the post to show how to do this.

Reply
King October 20, 2013 - 11:06 am

Hi Anand,

Thanks for the solution. I was actually looking to add some codes in to functions.php file so that it takes the effect globally in the theme.

King

Reply
King October 20, 2013 - 11:15 am

With the function.php code it shows the numbers at the bottom of the content and Next Previous on top of the content. I want to replace the bottom default page numbers with Next and Previous.
Thanks!

Reply
Anand October 20, 2013 - 11:15 am

Yes, I realized that was the better way of doing it. So I modified the post. Glad to help.

Anand October 20, 2013 - 11:27 am

Updated the post (Page 2) to remove default page numbers from the bottom of the post.

If you want your custom page numbers at the bottom. Change the hook reference to genesis_after_post_content. Hope this is what you want.

Johan van de Merwe February 21, 2014 - 4:44 pm

Works great. I had to change only one minor thing, while I am working with a Genesis Theme 2.0.2 with HTML5. That was that “.pages” should be replaced with “.entry-pagination.pagination”, but my compliments, it looks great. Thank you.

Reply
Grant May 13, 2014 - 7:49 pm

I tried this and it doesn’t work for me…

As I use Genesis it supports pagination in my posts, but when I apply the CSS code it does nothing.

Reply
Anand May 14, 2014 - 9:27 am

Have you tried what Johan suggested above?

https://www.smarthomebeginner.com/add-and-style-post-pagination-in-genesis-themes/#comment-2342

As you can see, my page numbers on posts are still formatted this way and it seems to be working for me.

Reply
Grant May 14, 2014 - 4:41 pm

Anand,

Thank you for the quick response. I have uploaded the CSS with the suggestions made by Johan but it did not work.

The website post can be found here: http://www.theconversative.com/investigative-series/chapter-two-ethnic-minority-values/

I added the CSS code right at the top for your ease of search.

Reply
Grant May 14, 2014 - 4:44 pm

I made a completely rookie mistake… I had misspelled one of the terms and obviously it didn’t work. I have just corrected it and it works perfectly.

Thank you very much for your assistance 🙂

Reply
Anand May 15, 2014 - 9:57 am

It happens. Glad this Genesis post pagination guide worked for you.

Tomas Risberg August 6, 2014 - 5:20 pm

Thank you so much for all your initiated writing on Genesis pagination!

I have modified the code above to html5. I have three questions:

1) If I have more than a certain amount of pages they will have to be in rows on small screens. With this code the next row will climb on the former, which in my opinion doesn’t look good. How can we modify the code not to?

2) Using the latest version of Firefox (31.0) the one pixel border will disappear on top. How can we rewrite the code to compensate for this behavior?

3) How can I center the rows with numbers on the page.?

At my experimental site you can see what I’m talking about:

http://exp.silent.se/character

Reply
razvan January 25, 2015 - 9:43 am

how do I make the pagination responsive? I want to have only previous and next buttons when viewing from a mobile and numbers when I’m on a larger screen. How do I do that?

Reply

Leave a Comment