Replacing “Next” and “Previous” Page Links with 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.

The first thing to do, obviously, is download the plug-in.
Unzip the plug-in archive on your hard drive, and upload the wp-pagenavi.php and wp-pagenavi.css files to your theme directory.
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>
<div><?php next_posts_link('Previous entries') ?></div>
<div><?php previous_posts_link('Next entries') ?></div>
</div>
```
Replace this part with the code below:

1 <?php

2 include('wp-pagenavi.php');

3 if(function_exists('wp_pagenavi')) { wp_pagenavi(); }

4 ?>
Now we have to hack the plug-in file. To do so, open the wp-pagenavi.php file and find the following line (line #61):

1 function wp_pagenavi($before = '', $after = '') {

2 global $wpdb, $wp_query;

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

1 function wp_pagenavi($before = '', $after = '') {

2 global $wpdb, $wp_query;

3 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.

Source:

How to: Integrate pagination in your WordPress theme

Replacing “Next” and “Previous” Page Links with Pagination

Source:

You may Also Like

Search

@AhmedAG