How to: Integrate a pagination in your WordPress theme

by Jean. 116 Comments -

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" />

Embeding a pagination in your WordPress theme

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?

Comments (116) - Leave yours

  1. Jamie Souef said:

    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 :)

  2. Marina Neuerscheinung said:

    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

  3. Neowster said:

    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”……

  4. jbj said:

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

  5. pligg.com said:

    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…

  6. Armen Shirvanian said:

    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.

  7. pagination in WordPress said:

    [...] на разделяне на страници (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 [...]

  8. BEUWOLF AGATHE said:

    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

  9. David said:

    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.

  10. jusuchin85 said:

    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?

  11. jusuchin85 said:

    @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!

  12. Jean-Baptiste Jung said:

    @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!

  13. Webgirl said:

    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?

  14. Sebastian said:

    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.

  15. James Luff said:

    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?

  16. James Luff said:

    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?

  17. jose leiva said:

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

  18. Kyle King said:

    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.

  19. Beto said:

    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.

  20. Jhonattan said:

    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!!!

  21. Tom said:

    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 ?

  22. jdg said:

    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.

  23. RB said:

    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

  24. Ruchika said:

    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

  25. Chatougri said:

    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)

  26. Taha said:

    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 ?

  27. Taha said:

    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.

  28. WPExplorer said:

    What if you want to Paginate a regular page…lets say I am using a page template and I want to show posts from a certain category but I want these to paginate.

    thanks!

  29. Pippin Williamson said:

    I get an error:

    Fatal error: Call to undefined function pagenavi_init() in C:\Documents and Settings\pippinw\Desktop\xampplite\htdocs\wordpress\wp-content\themes\new child theme\wp-pagenavi.php on line 31

    I can get rid of the error if I replace pagenavi_init(); with _pagenavi_init();, but then nothing shows up.

  30. steve said:

    I don’t get any fatal errors, just a link that says
    function.required

    If i change the php include to an absolute path to the wp-pagenavi.php file, i get two links that say
    function.include instead

    any solution to this?

  31. Kike Gil said:

    Thank you for sharing the knowledge, this fatal error was giving me a hard time and now is gone. Now I can start worrying about something else :)

  32. Coues ludovic said:

    This article talk about a plugin 3 years back. Since then, a rewrite have happen, and everything have move to object. The clean way to apply the hack now would imply thinking, reading the code, understand it, and integrate it the your theme.

    I’ll take the easy way, I’ve download the version 2.40, which is 3 years old. Added pagenavi_init(); at line 63, bingo.

  33. Pierrick said:

    Hello,

    I was wondering whether you know how to hide the wp-page navi if there is only one page, eg. category A has got only one page. Is it at all possible??

    Thanks for your help!
    p

Leave a Reply

Your email address will not be published. Required fields are marked *

Please respect the following rules: No advertising, no spam, no keyword in name field. Thank you!