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):

add_filter('post_class','category_two_column_classes');

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';
endif;
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

is_category()

with another conditional tag like

is_home()

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

add_filter('post_class','category_three_column_classes');

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';
endif;
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 http://pastebin.com/yeGnRkbR

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

<?php
/**
 * 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">

		<?php
			$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 http://codex.wordpress.org/Class_Reference/WP_Query#Parameters
				'paged' => $paged
);
			query_posts($args);
			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>
				</header>
				<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(); ?>

.

A Sidebar Template for a Page in the ‘One-Column’ Layout in Twenty Eleven

This article describes the necessary coding to create a page template with a sidebar within a ‘one-column’ layout of Twenty Eleven; the example is for a right sidebar.

All changes have to be made in a child theme of Twenty Eleven.

Create your own page template from a copy of the sidebar-page.php template; call it sidebar-page-right-in-one-column.php; edit the Template Name and description.

<?php
/**
* Template Name: Sidebar right in Page in 'One-Column'
* Description: A Page Template that adds a right sidebar to a static page in the 'one-column' theme option
*
* @package WordPress
* @subpackage Twenty_Eleven
* @since Twenty Eleven 1.0
*/

get_header(); ?>

<div id="primary">
<div id="content" role="main">

<?php while ( have_posts() ) : the_post(); ?>

<?php get_template_part( 'content', 'page' ); ?>

<?php comments_template( '', true ); ?>

<?php endwhile; // end of the loop. ?>

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

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

Then make a few edits to sidebar.php and functions.php, to include the new page template into the coding;

start by editing sidebar.php to look like ( http://pastebin.com/pdqsRY8x ):

<?php
/**
* The Sidebar containing the main widget area.
*
* @package WordPress
* @subpackage Twenty_Eleven
* @since Twenty Eleven 1.0
*/

$options = twentyeleven_get_theme_options();
$current_layout = $options['theme_layout'];

if ( 'content' != $current_layout || is_page_template('sidebar-page-right-in-one-column.php') ) :
?>
<div id="secondary" role="complementary">
<?php if ( ! dynamic_sidebar( 'sidebar-1' ) ) : ?>

<aside id="archives">
<h3><?php _e( 'Archives', 'twentyeleven' ); ?></h3>
<ul>
<?php wp_get_archives( array( 'type' => 'monthly' ) ); ?>
</ul>
</aside>

<aside id="meta">
<h3><?php _e( 'Meta', 'twentyeleven' ); ?></h3>
<ul>
<?php wp_register(); ?>
<li><?php wp_loginout(); ?></li>
<?php wp_meta(); ?>
</ul>
</aside>

<?php endif; // end sidebar widget area ?>
</div><!-- #secondary .widget-area -->
<?php endif; ?>

Then add this section to functions.php to readjust the body_classes ( http://pastebin.com/nubXyyty ):

function twentyeleven_child_pagetemplates_body_classes( $wp_classes, $extra ){

$classes = array();

if( is_page_template( 'sidebar-page-right-in-one-column.php' ) ) :
// correction for the Sidebar Template 'right sidebar on page in one-column layout'
$classes[] = 'right-sidebar';
$classes[] = 'two-column';
$blacklist = array('one-column','content','left-sidebar','singular');
// Filter the body classes
foreach( $blacklist as $val ) {
if (!in_array($val, $wp_classes)) : continue;
else:
foreach($wp_classes as $key => $value) {
if ($value == $val) unset($wp_classes[$key]);
}
endif;
}
endif;

return array_merge($wp_classes, (array) $extra, $classes );
}

add_filter( 'body_class', 'twentyeleven_child_pagetemplates_body_classes', 20, 2 );

Last thing is to set the max width for the .page-template-sidebar-page-right-in-one-column-php #page to 690px, to keep the narrower width for the new page template.

Insert the Featured Image into the Post Content with Shortcode

Somebody asked today, how to insert a ‘featured image’, aka post thumbnail, into the content of a post.
Obviously this cannot be done with the usual WordPress function ‘the_post_thumbnail()’ as the php code would not get rendered in the post’s content.

For me, the best way seemed to be to programm a shortcode for this purpose;
in the most basic form this would be:

add_shortcode('thumbnail','thumbnail_in_content');
function thumbnail_in_content( $atts ) {
global $post;
return get_the_post_thumbnail( $post->ID );
}

However, this is not very user friendly and does not alllow for setting the image size and alignment.

Shortcodes allow for a number of attributes, so I integrated the attributes ‘size’ and ‘align’ to the shortcode, together with some validity checks and default values.

The usage for the [thumbnail] shortcode is, for example:

[thumbnail size=medium align=right]

or

[thumbnail size='array( 300, 200)' align=center]

Any input errors would revert to size= ‘post-thumbnail’ and/or align=’none’.

The final code – see pastebin ‘featured image in post – shortcode’

references:
http://codex.wordpress.org/Shortcode_API
http://codex.wordpress.org/Function_Reference/get_the_post_thumbnail
http://codex.wordpress.org/Function_Reference/get_intermediate_image_sizes