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?
My name is Jean-Baptiste Jung and I'm the man behind Cats Who Code. I started to use the Internet back in 1998 and started to create websites three years laters in 2001.
54 Comments
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..
It would be great to reverse the order, I like the older post to the left and new to the right. Is that possible?
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.
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!!!
man, such a great hack…thanks for sharing
will use this hack in every themes i create from now on
thanks man
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 ?
Informative, but not convincing. Something is missing, and what do not understand. But I will say frankly: – light and benevolent thoughts.
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.
This is very helpful while i add pagination plugin for my thesis theme
Do not regret that I spent a couple of minutes to read your blog. Write often, even inevitably’ll come to read something new.
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
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
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)
I have a custom template which uses the function “display_subcategories($id)” located in
/wp-content/plugins/wp-e-commerce/wpsc-includes/category.functions.php
This file is from the wp-e-commerce plugin
I am using this function to display all the subcategories for a categroy.
How do i get the pagination to work here ?
Not sure if i can post code in the comments section there is no note here in the comments form.
If required i can post the code here so that it is easy for people to come up with ideas.
Excellent post! Thanks.
42 Trackbacks
[...] How to: Integrate a pagination in your WordPress theme [...]
[...] Author: jbj Source: http://www.catswhocode.com [...]
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 p…
[...] Integrated pagination [...]
[...] Features: – Widgetized sidebar – Widgetized footer – Custom field to display a thumbnail on homepage – SEO optimized – Easy to customize – Classy design with nice colors – Integrated pagination [...]
[...] Integrated pagination [...]
[...] Integrated pagination [...]
[...] This exemple loop will displays 7 posts per page. This is the code I use on WpRecipes. Did you noticied the paged=’.$page_num parameter? This allows use to display our content by pages and use a paginator. [...]
[...] How to: Integrate a pagination in your WordPress theme [...]
[...] How to Integrate Pagination into your WordPress Theme – Jean-Baptiste Jung has explained how to build PageNavi plugin functionality directly into your WordPress theme. [...]
[...] How to Integrate Pagination into your WordPress Theme – Jean-Baptiste Jung has explained how to build PageNavi plugin functionality directly into your WordPress theme. [...]
[...] на разделÑне на Ñтраници (pagination) във Wordpress тема How to: Integrate a pagination in your WordPress theme Pagination and Duplicate ContentThe thing is that all pages normally have identical titles and meta [...]
[...] How to Integrate Pagination into your WordPress Theme – Jean-Baptiste Jung has explained how to build PageNavi plugin functionality directly into your WordPress theme. [...]
[...] a little more unique to your posts to get people’s attention you can use the examples from Catwhocode.com and Hongkiat.com by creating an image map banner at the bottom of your posts using CSS and PHP. You [...]
[...] How to Integrate Pagination into your WordPress Theme – Jean-Baptiste Jung has explained how to build PageNavi plugin functionality directly into your WordPress theme. [...]
[...] How to: Integrate pagination in your WordPress theme [...]
[...] How to: Integrate pagination in your WordPress theme [...]
[...] How to: Integrate pagination in your WordPress theme [...]
[...] How to: Integrate pagination in your WordPress theme [...]
[...] How to: Integrate pagination in your WordPress theme [...]
[...] How to: Integrate pagination in your WordPress theme [...]
[...] How to: Integrate pagination in your WordPress theme [...]
[...] How to: Integrate pagination in your WordPress theme [...]
[...] How to: Integrate pagination in your WordPress theme [...]
[...] How to: Integrate pagination in your WordPress theme [...]
[...] How to: Integrate pagination in your WordPress theme [...]
[...] How to: Integrate pagination in your WordPress theme [...]
[...] How to: Integrate pagination in your WordPress theme [...]
[...] Source How to: Integrate a pagination in your WordPress theme [...]
[...] http://www.catswhocode.com/blog/how-to-integrate-a-pagination-in-your-wordpress-theme [...]
[...] How to: Integrate a pagination in your WordPress theme [...]
[...] How to: Integrate pagination in your WordPress theme [...]
[...] gente que ya se quebro la cabeza y resolvio problemas que nos podemos encontrar, y por suerte, en Catswhocode publicaron un tutorial de como agregar la funcionalidad de la paginacion sin tener que instalar el [...]
[...] How to: Integrate a pagination in your WordPress theme [...]
[...] siempre soy de la idea de instalar la menor cantidad de plugins posibles y cuando encontré este truco en Cats Who Code me fascinó, ya que permite integrar paginación en tu theme sin instalar propiamente el [...]
[...] In: Wordpress plugins 19 Jul 2009 Go to Source [...]
[...] How to: Integrate pagination in your WordPress theme [...]
[...] 10. How to Integrate Pagination in Your WordPress Theme [...]
[...] 10. How to Integrate Pagination in Your WordPress Theme [...]
[...] 8. How to Integrate Pagination in Your WordPress Theme [...]
[...] How to: Integrate pagination in your WordPress theme [...]
[...] to learn how to set it up in your theme automatically. Cats Who Code has a pretty good tutorial on how to add pagination into your theme without needing to activate a [...]