Mar
17

Replacing Next and Previous Page Links with Pagination

pagination

The problem. By default, WordPress has functions to display links to previous and next pages. This is better than nothing, but I don’t understand why the folks at WordPress don’t build a paginator by default. Sure, there are plug-ins to create pagination, but what about inserting it directly in your theme?

The solution. To achieve this hack, we’ll use the WP-PageNavi plug-in and insert it directly in our theme.

  1. The first thing to do, obviously, is download the plug-in.
  2. Unzip the plug-in archive on your hard drive, and upload the wp-pagenavi.php and wp-pagenavi.css files to your theme directory.
  3. Open the file that you want the pagination to be displayed in (e.g. index.php, categories.php, search.php, etc.), and 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 with the code below:

<?php
include('wp-pagenavi.php');
if(function_exists('wp_pagenavi')) { wp_pagenavi(); }
?>
<pre>
 
Now we have to hack the plug-in file. To do so, open the <em>wp-pagenavi.php</em> file and find the following line (line #61):
 
<pre lang="php">function wp_pagenavi($before = '', $after = '') {
        global $wpdb, $wp_query;

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

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

We’re almost done. The last thing to do is to add the wp-pagenavi style sheet to your blog. To do so, open up header.php and add the following line:

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

Code explanation. This hack mostly consists of simply including the plug-in file directly in the theme file. We also had to add a call to the pagenavi_init() function to make sure the pagination would be properly displayed.





Related posts


Want automatic updates? Subscribe to our RSS feed or
Get Email Updates sent directly to your inbox!
  • http://stylozero.com Gianfranco

    I am wondering what are the pros to insert the plugin into the tmplate instead of just installing it and letting it do its job.

    Also, shouldn’t <link rel=”stylesheet” href=”" type=”text/css” media=”screen” /> be
    <link rel=”stylesheet” href=”/pagenavi.css” type=”text/css” media=”screen” />?

  • http://www.goboxy.com Go Boxy

    installing the pluging and letting it do the job is the a good idea, but some folks prefer to have more controle, and to costimize thier pagination just as it swet thier themes.
    for the link, i see nothing wrong.