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;
}

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;
}

Comments

  1. says

    Thanks for the post. I know that it isn’t the subject of this post, but it could have helped few words about how to make a file functions.php in the child theme without errors. Just for beginners. :)
    Thanks again !

    • says

      This has not been tested with Twenty Fourteen theme. Wp-Pagenavi plugin does contain instructions on how to add it to any theme though.

Leave a Reply