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.

Styled WordPress WP Page Navigation Plugin

Styled WordPress WP Page Navigation Plugin

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.

Page 4 of 10«23456»

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.

12 Comments

  1. Posted October 31, 2012 at 12:31 am | Permalink

    Thanks so much for this tutorial. It was really easy to understand and follow and now my page navi looks really nice. Going to try to customise the colours and stuff now. The code you provided is a great start for personalising the page navi. I am OK at CSS but not a pro. It would have taken me ages to work out how to do this. Thanks a bunch and I wish you much success with your blog :D.

  2. Posted November 1, 2012 at 4:44 pm | Permalink

    Hello, Thanks for the content, The last thing before “The Finished Product”. I did this and my WordPress content had been changed. Is this my fault or did i missed something?

  3. Posted December 2, 2012 at 6:17 pm | Permalink

    thanks for the tutorial , very useful .

  4. Chris
    Posted December 13, 2012 at 5:00 am | Permalink

    I wanted to say that you saved me at LEAST two or three hours, and it looks great. It was very kind of you to share it!

  5. Posted January 25, 2013 at 1:46 am | Permalink

    Thanks for this post.

    Please provide a responsive flavour of this or any responsive css for wp-pagenavi.

  6. Rehman Khan
    Posted January 31, 2013 at 5:25 pm | Permalink

    Thanks dude…..This is awesome…..

  7. Posted February 7, 2013 at 10:06 am | Permalink

    Thank you very much. Saved me alot of my time figuring out how to implement it. And thank you for the wonderful CSS tutorial as well.

  8. Cristina
    Posted February 9, 2013 at 4:58 pm | Permalink

    thank you a lot for the post. i’m currently setting up a website and your post was like a fresh air for me. it’s a very beautiful form you’ve created and may be intergrated in any color style!

  9. Posted June 25, 2013 at 11:30 pm | Permalink

    Very beautiful fantastic and smart page navi.
    Thanks. :)

  10. Posted December 5, 2013 at 5:11 pm | Permalink

    Hi
    First of all, your work is awesome! Thank you very much for sharing
    I would like to align the navigation bar to the center. How should I do that?

    Thanks a lot!

  11. Posted December 17, 2013 at 5:31 am | Permalink

    Oh my gosh, thank you!

    This is exactly what I was looking for!

    It was also super easy to customize using a CSS button generator.

    Thanks again!

    (=^・ェ・^=)

  12. Posted January 16, 2014 at 9:30 am | Permalink

    Thanks so much. this is perfect :))

Post a Comment

Your email is never published nor shared. Required fields are marked *

You may use these HTML tags and attributes <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

*
*