Sidebar on the Left – Twenty Twelve

A quick fix to move the sidebar location in a child theme of Twenty Twelve;

add these styles to style.css of the child theme:

@import url('../twentytwelve/style.css');

/*-- move sidebar to the left --*/
@media screen and (min-width: 600px) {
	.site-content {
		float: right;
	.widget-area {
		float: left;

/* for IE8 and IE7 ----------------*/
.ie .site-content {
	float: right;
.ie .widget-area {
	float: left;

caveat: this simplified set of styles has some problems with the formatting of the widgets in the ‘front-page’ template, when viewed in older browsers such as IE7.

possible helpful styles:

.ie .template-front-page #secondary.widget-area { width: 100%; }
.ie .template-front-page #secondary.widget-area .first.front-widgets { width: 50.1%; margin-right: 3%; background: #f4f4f4; }
.ie .template-front-page #secondary.widget-area .second.front-widgets { width: 46.8%; margin-right: 0; background: #f4f4f4; }
.ie .template-front-page #secondary.widget-area .widget { width: 100%; }

Advanced Filter for Tag Cloud Widget Css Classes

tag cloud widget colored with css
tag cloud widget advanced color styling

The default tag cloud widget does not offer a lot of formatting possibilities, partly because it only outputs one css class with a reference to the tag ID.
It uses an inline style, which outputs the font-size, to distinguish the tags according the number of post they belong to.

This filter function is coded to add a css class with the tag slug .tag-slug-{slug} and with a rounded tag size .tag-size-{number}, and to remove the inline style.

add_filter ( 'wp_tag_cloud', 'tag_cloud_widget_advanced_classes' );  

function tag_cloud_widget_advanced_classes( $taglinks ) { 
	$tags = explode('</a>', $taglinks);
	$regex1 = "#(.*tag-link[-])(.*)(' title.*)#e";         
	$regex2 = "#(.*style='font-size:)(.*)((pt|px|em|pc|%);'.*)#e"; 
	$regex3 = "#(style='font-size:)(.*)((pt|px|em|pc|%);')#e";         
	$regex4 = "#(.*class=')(.*)(' title.*)#e";         
	foreach( $tags as $tag ) {         
		$tag = preg_replace($regex1, "('$1$2 tag-slug-'.get_tag($2)->slug.'$3')", $tag ); //add .tag-slug-{slug} class   
		$size = preg_replace($regex2, "(''.round($2).'')", $tag ); //get the rounded font size       
		$tag = preg_replace($regex3, "('')", $tag ); //remove the inline font-size style
		$tag = preg_replace($regex4, "('$1tag-size-'.($size).' $2$3')", $tag ); //add .tag-size-{nr} class
		$tagn[] = $tag;
	$taglinks = implode('</a>', $tagn);     
return $taglinks; 

For the code, also see the pastebin.

The added css classes can for instance be used to color the tags according to the number of appearance; as you can see here in the tag cloud when you scroll down on the left.

Posts in Columns – A New Twist on an Old Problem

To organize posts into three columns (edit: semantically more correct would be to call it ‘three posts per row’ as this is the way the posts are organized), you first need to generate a column dependant css class for each post; this will be added to the post div within the loop.

The core trick to generate different css classes for posts in the first coliumn, the second column, and the last column:

<?php $column = ($column == '') ? 'first' : (($column == 'first') ? 'middle' : (($column == 'middle') ? 'last' : 'first' )); ?>

This line of code needs to be within the loop, just before the post div.

To achieve more or less the same, you could obviously also use a counter variable and the modulus operator, as i have elaborated on in my earlier article ‘More-Than-Zebra style WordPress loop’. However, the above method is simpler and easier to apply within a single line of code.

The second step is to add this as a css class to the post div:

a – assume a theme without the use of ‘post_class()’; the typical opening div would look like:

<div class="post" id="post-<?php the_ID(); ?>">

This is changed into:

<div class="post <?php echo $column; ?>" id="post-<?php the_ID(); ?>">

b – in a theme using the ‘post_class()’, the new code would look like:

<div <?php post_class($column); ?> id="post-<?php the_ID(); ?>">

Third and last step: to tell the browser what to do with the new css classes, add some styles to style.css of the theme:

/* .first, .middle, .last styling of posts on home page for three column */
.first, .middle, .last { width: 32%; float:left; clear:none!important; }
.first { margin-right: 2%; clear:both!important; }
.middle { margin-right: 2%; }

Final details depend on the existing theme.

edit & ps:
if you just want to mark the first post in each row – for instance to add the ‘clear:both;’ and a different margin there – try to work with:
(example for 5 columns)

<div <?php $column = ($wp_query->current_post%5 == 0) ? 'first' : ''; post_class($column); ?> id="post-<?php the_ID(); ?>">