Codeable info

A Quick Way Of Styling Your Wp Pagenavi Powered Navigation Menu

Posted on by in Blog

One of the most popular plugins available for WordPress is Wp Pagenavi. The plugin lets you change the default â†Â Older posts | Newer posts → links with pagination links e.g. 1, 2, 3,. . . , 10 etc. This functionality can be added to a theme manually however WP Pagenavi is such a great solution and only takes seconds to install that it has been downloaded over 2 million times. All you have to do is replace your navigation code in your template with a call to the function wp_pagenavi().

Wp Pagenavi lets you change the navigation text used such as the previous and next links however styling options are fairly limited. You can change the regular numbering style to a drop down menu and use the included pagenavi-css.css file but if you want to improve the styling beyond that you’ll have to do so via your own stylesheet.

WP Pagenavi Default Design

You’ll be glad to know that a plugin is available that addresses this issue. Wp Pagenavi Style is a fantastic plugin that helps you improve the default style of Wp Pagenavi. It lets you align your navigation to the left, center or right hand side of the page and there are 33 great looking styles to choose from (including many CSS3 styles).

WP PageNavi Style Options

All you have to do is select your style and your page navigation menu will automatically be updated with the new colour scheme. With 33 styles, you are bound to find something that complements your existing design.

WP PageNavi Style Examples

If you like to keep the number of plugins live on your site at a low level, you may want to consider copying the WP Pagenavi Style to your theme stylesheet.

Copying The Style To Your Theme Stylesheet

The great thing about the plugin is that after you have chosen your style, you don’t need it any more, as you can simply copy the styling for your menu to your theme stylesheet template (i.e. style.css).

For example, let’s say you wanted to use the minimalist style ‘Round White’. All you have to do is:

  • Choose the style ‘Round White’ in the WP PageNavi Style Options page and save your settings.
  • Load a page on your website where the page navigation menu is displayed (e.g. your home page or category archives).
  • View the source of your page and look for the link to the WP PageNavi Style stylesheet in the head area. It should look something like this.
    <link rel='stylesheet' id='wp-pagenavi-style-css'  href='http://www.yoursite.com/wp-content/plugins/wp-pagenavi-style/css/round_white.css?ver=1.0' type='text/css' media='all' />
  • Copy the code from the stylesheet that was linked in your page head area (e.g. http://www.yoursite.com/wp-content/plugins/wp-pagenavi-style/css/round_white.css?ver=1.0).
    .wp-pagenavi { padding: 10px 20px 10px; display:block; clear:both;}
    .wp-pagenavi a, .wp-pagenavi a:link { padding: 6px 8px !important; margin: 2px !important; text-decoration: none !important; border:1px solid #e2e5e5 !important; color: #8c9c9c !important; background:url(images/pagination-bg.png) repeat-x !important; font-weight: normal !important; }
    .wp-pagenavi span.pages { padding: 6px 8px !important; margin: 2px !important ; border: none !important; color: #bcc9c9 !important; background: none !important; }
    .wp-pagenavi span.current, .wp-pagenavi span.extend, .wp-pagenavi a:active, .wp-pagenavi a:hover { padding: 6px 8px !important; margin: 2px; font-weight: bold; background:url(images/pagination-bg.png) repeat-x !important; border:1px solid #e2e5e5 !important; color:#8c9c9c !important; }
    .wp-pagenavi a, .wp-pagenavi a:link, .wp-pagenavi span.current, .wp-pagenavi span.extend, .wp-pagenavi a:active { -moz-border-radius: 8px; -webkit-border-radius: 8px; border-radius: 8px; }
    .wp-pagenavi a:hover { color: #000 !important; }
  • Open up your theme stylesheet and add the code you copied from the linked stylesheet.

Alternatively, you can simply look for your favourite style in the CSS folder of the Wp Pagenavi Style plugin (or via your plugin editor) and copy the code directly into your theme stylesheet.

If you are using Wp Pagenavi or planning on doing so, I recommend improving the default style using Wp Pagenavi Style. It really is the quickest and easiest way of making your page navigation look more professional looking.

Good luck,
Kevin

Links: Wp Pagenavi | Wp Pagenavi Style

)
Codeable info

Comments (1)

Comment by baby hazel says:

I use my own style pagenavi

Codeable info