WordPress Pagination Made Easy

Written on Thursday, February 4th, 2010 | Filed under: Wordpress

WordPress is a great platform to work with because of the structure, however, there are limitations to a default WordPress theme.

One of the limiting factors of WordPress by default is that the included pagination for navigation is too simple.

The default WordPress pagination allows for “previous” and “next” hyperlinks only.  As you can imagine, without using the search function, it may take you some time to jump several pages.  Bonus:  If your blog has many articles and posts, the number of pages displayed can show the visitor how much you’ve actually written on a certain subject.

As a web designer focused on user interface and experience, I am not satisfied with the default.  Instead, I want better pagination for the website.  Thanks to WordPress’ the ability to support plugins, this task is made simpler than creating my own PHP functions.

WP-PageNavi plug created by Lester Chan is a plug-in used for easy implementation of page navigation.  Here is a look at the default WP-PageNavi WordPress plug-in for page navigation:

I won’t go into detail, but you can see that this method of page navigation is found across the internet on many websites.

Download WP-PageNavi

Installation and Styling of WP-PageNavi

  1. Download WP-PageNavi or search for it through the WordPress Dashboard Plugins section
  2. Upload the downloaded folder, “pagenavi” into your wp-contents/plugins folder or you can also automatically install from the Dashboard
  3. Now activate the plugin
  4. In order to use it in a theme, you will need to add the following code: 
    <?php if(function_exists('wp_pagenavi')) {wp_pagenavi(); ?>
  5. You can toggle the different settings in WordPress Dashboard found under Admin -> Options -> PageNavi
  6. Make sure to click “Update Options” once your done

To style the page navigation to your liking, the file to edit is pagenavi-css.css found here:

/wp-content/plugins/pagenavi/pagenavi-css.css

Good luck on making your WordPress installaion custom!

Tags: , , ,