How to: Integrate a pagination in your WordPress theme

Posted by jbj on Sep 30, 2008 in wordpress • 31 comments

When creating a premium WordPress theme, it is really better to use a pagination instead of the good old “previous page” and “next page” links. Sure, there’s plugins, but what about embeding a pagination without asking the user to install a plugin? In this tutorial, I’ll show you how to directly integrate the Wp-PageNavi plugin in your WordPress theme.

WP-PageNavi

WP-PageNavi is a WordPress plugin, created by Lester Chan, in order to display a page navigation instead of the "previous" and "next" pages links.

Of course, the first thing to do is to download the plugin. Once you have it on your hard drive, unzip it, then copy and paste the following files to your theme directory:

  • wp-pagenavi.php
  • wp-pagenavi.css

Editing the files

Open the file where you want the pagination to be displayed (index.php, categories.php or search.php).
Find the following code:

<div class="navigation">
	<div class="alignleft"><?php next_posts_link('Previous entries') ?></div>
	<div class="alignright"><?php previous_posts_link('Next entries') ?></div>
</div>

Replace this part by the code below:

<?php
include('wp-pagenavi.php');
if(function_exists('wp_pagenavi')) { wp_pagenavi(); }
?>

If you save the file and refresh the theme page now, nothing will happen. This is just because Wp-PageNavi is a WP plugin and have not been created to be embeded in a theme file.
X-OR found the following hack. Just open the wp-pagenavi.php file and find the following code (Line 61):

function wp_pagenavi($before = '', $after = '') {
        global $wpdb, $wp_query;

We have to call the pagenavi_init() function, so let's do it that way:

function wp_pagenavi($before = '', $after = '') {
	global $wpdb, $wp_query;
        pagenavi_init(); //Calling the pagenavi_init() function

Now, refresh your theme file: The pagination is displayed well, but it don't look that good. We just forgot to import the related CSS file.

Open your header.php file and find the following line:

<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" media="screen" />

Simply add the following code below:

<link rel="stylesheet" href="<?php echo TEMPLATEPATH.'/pagenavi.css';?>" type="text/css" media="screen" />

Embeding a pagination in your WordPress theme

Our pagination is now fully functionnal!

Embeding a pagination in your theme, or using a plugin?

I'm pretty sure than some of you wonders why I'm using this hack instead of simply using a plugin the "normal" way. This is simple: On CatsWhoCode, we use the plugin, because we're good enought in WordPress and web languages to integrate it well. But when I'm designing a WordPress theme (I'm creating two new themes theses days) I think about bloggers who aren't IT professionals. I think about all theses people who'd like to have a pagination embeded in their theme, but don't know how to do, even if installing a plugin is simple, at least for us.

When creating a premium WordPress theme, I tend to think that the designer/developper must do anything for the client to have less to do, so this is why I'm using this hack in the two themes I'm currently creating.

And you, any thoughts about that hack?

31 reactions

» Comments RSS Feed

Leave a comment