WP SITES

2893

Original Genesis & WooCommerce Tutorials & 6000+ Guaranteed Code

Snippets

WP Page Navi Plugin Adds Pagination In WordPress

WP-PageNavi is the most popular page navigation plugin for WordPress having been download more than 4 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;
}
[/code]
All you need to do is <strong>replace this code</strong>

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

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(); ?>

Another option is to hook in the page navi template tag using a custom function with hook:

You could also try replacing the get_footer hook in the code above with loop_end to change the position your navigation links display in your theme.

The is_home() conditional tag can also be changed to any archive page.

Install WP Page Navi in Genesis

You can use any genesis_hook and conditional tag to completely control where you pagination displays in your theme.

The above code should be copied from the view raw link in the Gist and pasted at the end of your child themes functions.php file using a code editor.

Video Installation Guide

Custom Next & Previous Page Images

Pulls custom next and previous page images from your child themes images folder

Reader Interactions

Comments

  1. Hello! I have follow your tutorial and successfully installed wp-pagenavi in my blog . Thanks!
    I can clearly see the numbers of pages but for some reason when I click “Next Page” it always leads me to the same content in Page 1 . Any idea what I am doing wrong.

    I am using genesis framework with Delightful child theme.
    I would truly appreciate some help thank you!

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

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

  6. 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?

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

  8. 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”.

Leave a Reply