Adding Wp-PageNavi plugin to Twenty Eleven is a bit different than adding it to Twenty ten. The code must be placed into functions.php instead of the loop.
This code will only work with a child theme, you’ll have to modify it to add it straight to Twenty Eleven, but why would you want to do that anyways?
Old Way – no need to do it this way anymore
Open functions.php and add
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
// Show Wp-PageNavi when it's active - change twentyeleven_content_nav in index.php to twentyeleven_child_content_nav function twentyeleven_child_content_nav( $nav_id ) { global $wp_query; if ( $wp_query->max_num_pages > 1 ) : ?> <?php /* add wp-pagenavi support for posts */ ?> <?php if(function_exists('wp_pagenavi') ) : ?> <?php wp_pagenavi(); ?> <br /> <?php else: ?> <nav id="<?php echo $nav_id; ?>"> <h3 class="assistive-text"><?php _e( 'Post navigation', 'twentyeleven' ); ?></h3> <div class="nav-previous"><?php next_posts_link( __( '<span class="meta-nav">←</span> Older posts', 'twentyeleven' ) ); ?></div> <div class="nav-next"><?php previous_posts_link( __( 'Newer posts <span class="meta-nav">→</span>', 'twentyeleven' ) ); ?></div> </nav><!-- #nav-above --> <?php endif; ?> <?php endif; } |
As David pointed out there is now no need to create a custom function anymore, the same function name can be used, so we’ll use this instead.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
function twentyeleven_content_nav( $nav_id ) { global $wp_query; if ( $wp_query->max_num_pages > 1 ) : ?> <?php /* add wp-pagenavi support for posts */ ?> <?php if(function_exists('wp_pagenavi') ) : ?> <?php wp_pagenavi(); ?> <br /> <?php else: ?> <nav id="<?php echo $nav_id; ?>"> <h3 class="assistive-text"><?php _e( 'Post navigation', 'twentyeleven' ); ?></h3> <div class="nav-previous"><?php next_posts_link( __( '<span class="meta-nav">←</span> Older posts', 'twentyeleven' ) ); ?></div> <div class="nav-next"><?php previous_posts_link( __( 'Newer posts <span class="meta-nav">→</span>', 'twentyeleven' ) ); ?></div> </nav><!-- #nav-above --> <?php endif; ?> <?php endif; } |
We can skip this template modification step now since we’re using the default function name and go ahead and get right to adding the CSS.
Next copy index.php from Twenty Eleven to your child theme folder and open it. Find this line
|
1 |
<?php twentyeleven_content_nav( 'nav-below' ); ?> |
Change that line to this
|
1 |
<?php twentyeleven_child_content_nav( 'nav-below' ); ?> |
Save and upload both files, activate Wp-PageNavi and view your site. If it’s not installed, it will display the default pagination. The reason I wanted to do it this way, was to give users a choice to use Wp-PageNavi or not.
Here’s a bit of css you can add to your stylesheet if you like how I’ve styled mine, replace “orange” to change the color.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
/*--------------------------------------- Wp-PageNavi style ---------------------------------------*/ .wp-pagenavi {margin-top:10px;} .wp-pagenavi a, .wp-pagenavi span { margin-right: 10px; padding: 3px 5px; font-size: 12px; color: #222; text-decoration: none; border: 3px solid orange !important; } .wp-pagenavi a:hover, .wp-pagenavi span.current { background: orange; color: #fff; } /* This is optional and not valid CSS but it looks cool, adds a delay hover effect */ .wp-pagenavi a:hover { -moz-transition-duration: 300ms; /* Firefox 4 */ -webkit-transition-duration: 300ms; /* Safari and Chrome */ -o-transition-duration: 300ms; /* Opera */ -moz-transition-timing-function: ease; /* Firefox 4 */ -webkit-transition-timing-function: ease; /* Safari and Chrome */ -o-transition-timing-function: ease; /* Opera */ } |
I want to put a pagination on twenty eleven theme. I followed the instructions, but it was still not working for me, can someone help me plz. Thank you.
Hi San. Open a forum post and show us your functions you’ve added to your theme.
This solution placed the nav at top and bottom of index page. I only want it on the bottom. Thoughts?
It displays page navi wherever Twenty Eleven displays page nativagtion. If you don’t want it to display in a certain area, you can use display: none; in your CSS to hide it.
Could you please help me. I’m trying to add the WP PageNavi to my WP-Zoom Theme. For single posts. Where would I need to add this code.
Hi Jared, Wp-PageNavi has instructions for adding it to themes. This post will only work with Twenty Eleven. I’m not familiar with your theme, so it’s hard for me to answer your question. Usually single.php handles single posts though.
You’ll need to find where in that template the call for the next and previous links are at, then replace them with
Also read here for more instructions http://wordpress.org/extend/plugins/wp-pagenavi/installation/