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.

IPVanish VPN Exclusive Offer - only $3.25/month:
VPN Guides
Windows, Android, Ubuntu
Kodi OpenVPN
OSMC on RPi
♦ Hide your browsing (no logs), Anonymize Streaming and Downloads
♦ Circumvent Geo/Country Restrictions and access worldwide content
♦ Works on Windows, Mac, Linux, Android, iOS, Router, and more
♦ Money back guarantee - Sign Up Now

Related Articles