WCPay 1.0 Launch

WP-PageNavi Integration

Written by Magnus Jepson on December 10, 2008 Blog.

This tutorial was written by one our awesome forum ninjas – Jordan Hatch.

One common request on our WooThemes Forums is how to integrate the popular WP-PageNavi plugin with one of our themes. Using this quick and simple tutorial, it is really easy.

Installing the Plugin

The first thing you need to do is to grab the latest copy of the plugin from the WordPress.org Plugin Directory , and install it on your site. You can configure how the pages are displayed by going to the ‘Settings’ -> ‘WP-PageNavi’ section of your WordPress Admin Panel, although for this tutorial the defaults should work fine.

For this tutorial, we will be adding the plugin to the category and archive pages. The actual file editing will vary between themes, but the editing will need to be done to the following files, if they exist, inside your theme folder:

  • archive.php
  • tag.php
  • search.php

You will need to find the following code in the files:

  • brush:php

and replace it with:

  • brush:php

Note: If you have trouble finding the code, you should try to find the block of code where the ‘next_posts_link’ is in your file. It should be very similar to the code above.

Save and upload the files to your blog, you will find pagination automatically generated depending on how many posts you have on your site. If you like the links how they currently appear, then you’re done, but if you’d like to style them a bit, read on!

Styling the Links

The WP-PageNavi plugin comes with the ability to style the navigation links to your liking. The default blue colour, for example, may not suit some designs. Now we are going to look at how we can create custom styles for our links.

First, you will need to create a file named ‘pagenavi-css.css’ in your theme folder. The plugin will automatically look for this, and will load it instead of the default if it is present.

For this example, we are going to style the links brown. First, lets copy the default CSS code from WP-PageNavi into our custom CSS file.

wp-pagenavi a, .wp-pagenavi a:link {
padding: 2px 4px 2px 4px;
margin: 2px;
text-decoration: none;
border: 1px solid #0066cc;
color: #0066cc;
background-color: #FFFFFF;
}
.wp-pagenavi a:visited {
padding: 2px 4px 2px 4px;
margin: 2px;
text-decoration: none;
border: 1px solid #0066cc;
color: #0066cc;
background-color: #FFFFFF;
}
.wp-pagenavi a:hover {
border: 1px solid #000000;
color: #000000;
background-color: #FFFFFF;
}
.wp-pagenavi a:active {
padding: 2px 4px 2px 4px;
margin: 2px;
text-decoration: none;
border: 1px solid #0066cc;
color: #0066cc;
background-color: #FFFFFF;
}
.wp-pagenavi span.pages {
padding: 2px 4px 2px 4px;
margin: 2px 2px 2px 2px;
color: #000000;
border: 1px solid #000000;
background-color: #FFFFFF;
}
.wp-pagenavi span.current {
padding: 2px 4px 2px 4px;
margin: 2px;
font-weight: bold;
border: 1px solid #000000;
color: #000000;
background-color: #FFFFFF;
}
.wp-pagenavi span.extend {
padding: 2px 4px 2px 4px;
margin: 2px;
border: 1px solid #000000;
color: #000000;
background-color: #FFFFFF;
}

Don’t let the amount of CSS we’re pasting into the file seem daunting – if you’re good with CSS then you’ll find this a breeze. However, if you don’t know CSS much, it’s not a problem. We’re going to change the border colour of the links, and I’ll show you what you need to change to do that.

First, let’s have a quick look at what each class means:

  • .wp-pagenavi a, .wp-pagenavi a:link: This is the class for what the user sees when the item is not selected – so it’s the default state.
  • .wp-pagenavi a:visited This is the class for what the user sees when the page has already been visited, but when the user is on a different page.
  • .wp-pagenavi a:hover This is the class for what the user sees when they hover over an item.
  • .wp-pagenavi span.pages This is the class for the box which contains the text “Page 1 of X”.
  • .wp-pagenavi span.current This is the class for the box which contains the current page. There is no link here.
  • .wp-pagenavi span.extend This is the class used for the box found on the far right with ‘…’ (only shown when there is a lot of pages)

The colour we are going to change the border to is ‘#993300’. (If you’d like to use a different colour, head on over to this colour wheel which will pick out the code for you.)

This is the line which we will need to change – the CSS ‘border:’ attribute.

border: 1px solid #0066cc;

The current colour is ‘#0066cc’, but we want to change that to our colour – ‘#993300’. It’s as simple as replacing one with the other. So, it should look like this:

border: 1px solid #993300;

Replace all three occurrances with our updated border code and upload to your server. You should now find your pagination borders brown. You can experiment with this to use background colours and hover states, it’s all up to you!

cta-banner-10-product-page-v2_2x

8 Responses

  1. Max Weir
    December 10, 2008 at 2:45 pm #

    Awesome tut! This is very useful indeed.

  2. cyril foinet
    December 13, 2008 at 12:35 am #

    thanks guys ! I think it will be useful

  3. Jacob
    December 14, 2008 at 3:38 pm #

    I’m having some problems getting the navi to actually work. When you click on a number at the bottom it just keeps loading the 1st page.

  4. Adii Rockstar
    December 16, 2008 at 11:16 am #

    @Jacob – Which theme are you using? If you post the details in our support forum, we can help you out.

  5. Jhay
    December 17, 2008 at 9:34 am #

    Thanks for the detailed tut! It works! The plugin was installed 3 months ago and thought that nothing happens.. lol. Thanks!

  6. cynthia pasquella
    January 19, 2009 at 7:01 pm #

    Same thing happens to me Jacob. I’m using Flash News. Anyone have any ideas? The same thing happens when I just try to use the Previous and Next functions as well. It always loads the first page.

  7. cynthia pasquella
    January 19, 2009 at 7:39 pm #

    nevermind… found another solution… thanks!

Trackbacks/Pingbacks

  1. WP-PostRatings Integration | Bloggerstools.com

WooCommerce - the most customizable eCommerce platform for building your online business.

  • 30 day money back guarantee
  • Support teams across the world
  • Safe & Secure online payment
%d bloggers like this: