Learning Child Theming with Twenty Twelve

If you take a look at the Twenty Twelve blog section, you’ll notice that it has a very busy post meta info. Below each post, you’ll find, “This entry was posted in [list of categories] and tagged [list of tags] on [date] by [author]. [edit link]”

I thought a nice thing to do here, would be to move the date from this area and post it as a flag on the right hand side of the title

Looking through the content.php, we can see that there’s a function called twentytwelve_entry_meta();. We can find the contents of this function in our functions.php file on line 322 and with the added bonus of instructions on how to override it in our child theme! Following these instructions, I copied and pasted the code in my child’s functions.php, modified the code of the twentytwelve_entry_meta(); function and created a new one called twentytwelve_posted_on() which allows me to display my date and time and float them where needed.

The styles needed to float the date is as follows:

.hentry {
	position:relative;
}
.entry-meta .posted_on {
	background:#d62647;
	color:#FFF;
	font-weight:bold;
	left:-100px;
	padding:5px 5px 5px 25px;
	position:absolute;
	top:0px; 
	text-align:center;
	text-transform:uppercase;
	width:60px;	
}

Note the addition of position:relative on the .hentry. That’s needed for positioning our date absolutely.

Our child theme content.php contains the exact content of our parent, except that we now have two functions calls:

<?php twentytwelve_entry_meta(); ?>
<?php twentytwelve_posted_on(); ?>

The Twenty Twelve theme supports all post formats, so that’s what all the content files are for. In order to get our dates to display the same way, these also need to be adjusted with our posted_on function.

Finally, I made one small modification, that you may not notice. Twenty Twelve comes with the option of uploading a banner image. Once uploaded the image will appear below the navigation. I thought it would look best to display this banner above it, so my child theme’s header.php simply has this code reversed.

Overall Twenty Twelve is very easy to child theme. I would suggest that you look through the code, poke around the stylesheet and make your own child theme to suit your needs.