How to: Integrate a pagination in your WordPress theme
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" />

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?




92 Comments + Trackbacks
9.30.2008
Defiantly something worth introducing to your blog. One that I’ve found which is quite good (and a touch easier) is WP Page Numbers plugin. The only problem is i don’t think it’s part of the Wordpress plugins repository so i think you need to check for new version..
http://www.jenst.se/2008/03/29/wp-page-numbers is the url if anyone is interested
9.30.2008
Wonderful post. I was looking for these code for like ages and i found it here. Thanks for sharing it with us. It really helped me a lot
9.30.2008
@Jamie: I didn’t knew WP Page Number, I’ll chck it out!
@Alex: Thanks for your kind words! I’m glad you enjoyed this post!
10.1.2008
it’s especially great for blogs with a lot of content because the pagination shows this, via the number of pages.
10.2.2008
It was actually just yesterday that my friend was asking me if I knew all about Word Press.. the answer was no.. and now it´s getting more towards yes. I´ll pass this on to her and hope it helps her out!
Marina
10.2.2008
Awesome thanks these codes i’m sure in the near future will prove to be very helpful!
Thanks for taking the time to put them up there for people like us…
Thanks,
Ryan
10.3.2008
I’m currently using Digg-pagination plugin and I presume they both works the same, do they? Thanks for showing us the alternative.
10.3.2008
If given a choice of embedding or plugin, it’s a no brainer. All themes should have page pagination integrated. Now, anyone knows whether there’s a way to embed the “Notify me of followup comments via email”……
10.3.2008
@Neowster: I’m agree that all theme should have an integrated pagination, and WordPress should provide some core functions to do it. But the principe of plugin is very good too: You can install just what you want/need.
@Blogging for Bloggers: They probably works the same in theory, but in practise, I don’t know.
10.3.2008
thanks thats very useful. i tried before with plugin, but this way is better. I will share on my Turkish blog.
10.3.2008
@mutena: Glad you enjoyed this hack. You’re welcome to share it on your blog!
10.14.2008
Very detailed tutorial! I believe it is going to be of some help here.. Thanks dude
10.15.2008
Adding a pagination to a theme sure does feel like an optimized way of adding an element to it. Not having to have a plug-in installed is a definite plus, and is appreciated by the viewer.
10.17.2008
Wonderful piece of code for your blog! Thanks.
10.28.2008
a simple tutorial , that kind of pagination is suitable for blog with so many posts… it will simplify the blog struckture … but hacking that plugins was risky for newbie
But for web designer I think it is good to create premium complete themes with above hacked plugins pre installed in themes :0
10.30.2008
Thanks for the tip. I never thought of doing this
10.31.2008
Very useful tip here, thanks for sharing!
12.21.2008
Great little tut, thanks!
1.8.2009
I can’t get the ,css file to work. I can see the page navigation, but it doesn’t look good. I added your code to the header and nothing changed. Any suggestions.
1.13.2009
Hey man,
Tried your tutorial, great help!
However, I’m having a problem with the code. This is what I’ve got:
———————————————————————————————–
Fatal error: Cannot redeclare pagenavi_textdomain() (previously declared in /home/jusuchin/public_html/blog/wp-content/themes/fervens-c/fervens-c/wp-pagenavi.php:34) in /home/jusuchin/public_html/blog/wp-content/themes/fervens-c/fervens-c/wp-pagenavi.php on line 35
———————————————————————————————–
It appears after I clicked one of the tags. Can you have a look?
1.13.2009
@jusuchin85: Did you deactivated the plugin before including it as told in the tutorial? Looks like it has been inclued twice.
1.13.2009
@jbj: Which part do you mean, jbj? I didn’t activate the plugin before this. Also, I’ve already inserted the hack by X-OR into the wp-pagenavi.php.
Check out my files here: http://www.filedropper.com/pagenaviissue_1
Sorry to bother you on this old issue… Hope you don’t mind!
Thanks!
1.14.2009
@jusuchin85: That’s really weird, many people did this hack and never had any problem. You should try on a test blog, without any other plugins, and then re-activate plugins one by one. There’s probably a conflict between a plugin and the hack.
Good luck!
1.18.2009
@Jamie – thanks for the plugin. It is indeed much easier to configure.
1.19.2009
It’s a nice plugin yeah, have been using it, but seems it doesnt work if you only want to paginate a specific categories posts
1.31.2009
Thanks for this! It works superb.
I have one problem, tho. I want “Page X of Y” written in Norwegian, so I changed line 188:
[code]$pagenavi_options['pages_text'] = __('Page %CURRENT_PAGE% of %TOTAL_PAGES%','wp-pagenavi');[/code]
to the Norwegian version
[code]$pagenavi_options['pages_text'] = __('Side %CURRENT_PAGE% av %TOTAL_PAGES%','wp-pagenavi');[/code]
But it still is written in English – must I change it somewhere else too?
1.31.2009
@Webgirl: Good question, but I don’t know
I’ll take a look if I have some time and get back to you.
2.4.2009
I have this problem too.
2.11.2009
Thanks for the tutorial- it makes Wordpress look so much better!
2.17.2009
Ohh great. I just read an article on how to create a theme and this would be really useful to use with that. thanks for the great tutorial. Cheers
3.1.2009
thanks for the useful code and the useful tutorial…much appreciated..
3.3.2009
Cool thing!
I just integrated it with flexibilitytheme and hope it works. I’ll test it tomorrow. You’ve got so much good stuff on your blog, i really enjoy reading it.
4.18.2009
I tried this hack. I’ve got the pagination working, but it’s not importing any style. I’ve changed the address in the tag to absolute so I know the path to the CSS file is correct.
Why is it not applying any of the stylesheet CSS to the pagination?
4.18.2009
I just tried putting the contents of the pagenavi-css.css file directly into my themes style.css, it’s still not working. Something in your method doesn’t work any more… any ideas?
5.3.2009
@James Luff, i had the same problem, but adding the pagination styles in the global CSS file, the problem was corrected.
@Webgirl I I want “First and Previous” written in Spanish, so before adding and editing the files, I install the plugin and change the words from the Admin panel, then I uninstall the plugin and I tried this hack, and everything works just fine.
5.15.2009
I have found that if you add:
Then if there is a problem with wp-pagnavi then you have a backup. Also great for people creating a theme so that their users do not need to have the plugin for it to work.
5.22.2009
Thanks for this, definitely much better to use pagination for SEO to ensure your old posts get some link love.
6.14.2009
Thanks for help..
6.30.2009
I tried this hack in my web site. Thanks for all..
7.17.2009
It would be great to reverse the order, I like the older post to the left and new to the right. Is that possible?
8.10.2009
Hi there – thanks for putting this hack reference. I have adapted this on my own theme to fix a nasty issue: Page-Navi renders okay, but clicking on one of the pagination links sends me to my 404 page instead of the next batch of paginated entries.
I see you specify either index.php, categories.php or search.php to include this hack. However, I want it displayed on archive.php since that’s where I am displaying the posts as thumbnails (see: http://www.betobeto.com/sketchbook). Is there something with archive.php that doesn’t allow me to use this as intended? Or may it be a mismatch at the DB level? (hope it’s not!)
I don’t have need to call the pagenavi CSS file since I rather integrated the styles into the main style.css file.
Thanks for any suggestion in advance.
9.1.2009
Hey, thanks for everything, is very useful.
I have one question, i´ve installed WP-PageNavi, and this plugin divide the entries, but i want to put page navigation in the static pages, how can i do it? or there is another way?
Thanks!!!
9.2.2009
man, such a great hack…thanks for sharing
will use this hack in every themes i create from now on
thanks man
9.8.2009
Thanks for this, but I need it displyaing PAge 1 of 1001 in my native language.
Did anyone figure out how to get it translated ?
9.20.2009
Informative, but not convincing. Something is missing, and what do not understand. But I will say frankly: – light and benevolent thoughts.
11.25.2009
Solution to use is it with your own language:
- edit wp-pagenavi.php settings in the php file (last few lines) like pages_text, current_text etc..
- manually delete a row from the wp_options table: option_name is “pagenavi_options”
- refresh your page where you included pagenavi php
Explanation:
Pagenavi_init() populates the options table with you custom strings, but only runs once because the option “pagenavi_options” already exist in the options table. If you delete that row it inserts it again with your new settings.
Of course you can manually change the strings in the wp_options table, but editing a php file is easier because the settings row stored in the database is a serialized string.
Hope it helps.
12.5.2009
This is very helpful while i add pagination plugin for my thesis theme
12.14.2009
Do not regret that I spent a couple of minutes to read your blog. Write often, even inevitably’ll come to read something new.
12.18.2009
HI,
I am using theme Arena Deluxe. I implemented the code the way you explained, but nothing shows. I want to use it for static pages so I used it in page.php. Can you please help? Tks
12.18.2009
I want to use this hack in Arena deluxe theme. I have implemented the code as explained in page.php as I want to use it for static pages. Nothing shows. can you please help? Thanks
1.15.2010
Thank you very much for this hack !
I’m really piss** off by the reflex “Oh I want to do that. Oh, let’s install a plugin !”
I try to be plugin free, and I don’t want my blog to look like a gadget with 457 plugins on it ! Plugins can be something more than plugins: they can be hacks, and most people forget it !
So thank you very much
(K)