Integrate Pagination Plugins into Twenty Twelve

The ‘next/prev’ posts links are done with a function in Twenty Twelve; twentytwelve_content_nav().

That function is pluggable, which makes it easy to change it in a child theme of Twenty Twelve.
To integrate for instance the plugin ‘wp_pagenavi’, you would need to change the function as follows (when you are using a child theme, add this into functions.php of the child theme; else edit the function in Twenty Twelve):

function twentytwelve_content_nav( $html_id ) {
	global $wp_query;

	$html_id = esc_attr( $html_id );

	if ( $wp_query->max_num_pages > 1 ) : ?>
		<nav id="<?php echo $html_id; ?>" class="navigation" role="navigation">
			<h3 class="assistive-text"><?php _e( 'Post navigation', 'twentytwelve' ); ?></h3>
		<?php if( function_exists( 'wp_pagenavi' ) ) { wp_pagenavi(); } else { ?>	
			<div class="nav-previous"><?php next_posts_link( __( '<span class="meta-nav">&larr;</span> Older posts', 'twentytwelve' ) ); ?></div>
			<div class="nav-next"><?php previous_posts_link( __( 'Newer posts <span class="meta-nav">&rarr;</span>', 'twentytwelve' ) ); ?></div>
		<?php } ?>
		</nav><!-- #<?php echo $html_id; ?> .navigation -->
	<?php endif;

the use of the conditional check if( function_exists( 'wp_pagenavi' ) ) prevents an error message if the plugin is not activated, and provides the theme’s default pagination as a fallback.

Comments on the ‘Posts Page’ in WordPress

If you are using a static home page and have set one of your other pages to be the ‘posts page‘ [Codex], then there is no direct way to allow comments on that page.

You will need to do some custom programming to allow viewers to comment on the ‘posts page‘, i.e. not just on the individual posts, but on the whole page in general.

WordPress does not use any page templates for the ‘posts page‘, but uses index.php or home.php of the currently active theme – see template hierarchy.

This example assumes that the theme does not have a home.php, so we are doing the coding in index.php.

First, we need to check that we are on the ‘posts page‘, and that is set under dashboard – settings – reading:

if( is_home() && get_option('page_for_posts') ) :

Then we get the ‘original’ page using WP_Query():

$posts_page = new WP_Query( array( 'post_type' => 'page', 'posts_per_page' => 1, 'post__in' => array(get_option('page_for_posts')) ) );

We could then for instance output the content of that page as it is written in the page editor; this content would otherwise not get shown for a ‘posts page’; or use ‘get_template_part(‘content’,’page’)’ as in the example for Twenty Twelve.

Last we output the comments and comment form with:

global $withcomments; $withcomments = 1;
$withcomments = 0; 

The $withcomments = 1;  is needed to show the comments part in a ‘posts page‘.

The full example code is:

<?php if( is_home() && get_option('page_for_posts') ) :
$posts_page = new WP_Query( array( 'post_type' => 'page', 'posts_per_page' => 1, 'post__in' => array(get_option('page_for_posts')) ) );
if( $posts_page->have_posts() ) while( $posts_page->have_posts() ) : $posts_page->the_post();
//this is for Twenty Twelve; or whatever you want to output from the 'posts page'
global $withcomments; $withcomments = 1;
$withcomments = 0;
endwhile; wp_reset_postdata();
endif; ?>

Posts in Two Or Three Columns – Twenty Twelve

If your index and archive pages are getting too long, or if you want to compact the information within those pages a little bit, for instance because the featured images above each post are just too large, consider to change the template to show the posts in two columns.

This is easier done than said, with some useful css classes injected into the output of the ‘post_class()’ in the div of each post, together with some rather simple css.

For instance, to change the category archive into two columns, without editing category.php itself, add a filter function into functions.php (as always with the default themes of WordPress, this  is done within a child theme):


function category_two_column_classes( $classes ) {
global $wp_query;
if( is_category() ) :
$classes[] = 'two-column-post';
if( $wp_query->current_post%2 == 0 ) $classes[] = 'two-column-post-left';
return $classes;

The minimum css for this is:

.two-column-post { width: 47%; float: left; margin-left: 5.9%; }
.two-column-post-left { clear: left; margin-left: 0; }

If you want to apply the same principle for instance to the posts page or other archives, replace


with another conditional tag like


The code is easily adapted to three columns (or actually any number of columns) by changing the number in the modulus operator:


function category_three_column_classes( $classes ) {
global $wp_query;
if( is_category() ) :
$classes[] = 'three-column-post';
if( $wp_query->current_post%3 == 0 ) $classes[] = 'column-post-left';
return $classes;

the css for three columns would be:

.three-column-post { width: 30%; float: left; margin-left: 4.9%; }
.column-post-left { clear: left; margin-left: 0; }

Page-Of-Posts Template for Twenty Twelve

Page templates are a good way of customising the layout of WordPress sites – and the Codex contains the example code of a ‘Page Of Posts’ page template for the current default theme Twenty Eleven. With the future default theme – Twenty Twelve – of the soon to be released next version of WordPresss already published, there is a need for a new example.

As usual, start by creating a child theme of Twenty Twelve.

The ‘Page Of Posts’ page template is straight forward code:

Please use the code from the pastebin

There was some problem with the code below which was unfortunately somehow broken – but seems to be fixed now.

 * Template Name: Page of Posts
 * for a child theme of Twenty_Twelve

get_header(); ?>

	<div id="primary" class="site-content">
		<div id="content" role="main">

			$paged = (get_query_var('paged')) ? get_query_var('paged') : 1;
			$args= array(
				'category_name' => 'antiquarianism', // Change this category SLUG to suit your use; or see for query parameters
				'paged' => $paged
			if( have_posts() ) : ?>

			<?php while ( have_posts() ) : the_post(); ?>
				<?php get_template_part( 'content', get_post_format() ); ?>
				<?php comments_template( '', true ); ?>
			<?php endwhile; // end of the loop. ?>
			<?php twentytwelve_content_nav( 'nav-below' ); ?>
			<?php else : ?>
			<article id="post-0" class="post no-results not-found">
				<header class="entry-header">
					<h1 class="entry-title"><?php _e( 'Nothing Found', 'twentytwelve' ); ?></h1>
				<div class="entry-content">
					<p><?php _e( 'Apologies, but no results were found. Perhaps searching will help find a related post.', 'twentytwelve' ); ?></p>
					<?php get_search_form(); ?>
				</div><!-- .entry-content -->
			</article><!-- #post-0 -->

			<?php endif; wp_reset_query(); ?>

		</div><!-- #content -->
	</div><!-- #primary -->

<?php get_sidebar(); ?>
<?php get_footer(); ?>