Easily add Wp-PageNavi to Twenty Eleven

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?

wp-pagenavi-20111

Old Way – no need to do it this way anymore
Open functions.php and add

// 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">&larr;</span> Older posts', 'twentyeleven' ) ); ?></div>
			<div class="nav-next"><?php previous_posts_link( __( 'Newer posts <span class="meta-nav">&rarr;</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.

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">&larr;</span> Older posts', 'twentyeleven' ) ); ?></div>
			<div class="nav-next"><?php previous_posts_link( __( 'Newer posts <span class="meta-nav">&rarr;</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

<?php twentyeleven_content_nav( 'nav-below' ); ?>

Change that line to this

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

/*---------------------------------------
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 */
}

Here’s a child theme with this code already added for you, install like any other theme.
Download Pagenavi Theme

27 thoughts on “Easily add Wp-PageNavi to Twenty Eleven

  1. Geek

    First of it all I must say that the way you provide backlinks for comments here is brilliant. As a hobby seo I love that.

    I tried your page navigation tutorial, but I did not see any changes to my blog. Could you maybe provide a screenshot please?

    What you really should do when publishing code here, is following the guide lines.

    <?php endif;
    and all in one row really does not look good.

    Thank you anyway for your tutorials. I think you do a good job here.

  2. Pingback: 8 hacks pour le thème Twenty Eleven de WordPress | WordPress Channel

  3. Pingback: Wp-pagenaviの設定 | Wordpressによるサイト構築メモ

  4. Pingback: 如何在輕鬆的Twenty Eleven主題內加入Wp-PageNavi | 彰化一整天blog

  5. lili

    hi there, i like this code snippet. But, my problem is, i can’t access my lilynrman.com/wp-admin. At first, i alter my function.php. index.php and css. My blog looks ugly, should have follow the NomNom appeareance. when i want to change everything back in normal through my admin board, this what was appeared:
    Warning: Cannot modify header information – headers already sent by (output started at /home/foxyruol/public_html/wp-content/themes/NomNom/functions.php:1) in /home/foxyruol/public_html/wp-includes/pluggable.php on line 866.

    I hope you can help with this problem. Contact me at email given.

  6. Pingback: [WordPress 3] 將Twenty Eleven佈景主題加上分頁導航樣式 « 簡睿隨筆

  7. Simon

    Hi, thank you for these explanations which are really helpful. It perfectly works with my website but I’d like to duplicate the PageNavi at the bottom of the page for the people who has already seen the whole page : that means that I would have a PageNavi both before AND after my articles. How could I do this ?
    Thanks !

  8. kurosaki15

    Hi,

    The following is my coding for the custom category template (category.php), and I cannot get the WP-Pagenavi to display.

    Thankfully I have successfully displayed the WP-Pagenavi on my home/front page going through the procedure mentioned. However, doing the same for the category.php did not work for me.

    Unfortunately, I am new to html, php, anything to do with coding, and would like assistance. If you can please tell me exactly where to put what (or just something I can copy paste), that would be much appreciated.

    The following is my category.php code:

    
    
    		
    			
    
    			
    
    				
    					&lt;?php
    						printf( __( &#039;Category Archives: %s&#039;, &#039;twentyeleven&#039; ), &#039;' . single_cat_title( '', false ) . '' );
    					?&gt;
    
    					&lt;?php
    						$category_description = category_description();
    						if ( ! empty( $category_description ) )
    							echo apply_filters( &#039;category_archive_meta&#039;, &#039;' . $category_description . '' );
    					?&gt;
    				
    
    				
    
    				
    
    &lt;?php function catch_that_image() {
      global $post, $posts;
      $first_img = &#039;&#039;;
      ob_start();
      ob_end_clean();
      $output = preg_match_all(&#039;//i', $post-&gt;post_content, $matches);
      $first_img = $matches [1] [0]; 
    
     if(empty($first_img)){ //Defines a default image
        $first_img = "/images/default.jpg";
      }
    
      return $first_img;
    } ?&gt;
    
    	
    
      
    			
    
    
    
    &lt;?php if($colCount == 0){echo &#039;'; $rowCount++;} ?&gt;
    
    
        
    	&lt;a href = &quot;"&gt; 	
    	&lt;img src=&quot;" style="width:150px;height:autopx;padding:25px 30px 5px 30px;vertical-align: middle;"/&gt;
    	</a>
    	&lt;a class=&quot;more-link&quot; href=&quot;" rel="bookmark" title="Permanent Link to "&gt;</a>
        
    
    = $columnLimit){ echo ''; $colCount = 0; if($rowCount &gt;= $rowLimit){break;}} ?&gt;
     
    
    
    
    				
    
     
    
    
    				
    
    			
    
    				
    					
    						
    					<!-- .entry-header -->
    
    					
    						
    						
    					<!-- .entry-content -->
    				<!-- #post-0 -->
    
    			
    
    			<!-- #content -->
    		<!-- #primary -->
    
    
    
    

    Thank you,

  9. DigiRaindrops

    Hi Zeak!

    In the first releases of the twenty eleven theme the function was not Pluggable, so we raised a trac ticket
    http://core.trac.wordpress.org/ticket/18585

    So this has been corrected in twenty eleven functions.php and WordPres have added a line to amke it pluggable:
    if ( ! function_exists( ‘twentyeleven_content_nav’ ) ) :

    Now it is, so you can just create a function in the child theme with the exact same name as the parent function without any errors, and this function will be used and not the parent!

    Regards

    David

    1. Zeaks

      As David pointed out, it’s easier to add wp-pagenavi now, instead of creating the custom function

      function twentyeleven_child_content_nav( $nav_id ) {

      you can use the same function name

      function twentyeleven_content_nav( $nav_id ) {

      By doing it this way, you don’t have to modify template files so…

      <?php twentyeleven_content_nav( 'nav-below' ); ?>

      can be used as is, no need to change it to twentyeleven_child_content_nav

  10. Pingback: WordPress Twenty Eleven Child Theme : Solarized | PostBlue

    1. Zeaks

      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/

Leave a Comment

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

*
*