Add Sidebar To WordPress Twenty Eleven Theme Posts

July 6, 2011 · 30 comments

in WordPress

Add Sidebar To WordPress Twenty Eleven Theme Posts

Add Sidebar To WordPress Twenty Eleven Theme PostsMake the Sidebar Appear on
WordPress Twenty Eleven Theme!

 WordPress 3.2 launched and brought with it a brand new default theme by the WordPress team named Twenty Eleven!

Twenty Eleven is a really hot little theme with a lot more features under the hood than many would expect and definitely something I’ll be writing more about very soon.

However, it is also a theme that is “missing” a sidebar on posts and pages and that makes it incompatible with the needs of many of my readers… particularly for posts!

I’d been saying I was going to learn how to write a child theme for a long time so this was a great opportunity for me to get my hands messy in some code and fix this “bug” (that isn’t a bug at all).

This child theme for Twenty Eleven will first widen the default (narrow) sidebar and then cause it to not only display on the home page (default) but also on the posts.

I did not make the “correction” for pages as a sidebar template is already included. (Go into the page you want to change, in the right column, under the template dropdown, select sidebar.) Don’t worry the pink in the picture is totally changeable in the custom options for the theme, was just left over from testing.


I am aware that this is not the most elegant fix and that the comment field is a bit narrow yet and that some of the paddings could use real work – but it’s my first child theme  and it hopefully gives you the ability to start enjoying this really amazing theme. Hopefully I can get some help cleaning it up even further and release an updated version soon!

To Install:

After upgrading to WordPress 3.2, ensure that you have the Twenty Eleven theme installed as well.

Download the justaskkim-twentyeleven-0.1.3 here.

Upload, Preview & Activate (like you would any standard theme).

Now, all of the theme elements of Twenty Eleven are running as WELL as the edits. This allows upgrades to the Twenty Eleven theme without destroying the edits.

Happy WordPressing!

Kimberly Castleberry
Your Partner In Online Success


Get The Inside Scoop!
social tripletKeep up with all the latest social marketing changes!


{ 30 comments… read them below or add one }

Naser July 6, 2011 at 12:17 pm

I installed this theme but removed it again because the header does not look good.

Reply

Anson July 7, 2011 at 12:58 am

I may give twentyeleven a try, but it looks like it will be a total pain to convert the main aspects of my twentyten child theme over. That the css sheet is double the length won’t make things any easier to pour through.

Reply

Bart July 7, 2011 at 5:23 am

There is a workaround by editting 2 files in the editor. It works for single posts and single pages.

http://surminski.eu/2011/07/06/add-sidebar-to-single-post-in-the-wordpress-3-2-twentyeleven-theme/

Please note that these changes might be overwritten when wordpress is upgraded, but by that time i hope this issue is fixed in the upgrade itself.

Reply

Alan July 7, 2011 at 7:52 am

Nice post, the 2011 themes are so nice to use. Wordpress is amazing, it’s a pity Joomla is not such a pleasure to use!

Reply

Pastor Sherry July 7, 2011 at 4:36 pm

Ok, I got it. Sidebar shows up on the main page, just not on the other pages or on individual blogs. It’s funny that WordPress would do a theme that would not be of help to businesses. Haven’t upgraded yet, so haven’t tried your child theme. By the time I get around to it, you’ll have it perfect :)

Reply

Mani Viswanathan July 8, 2011 at 3:32 am

That is so odd of WP. I mean a sidebar is a must in post/pages. Else what’s the use of displaying it only on the homepage. Nice work Kim :)

Reply

KEYWORD ONLY NAME REMOVED July 8, 2011 at 11:56 pm

i must install it but i have some confusions regarding installing it because my system is not supporting this feature however i am using wordpress.

Reply

Vikas Dhavaria July 9, 2011 at 4:18 am

Why Wordpress has launched a theme without “SIDEBARS” ?????????
:(

Reply

Naser July 17, 2011 at 12:59 am

I think WordPress want us to add sidebars on our own. lol

Reply

Vikas Dhavaria July 17, 2011 at 1:12 am
Phil July 9, 2011 at 5:34 am

Hey Kim,

Just started blogging and on my 3rd theme now, each one I’ve tried has had a fatal flaw! can’t believe there’s no sidebar on my posts! what a pain!
This all looks a bit advanced for me though, will stick to writing a few posts before I change it up again.
Keep up the good work!

Reply

Kimberly Castleberry July 9, 2011 at 5:42 am

Phil if you’re enjoying the 2011 theme, this is actually a relatively easy fix. Just download the file, go to your dashboard under appearance -> themes -> upload and upload and activate this. It will run WITH the 2011 theme and give you sidebars on your post pages (it also makes the sidebar wider to better handle a lot of the social widgets we use today). I am going to patch the code soon but it does run and isn’t that hard :)
Kim

Reply

AstroGremlin July 13, 2011 at 12:15 am

If I don’t have sidebars on all pages I have no place for the ads!

Reply

Byron July 13, 2011 at 7:52 am

Hi,

I know this isn’t the right place to put this, but i couldn’t find another way on to contact you. I was wondering if you explain how you got pages to display posts. For example, when i click “Marketing” on your page it displays the posts from all the sub categories in marketing. I have been trying to do this for ages, if you don’t mind, please could explain how you did that.

Thanks
Byron

Reply

Kimberly Castleberry July 14, 2011 at 2:17 am

Hey Bryon, this is fine :)

What I have done is to use the WordPress 3.0 menu system (which most new themes support) and simply link to the category page and dropped the subcategories under it. Those are all default wp category pages, not standard “pages”. I did nothing fancy here except build a category based menu. You can see that this is even the default permalink structure because Marketing is at: http://just-ask-kim.com/category/marketing/ which is the page for that category that wp creates by default. Hope that helps!
Kim

Reply

Raielene July 16, 2011 at 6:56 pm

I’ve been trying to figure out how to make sidebars default on pages with the Twenty Eleven theme all day! I tried installing your theme, but although the main text moves over, there’s still no sidebar… just a blank white area where the sidebar should be. Help?

Reply

Kimberly Castleberry July 16, 2011 at 11:16 pm

Raielene I was able to duplicate something similar when using the sidebar set to the left hand side. Since i use a right hand sidebar I may have a coding issue that forces that for the moment. I’m not sure if change the theme option to right hand sidebar would fix your problem or not.
Kim

Reply

tven July 18, 2011 at 2:46 am

dont work

Reply

Kimberly Castleberry July 18, 2011 at 4:10 am

Are you using left side or right side sidebar Tven?
Kim

Reply

Niki July 21, 2011 at 1:21 am

Hi Kim I have followed your instructions – the text moves to the left the sidebar doesn’t show up on the right?

Thanks
Niki

Reply

Vanessa August 1, 2011 at 2:51 pm

It is saying : Does not have a valid header . What I should do?

Reply

Robin August 1, 2011 at 5:27 pm

Thanks so much… I’ve been looking everywhere for this. I uploaded it and went to install your child theme and it gave me the error message “plug in does not have valid header” or something like that. Any ideas????

Reply

Robin August 1, 2011 at 6:09 pm

I got it to work… thanks!

My sidebar is quite a bit larger than it was before now, though. Is there any way to decrease the width of it so that the post looks like the primary focus?

Reply

Shajed Evan August 10, 2011 at 5:18 pm

I was really looking for this option aside for eleven theme. But your theme is completely broken in terms of responsive web design. In content area, comments section. I think you have tried to squeeze the content area on percentage ratio. But that’s a bad approach. I am viewing this is site with iPhone and it’s complete broken. Every thin are thin and narrow. Hope you will take care on this issue.

Reply

jack September 17, 2011 at 2:34 am

I think the guy told is not correct on the Sidebar shows up on the main page, just not on the other pages or on individual blogs. It’s funny that WordPress would do a theme that would not be of help to businesses. Haven’t upgraded yet, so haven’t tried your child theme. By the time I get around to it, you’ll have it perfect

Reply

thatmauritiangirl October 18, 2011 at 8:10 am

Thank you!! It worked for me. just had to do a lil tweak with the margin. :)

Reply

Diana Stroe November 20, 2011 at 4:26 pm

Sidebar is important so a user can easily add some important things beside his/her blog posts. And looks like child theme can absolutely help us on that factor because there are lots of child theme available that can cater one’s needs. I’ll try this one out! Thanks for sharing!

Reply

Steve Bolton January 4, 2012 at 4:00 am

Great fix, I have just applied your template update and it looks great, works great, and very happy to donate, thanks for the fix!

Reply

David James August 21, 2012 at 2:08 am

Thanks for sharing! but I used this plugin for my site http://wordpress.org/extend/plugins/twenty-eleven-theme-extensions/

Reply

Kim Castleberry August 22, 2012 at 10:28 pm

Thanks for the headsup about that plugin, appreciate it David!
Kim

Reply

Leave a Comment

CommentLuv badge