How to: Integrate a pagination in your WordPress theme
Posted by Jean-Baptiste Jung on Sep 30, 2008 | 74 commentsWhen 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?
Click here for demo and more info
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
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
@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!
it’s especially great for blogs with a lot of content because the pagination shows this, via the number of pages.
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
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
I’m currently using Digg-pagination plugin and I presume they both works the same, do they? Thanks for showing us the alternative.
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”……
@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.
thanks thats very useful. i tried before with plugin, but this way is better. I will share on my Turkish blog.
@mutena: Glad you enjoyed this hack. You’re welcome to share it on your blog!
Very detailed tutorial! I believe it is going to be of some help here.. Thanks dude
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.
Wonderful piece of code for your blog! Thanks.
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
Thanks for the tip. I never thought of doing this
Very useful tip here, thanks for sharing!
Great little tut, thanks!
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.
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?
@jusuchin85: Did you deactivated the plugin before including it as told in the tutorial? Looks like it has been inclued twice.
@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!
@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!
@Jamie - thanks for the plugin. It is indeed much easier to configure.
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
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?
@Webgirl: Good question, but I don’t know
I’ll take a look if I have some time and get back to you.
I have this problem too.
Thanks for the tutorial- it makes Wordpress look so much better!
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
thanks for the useful code and the useful tutorial…much appreciated..
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.
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?
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?
@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.
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.
Thanks for this, definitely much better to use pagination for SEO to ensure your old posts get some link love.
Thanks for help..
I tried this hack in my web site. Thanks for all..