Style The WordPress WP-PageNavi Post Navigation Plugin

The WP-PageNavi plugin can be vary useful if the theme WordPress theme you’re using doesn’t have numbered navigation built-in. The default style of the plugin looks nice if your theme is fairly simplistic but for those of you that would like a bit more and love fine details keep reading.

Image may be NSFW.
Clik here to view.

Installing the WordPress WP-PageNavi plugin

First download the WP-PageNavi plugin from http://wordpress.org/extend/plugins/wp-pagenavi/ and upload it to your plugins folder. Or login to your WordPress site and hover or click on “Plugins” than click “Add New”. After the page reloads use the search box to search for “WP-PageNavi”. WP-PageNavi should appear at or near the top. Click install and then activate the plugin.

Configuring the WordPress WP-PageNavi plugin

After installing the WP-PageNavi plugin there are some setting that you can use to suit the needs of your site. From the WordPress dashboard hover over or click on “Settings” then click on “PageNavi”.

First off uncheck the checkbox next to “Use pagenavi-css.css”. This will turn off the default styles and allow you to style the navigation from within your own style sheets.

There are a few other setting I like to change. Fell free to change these setting to suit the needs of the users of your site.
“Text For First Page” to “«”,

“Text For Last Page” to “»”,

“Text For Previous Page” to “« Previous”
“Text For Next Page” to “Next »”
“Number Of Pages To Show” to “5″
“Number Of Larger Page Numbers To Show” to “0″ (I’m not sure why you’d want your navigation like this 1, 2, 3, 4, 5, 10, 20, 30, 40.)

Style the WP-PageNavi with CSS3

Open up your themes/child themes style.css file and paste the following at the bottom.

There are a couple of things that I don’t like, and find a bit confusing about the WP-PAGENavi plugin, but we can hide them with our CSS. First I’d like to get rid of the “Text For Previous …” and “Text For Next …” setting but deleting them in the configuration doesn’t get rid of the html for these “features” it only deletes the text. So the first thing I’m going to do is hide these with css. Feel free to skip this part if you’d like to keep the …’ s in.

.wp-pagenavi .extend{
    display: none;
}

I also don’t like the “Page 1 of 500″ page setting at the begging of the navigation. To be completely honest I’m not sure why a user would really care about how many pages your blog has. I guess maybe if they want to skip to the first page of the site, but I’m not convinced. So I’m going to hide this “feature” also. Again, if you like showing users how many pages your blog has feel free to skip this part.

.wp-pagenavi .pages{
    display: none;
}

Next let’s add some rounded corners, a nice gradient, and a text shadow to the navigation links with CSS3 and make them look like buttons.

.wp-pagenavi a, .wp-pagenavi a:link, .wp-pagenavi a:visited, .wp-pagenavi span.current{
    border: 1px solid #CCC;
    color: #666;
    -moz-border-radius:2px;
    -webkit-border-radius:2px;
    border-radius:2px;
    -moz-box-shadow: inset 0 0 1px #fff;
    -ms-box-shadow: inset 0 0 1px #fff;
    -webkit-box-shadow: inset 0 0 1px #fff;
    box-shadow: inset 0 0 1px white;
    background: #FAFAFA; /* For IE and older browsers */
    background-image: -moz-linear-gradient(top,#FAFAFA 0,#d5d4d4 100%);
    background-image: -ms-linear-gradient(top,#FAFAFA 0,#d5d4d4 100%);
    background-image: -o-linear-gradient(top,#FAFAFA 0,#d5d4d4 100%);
    background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0,#FAFAFA),color-stop(100%,#d5d4d4));
    background-image: -webkit-linear-gradient(top,#FAFAFA 0,#d5d4d4 100%);
    background-image: linear-gradient(to bottom,#FAFAFA 0,#d5d4d4 100%);
    display: inline-block;
    line-height: 2.48em;
    height: 2.4em;
    text-decoration: none;
    margin: 0 .3em 12px;
    padding: 0 .85em;
    font-size: 12px;
    text-shadow: 0 1px 0 #fff;
}

You’ll also notice that I’m styling the .wp-pagenavi span.current class or current page at the same time as the a tags. This is because I want it be the same height and width and have the same rounded corners as the links. I’ll add a different gradient and box-shadow to the current page next.

.wp-pagenavi span.current{
    background: #d5d4d4; /* For IE and older browsers */
    background-image: -moz-linear-gradient(top,#d5d4d4 0,#FAFAFA 100%);
    background-image: -ms-linear-gradient(top,#d5d4d4 0,#FAFAFA 100%);
    background-image: -o-linear-gradient(top,#d5d4d4 0,#FAFAFA 100%);
    background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0,#d5d4d4),color-stop(100%,#FAFAFA));
    background-image: -webkit-linear-gradient(top,#d5d4d4 0,#FAFAFA 100%);
    background-image: linear-gradient(to bottom,#d5d4d4 0,#FAFAFA 100%);
    border: 1px solid #999;
    moz-box-shadow: inset 0 0 10px rgba(0,0,0,.35);
    -ms-box-shadow: inset 0 0 10px rgba(0,0,0,.35);
    -webkit-box-shadow: inset 0 0 10px rgba(0,0,0,.35);
}

The last thing I’ll do is add a nice and subtle hover state to all the links in the navigation by changing the border color and adding a drop shadow.

.wp-pagenavi a:hover{
    border: 1px solid #aeacac !important;
    -moz-box-shadow: 0 0 3px rgba(0,0,0,.25);
    -ms-box-shadow: 0 0 3px rgba(0,0,0,.25);
    -webkit-box-shadow: 0 0 3px rgba(0,0,0,.25);
    box-shadow: 0 0 3px rgba(0,0,0,.25);
}

The Finished Product

Here’s a live example of the styled WP-PageNavi plugin.

There you go, a nicely styled wordpress post navigation. If you’d like to see a responsive wordpress post navigation leave a comment below.

Using WP-PageNavi on Archives and Multipart Pages

If you’d like to use this plugin on archives and multipart pages there are additional steps that need to be taken with-in your theme. The WP-PageNavi plugin page on wordpress.com goes into further detail. http://wordpress.org/extend/plugins/wp-pagenavi/installation/

If you have any questions, please leave them in the comments below.