Add Wp PageNavi to Twenty Twelve Theme

Here’s how you can add Wp-PageNavi to a twenty Twelve child theme.

It’s not much different than how we added to Twenty Eleven. Open or create a functions.php for your child theme, and paste this code into it. If you’re creating a new functions.php don’t forget to add the opening php tag.

// WP-PageNavi
function twentytwelve_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', 'tto' ); ?></h3>
			<div class="nav-previous"><?php next_posts_link( __( '<span class="meta-nav">&larr;</span> Older posts', 'tto' ) ); ?></div>
			<div class="nav-next"><?php previous_posts_link( __( 'Newer posts <span class="meta-nav">&larr;</span>', 'tto' ) ); ?></div>
		</nav><!-- #nav-above -->
	<?php endif; ?>
	<?php endif;
}

// WP-PageNavi

function twentytwelve_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: ?>

<div class="nav-previous"><?php next_posts_link( __( '<span class="meta-nav">←</span> Older posts', 'tto' ) ); ?></div>

</nav>

<?php endif; ?>

<?php endif;

}

Once you’ve added this, install and activate Wp-PageNavi. If it’s not installed, it will display the default page navigation.

Here’s a bit of CSS you can use to style it as well.

/* WP-PageNavi CSS ------------------- */
.wp-pagenavi {
	clear: both;
	margin-bottom: 20px;
}
.wp-pagenavi a, .wp-pagenavi span {
	text-decoration: none;
	border: 1px solid #BFBFBF;
	padding: 5px 8px;
	margin: 2px;	
}
.wp-pagenavi a:hover, .wp-pagenavi span.current {
	border-color: #000;
}
.wp-pagenavi span.extend { 
	background:none;
	border:none;
}
.wp-pagenavi a, .wp-pagenavi span.current, .wp-pagenavi span.pages {
	border:1px solid #ccc;

}
.wp-pagenavi a:hover, .wp-pagenavi span.current {
	border-color: #686868;
	color:#333333;
}
.wp-pagenavi a,.wp-pagenavi span.current,.wp-pagenavi span.pages {
	background: rgb(239, 239, 239);
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	border-radius: 3px;
}
.wp-pagenavi a:hover,.wp-pagenavi span.current {
	-webkit-box-shadow: 0 1px 1px #666;
	-moz-box-shadow: 0 1px 1px #666;
	box-shadow: 0 1px 1px #666;
}

/* WP-PageNavi CSS ------------------- */

.wp-pagenavi {

clear: both;

margin-bottom: 20px;

}

.wp-pagenavi a, .wp-pagenavi span {

text-decoration: none;

border: 1px solid #BFBFBF;

padding: 5px 8px;

margin: 2px;

}

.wp-pagenavi a:hover, .wp-pagenavi span.current {

border-color: #000;

}

.wp-pagenavi span.extend {

background:none;

border:none;

}

.wp-pagenavi a, .wp-pagenavi span.current, .wp-pagenavi span.pages {

border:1px solid #ccc;

}

.wp-pagenavi a:hover, .wp-pagenavi span.current {

border-color: #686868;

color:#333333;

}

.wp-pagenavi a,.wp-pagenavi span.current,.wp-pagenavi span.pages {

background: rgb(239, 239, 239);

-webkit-border-radius: 3px;

-moz-border-radius: 3px;

border-radius: 3px;

}

.wp-pagenavi a:hover,.wp-pagenavi span.current {

-webkit-box-shadow: 0 1px 1px #666;

-moz-box-shadow: 0 1px 1px #666;

box-shadow: 0 1px 1px #666;

}

22 thoughts on “Add Wp PageNavi to Twenty Twelve Theme”

Sigit Prasetyo says:

2013/04/25 at 2:13 am

Thank you, work for my blog with Twenty Twelve Themes…
Very helpful…

Steve says:

2013/04/29 at 11:45 am

This did the trick for me, thanks a lot!