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?

  • http://jamielesouef.com Jamie Souef

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

  • http://1healthywomenn.net/womens-health-advice-discover-anti-aging-vitamins/ Alex

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

  • http://www.lyxia.org jbj

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

  • http://haiku-poems-blog.blogspot.com/ kouji

    it’s especially great for blogs with a lot of content because the pagination shows this, via the number of pages. :)

  • http://news.hitmeister.de/ Marina Neuerscheinung

    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

  • http://www.rbmrecordingstudios.com Ryan @ Recording Studio Los Angeles Recording Studios LA

    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

  • http://bloggingtips.my Blogging for Bloggers

    I’m currently using Digg-pagination plugin and I presume they both works the same, do they? Thanks for showing us the alternative.

  • http://www.neowster.com Neowster

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

  • Pingback: Customize your WordPress Theme | Neowster

  • http://www.lyxia.org jbj

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

  • Pingback: WordPress: Integrate a pagination in your theme | bloground.ro - Blogging resources, WordPress themes and plugins for your development

  • http://www.mutena.com/ mutena

    thanks thats very useful. i tried before with plugin, but this way is better. I will share on my Turkish blog.

  • http://www.lyxia.org jbj

    @mutena: Glad you enjoyed this hack. You’re welcome to share it on your blog!

  • Pingback: pligg.com

  • Pingback: New Free WordPress Theme from Cats Who Code

  • Pingback: New Free WordPress Theme from Cats Who Code | bloground.ro - Blogging resources, WordPress themes and plugins for your development

  • Pingback: New Free WordPress Theme from Cats Who Code | Wordpress Blog Services

  • Pingback: Free WordPress Theme Courtesy of Cats Who Code | Radyoplay IP-TV Technologie

  • Pingback: How to define how many post to display per page

  • Pingback: $ The use of pagenavi plugin $ - blogging and scraping

  • http://www.peiprofit.com Make Money Blogging

    Very detailed tutorial! I believe it is going to be of some help here.. Thanks dude

  • http://www.timelessinformation.com Armen Shirvanian

    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.

  • http://thisismyurl.com Christopher Ross

    Wonderful piece of code for your blog! Thanks.

  • Pingback: WordPress News & Notes - October 23, 2008 | WordPress Hacks

  • Pingback: WordPress News &amp; Notes - October 23, 2008 | Wordpress Blog Services

  • Pingback: pagination in WordPress

  • Pingback: WordPress News & Notes - October 23, 2008 | Radyoplay IP-TV Technologie

  • http://itsoke.com BEUWOLF AGATHE

    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

  • http://geekary.com Darryl

    Thanks for the tip. I never thought of doing this :)

  • http://www.squidoo.com/warning-spyware-detected-on-your-computer Bob

    Very useful tip here, thanks for sharing!

  • Pingback: DivageekDesigns.com » Blog Archive » How to Add Social Networking Icons to your Blog

  • Pingback: WordPress News | Blog n' Ads

  • http://www.bluntedpresents.co.uk Ross

    Great little tut, thanks!

  • Pingback: 10 Killer WordPress Hacks | How-To | Smashing Magazine

  • Pingback: Wordpress Blog Services - 10 Killer WordPress Hacks

  • Pingback: 爱享VIP生活 » 10个杀手级WordPress技巧

  • Pingback: 10 Killer WordPress Hacks « ArticleSave

  • http://www.whatwoulddavidhalesdo.com/ David

    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.

  • Pingback: 10 Killer WordPress Hacks | How2Pc

  • Pingback: Aurigis.com » Blog Archive » 10 Killer WordPress Hacks

  • Pingback: 10 Killer WordPress Hacks « DesignDevoted

  • Pingback: 10 Killer WordPress Hacks | Web Hosting and Domains

  • Pingback: 10 Killer WordPress Hacks | The Blog Specialist

  • http://www.jusuchin85.com/blog/ jusuchin85

    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?

  • http://www.wprecipes.com Jean-Baptiste Jung

    @jusuchin85: Did you deactivated the plugin before including it as told in the tutorial? Looks like it has been inclued twice.

  • http://www.jusuchin85.com/blog/ jusuchin85

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

  • http://www.wprecipes.com Jean-Baptiste Jung

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

  • Pingback: Mellowish » Blog Archive

  • Pingback: 10 Killer WordPress Hacks | SuperBlog

  • Pingback: 10个杀手级WordPress技巧(转) | 上网这点事

  • http://www.onelargeprawn.co.za onelargeprawn

    @Jamie – thanks for the plugin. It is indeed much easier to configure.

  • http://www.nomad-one.com nomad-one

    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

  • Pingback: KurtQian’s blog - 10 Killer WordPress Hacks

  • Pingback: Pagination in your WordPress theme | greybucket.com

  • Webgirl

    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?

  • http://www.wprecipes.com Jean-Baptiste Jung

    @Webgirl: Good question, but I don’t know :( I’ll take a look if I have some time and get back to you.

  • http://lilibuznet.free.fr buz

    I have this problem too.

  • Pingback: todo: add pagination to this wordpress blog - WordPress Test

  • Pingback: Complete Wordpress Theme Tutorial « Kolmex

  • http://www.rutley.co.uk Sam

    Thanks for the tutorial- it makes WordPress look so much better!

  • http://www.rugged-systems.com/ getac b300

    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

  • http://www.bloggingproductanalysis.com Blogging Prodcut Reviewer

    thanks for the useful code and the useful tutorial…much appreciated..

  • Pingback: 6 วิธีที่จะทำให้ Wordpress เจ๋งขึ้น • Mekz Connecting

  • http://www.perfect-marketing.de Sebastian

    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.

  • http://www.techietalk.co.uk James Luff

    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?

  • http://www.techietalk.co.uk James Luff

    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?

  • http://www.leivajd.com/ jose leiva

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

  • Pingback: Desing by » Añadir ¨paginacion¨ a un blog de WP

  • http://www.Safebooks.org Kyle King

    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.

  • Pingback: Mon-Wordpress.fr » Comment insérer des liens de paginations dans votre thème

  • http://www.wealthontap.com Mike Law

    Thanks for this, definitely much better to use pagination for SEO to ensure your old posts get some link love.

  • http://www.ceyizsepeti.com Dantel

    Thanks for help..

  • http://www.crochetandknitting.net Crochet

    I tried this hack in my web site. Thanks for all..

  • Pingback: Integrar paginación en tu theme WordPress sin plugin | Kernel Web

  • http://complimedia.com Montana Flynn

    It would be great to reverse the order, I like the older post to the left and new to the right. Is that possible?

  • Pingback: How to: Integrate a pagination in your WordPress theme | Squico

  • http://www.betobeto.com Beto

    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.

  • Jhonattan

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

  • http://dynamicwp.net reza

    man, such a great hack…thanks for sharing

    will use this hack in every themes i create from now on

    thanks man

  • Tom

    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 ?

  • http://str-all-info.ru strallinfo

    Informative, but not convincing. Something is missing, and what do not understand. But I will say frankly: – light and benevolent thoughts.

  • Pingback: 10 Killer WordPress Hacks « 从小做起@fea.net.cn

  • jdg

    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.

  • Pingback: 10 Tutorials to Take Your WordPress Development Skills to the Next Level

  • Pingback: typoglyphic.com » 10 Tutorials to Take Your WordPress Development Skills to the Next Level – designm.ag

  • Pingback: 10 Tutorials to Take Your WordPress Development Skills to the Next Level | Web Design Byte

  • http://www.techcats.net/ Rajesh Kanuri @ TechCats

    This is very helpful while i add pagination plugin for my thesis theme

  • Pingback: 10个杀手级WordPress技巧-建站指南-站长经验 » By admin » 发布 » sin32

  • http://new-renovations.ru Felipe

    Do not regret that I spent a couple of minutes to read your blog. Write often, even inevitably’ll come to read something new.

  • http://delhi-masterplan.com RB

    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

  • http://delhi-masterplan.com Ruchika

    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

  • http://www.chatougri.com Chatougri

    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)

  • http://-- Taha

    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 ?

  • http://-- Taha

    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.

  • Pingback: 15 Do’s and Don’ts of Effective WordPress Theming | Theme Lab

  • http://www.fatihturan.com fatihturan

    Excellent post! Thanks.

  • Pingback: 10个适用的杀手级WordPress 技巧 | 虾客博网

  • http://stroika-elite.ru Deril

    Cognitive. I would like to hear more expert opinion on the subject

  • http://www.xiacer.com XIA

    Great little tut, thanks you!

  • http://www.wpexplorer.com WPExplorer

    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!

    • http://www.google.com Daniel

      I want to use this plugin but i still want to use the left and right buttons also.. does anyone know how to do this????!!! PLEEEASSEE :)

    • http://www.wpexplorer.com WPExplorer

      Never mind I figured it out.

      • terulic

        How did you do it?

  • http://pippinspages.com Pippin Williamson

    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.

  • http://blog.deadlycomputer.com steve

    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?

  • Pingback: 10 Killer WordPress Hacks « MalarVizhi

  • http://shamimnasir.com Shamim

    It’s a long process. Is there anything that is more simple and don’t need any kind of coding on theme?

  • Satish Panchal

    Many thanks to all for this important code !
    Great job !

  • http://www.vefk.co.uk Vefk

    It’s a long process. Is there anything that is more simple and don’t need any kind of coding on theme?

  • http://www.savedrclark.net/ Arnan

    How to build page-navi without Plugin..??
    can you make a tutorial for this..??
    thanks..

  • http://www.seo-smart.co.uk/ Kike Gil

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

  • http://6birds.net Liz

    This didn’t work for me. :L

  • Coues ludovic

    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.

    • http://6birds.net Liz

      In other words it takes someone who understands code fluently, correct?

  • http://www.lalydesign.co.uk Pierrick

    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

  • http://www.fabrooms.de jay

    is there not plugin for this? It seems a little cumbersome to do manually…