WordPress: Add logo top right in Twenty-Twelve theme

I’m not sure why, but out-of-the-box, WordPress’s excellent TwentyTwelve theme prevents you from putting anything in the (empty!) top-right area of the page. It’s a great place for a “contact” link or similar (and check out the Suffusion theme to see how many widget areas a good WP theme ought to have…).

What’s preventing it?

After a little exploration, I found that the H1 tag is inheriting a:

[css]
clear:both;
[/css]

although this didn’t show up in Chrome’s CSS inspector (hmm…). Anyway, the fix was quite simple:

1. From WP dashboard, go: Appearance -%gt; Editor
2. Select the “Header(header.php)” file
3. near the top, find the “<hgroup> <h1>” part
4. in the h1 tag, append an override to get rid of the clear:
   • “<h1 […whatever was there already…] style=”clear:none;”>”
5. above the h1 tag, but inside the hgroup tag, add your logo:
   • an image: “<img src=”…your image…”/>
   • some php / a widget: “[copy paste whatever you wanted]”
6. Don’t forget: click “Update file” button on that page, or you’ll lose your changes ;)