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:

clear:both;

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

One thought on “WordPress: Add logo top right in Twenty-Twelve theme”

Comments are closed.