Posted on 7 Comments

Twenty Eleven Theme Fixes – Sidebar and Header Image Size




The WordPress 3.2 update rolled out in the last week made some really nice improvements including the new Twenty Eleven theme.

Many of the improvements over Twenty Ten make it a viable choice for a main theme:

  • mobile browser theme detection
  • support for custom menus
  • cleaner graphics and interface

Two of my biggest complaints are the huge header image size (1000×288) and the sidebar is missing from posts. Luckily there are fixes for both.

Header Image Size Fix

Raygun made a plugin that works perfectly for resizing your header the right way. After installing, you’ll find a new option under Appearance > Resize Header. After setting your desired header size, go to Appearance > Header and upload your new image. If its not the same size as your set dimensions, you can crop it. Download the resize header plugin on WordPress.org.

Add Sidebar to Posts

TricksMommy.com posted some code you can add to your style.css and single.php theme files. I did this by creating a duplicate twenty eleven theme, but the more correct way is with a child theme.

Note: I tried doing this with a Child theme, but the main post content ran over into the sidebar. I didn’t do any other investigating so I’m not sure why.

Step 1

Click edit on your copied theme and open single.php. Find the following code:


<?php get_footer(); ?>


Right before it, add the following line and save:


<?php get_sidebar(); ?>


Step 2

Edit your style.css and change the theme name in the style.css to something else so you don’t get the themes confused. Then add the following code at the bottom of the stylesheet:


.singular #primary {
margin: 0 -26.4% 0 0;
}

#nav-single {
display: none;
}

.singular .entry-header .entry-meta {
position: relative;
}

.singular .hentry {
padding: 0;
}

.singular .entry-header, .singular .entry-content, .singular footer.entry-meta, .singular #comments-title {
width: 100%;
}

.singular #content, .left-sidebar.singular #content {
margin: 0 34% 0 7.6%;
}

.singular article .entry-title {
padding-top: 0;
}

.singular .entry-meta .edit-link a {
right: 0;
top: 0;
left: auto;
}


Let me know how it works in the comments.

7 thoughts on “Twenty Eleven Theme Fixes – Sidebar and Header Image Size

  1. Hey Thanks for The Credits.

    Firstly, If you Change the theme name just before editing the style.css you will definitely face problems. Either Create a Complete New Child theme or edit current one.

    1. Have you successfully applied the fixes to a child theme? My main body post ran over into the sidebar when I did that. Also, I didn’t have a problem renaming the theme name in the CSS. It reflected the new theme name and had no problems. Are you referring to renaming the actual folder on your server? If so, yes, that will break the theme.

      1. I Am So Sorry. If You Wish to Apply this Trick to Child Theme You Also Need to Import CSS from Parent Theme. To Do So, Add the Following Line of Code to the Style.css File in Child Theme before adding the code i mentioned.


        @import url("../twentyeleven/style.css");

  2. I like the idea to change the header image size, but I would prefer if the plugin would allow for changes of individual pages, for example the front page with a large image and all other pages with a smaller image 🙂

  3. Adding the sidebar to posts worked for me.  Thank you sooo much!

    My site is still a work in progress but the address is http://www.outandaboutmom.com

  4. Thank you for the post, and thank you to TricksMommy. I followed this and has successfully added sidebar to my single post. I would advice anyone to create a child theme, but if you don’t feel like it then just add php get_sidebar() to single.php and edit style.css according to this guide **without** renaming the file (just add the code at the bottom and save. If it still doesn’t appear then try clearing your browser’s cache. 

  5. hi, do you know how to “fix” or set the sidebar constantly at the normal position, when resizing the browser (in that case shrink the browser)?
    btw in your version the sidebar disappears also, when i shrink the window…

Leave a Reply

Your email address will not be published.