WP PageNavi Plugin Adds Pagination In WordPress

WP-PageNavi is the most popular page navigation plugin for WordPress having been download more than 2 million times.

If you’re using  a free WordPress theme like the default theme, Twenty Eleven, you may find the site & design options don’t offer pagination so that’s where WP PageNavi comes in handy.

The WP PageNavi plugin provides a template tag which generates fancy pagination links.

Simply install and activate the plugin, then go to the settings page to easily configure the plugin. You’ll then need to edit some PHP code.

WP Page Navi Pagination Plugin for WordPress

WP Page Navi Plugin Settings

Here’s a screenshot of the Page Navi Settings

WP Page Navigation Settings

Once you configure and save the settings, you’ll need to find the code in your theme’s files using cPanel or FTP which calls to next_posts_link() and previous_posts_link() and edit this code using a text editor like notepad++

Caution: Always create a backup of your files when editing PHP code.

WP Page Navi in Twenty Ten Theme

In the Twenty Ten Theme for WordPress, the code will look like this:

<div class="nav-previous"><?php next_posts_link( __( '<span class="meta-nav">&larr;</span> Older posts', 'twentyten' ) ); ?></div>
<div class="nav-next"><?php previous_posts_link( __( 'Newer posts <span class="meta-nav">&rarr;</span>', 'twentyten' ) ); ?></div>

Replace the above code with this code:

<?php wp_pagenavi(); ?>

WP Page Navi in Twenty Eleven Theme

If you are using one of the default theme for WordPress like Twenty Eleven, you need to edit your themes functions.php file to use Page Navi.

You’re advised to create a child theme in this case and add the code into your child themes functions.php file. This way you won’t lose the changes when you update your theme.

If you don’t want to create a child theme, change the functions between line’s 427 to 436 with this code.

These line numbers maybe a little bit different in your Twenty Eleven theme depending on your existing custom functions.

function twentyeleven_content_nav( $nav_id ) {
	global $wp_query;

	if ( $wp_query->max_num_pages > 1 ) : ?>
		<nav id="<?php echo $nav_id; ?>">
			<h3 class="assistive-text"><?php _e( 'Post navigation', 'twentyeleven' ); ?></h3>
			<?php wp_pagenavi(); ?>
                  </nav><!-- #nav-above -->
	<?php endif;
}

All you need to do is replace this code

<nav id="nav-single">
						<h3 class="assistive-text"><?php _e( 'Post navigation', 'twentyeleven' ); ?></h3>
						<span class="nav-previous"><?php previous_post_link( '%link', __( '<span class="meta-nav">&larr;</span> Previous', 'twentyeleven' ) ); ?></span>
						<span class="nav-next"><?php next_post_link( '%link', __( 'Next <span class="meta-nav">&rarr;</span>', 'twentyeleven' ) ); ?></span>
					</nav><!-- #nav-single -->

With this code

<?php wp_pagenavi(); ?>

Read more about how to add previous and next post navigation in WordPress using code.

Creating Next & Previous Post Links in Thesis

Check out this article if you want to create post navigation links using the thesis theme for WordPress and want to create posts links.

Adding WP Page Navi in Other Themes

Other WordPress themes may contain lines of PHP code that look something like this:

<nav id="nav-single">
				<h1 class="section-heading"><?php _e( 'Post navigation', 'toolbox' ); ?></h1>
				<span class="nav-previous"><?php previous_post_link( '%link', __( '&larr; Previous', 'twentythirteen' ) ); ?></span>
				<span class="nav-next"><?php next_post_link( '%link', __( 'Next &rarr;', 'twentythirteen' ) ); ?></span>
			</nav><!-- #nav-single -->

Replace the code with this:

<?php wp_pagenavi(); ?>

5 Reasons Mad Mimi Works Better

mad-mimi
  1. Sends From Your Email Address - More personal & higher open rate
  2. Cheapest - $42 for list of 10,000 emails, unlimited sends
  3. Ease of Use - The easiest system to create & setup campaigns
  4. RSS to E-Mail - Auto send list of latest posts
  5. Auto Send Any Number of Days - enables you to offer multiple newsletters at different frequencies.

Click here to create a free account.

Comments

    • Brad Dalton says

      I would invest in a quality theme framework which is significantly easier to customize.

      That plugin adds a lot of code when you can simply add a few lines when using a good quality parent theme.

      I just posted both the PHP and CSS i use on my own site which works perfectly with Genesis and all StudioPress child themes.

      There’s a link in my nav menu and hundreds of tutorials on this site which help you customize your site when using the same theme as i do.

    • Brad Dalton says

      Yes however there is no real benefit of doing this.

      The plugin has been around for some time and was originally developed for themes which don’t include pagination built in.

  1. Cindy says

    Hi, i have installed wp-pagenavi and it works, thanks.. but now i can’t find where to install how many posts i want show on every page.. anybody knows what i’m doing wrong?

  2. Kim Larsen says

    I’m working on the newest WP-version, and the RAZOR-theme from Themeforest.

    I have just installed this plugin, and I just can’t figure out how to get it to work.

    As far as I know, the RAZOR-theme doesn’t have any native navigation between posts, so I don’t think there is any code I need to overwrite. So I have just placed the suggested code in the single.php file, and THAT doesn’t work.

    I need the navigation to only navigate in the current posts category. Like if I’m reading a post in “category X”, I can only go back and forth in this category.

    I hope you have the time to help me…

  3. Jeroen Groenhart says

    Thanks for sharing this information!

    I am wondering if it is possible to also use WP PageNavi for pagination with pages instead of posts.
    To be specific: Show paginated results of all pages wich are subpages of page “x”. Or perhaps, show all pages with category “x”.

Ask a Question