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

  1. Maurice Maya

    I don’t think your instructions are accurate. I finally made them work by looking at the source code of your own post:

    – img src should have the following syntax: <img src=”http://…” style=”float:right”/>
    – it should be ABOVE <hgroup> not below it

Leave a Reply

Your email address will not be published. Required fields are marked *