Add Sidebar To WordPress Twenty Eleven Theme Posts

July 6, 2011 · 30 comments

in WordPress

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
Steve Bolton
Steve Bolton

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

Diana Stroe
Diana Stroe

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!

thatmauritiangirl
thatmauritiangirl

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

jack
jack

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

Shajed Evan
Shajed Evan

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.

Robin
Robin

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????

Vanessa
Vanessa

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

Niki
Niki

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

Thanks

Niki

tven
tven

dont work

Raielene
Raielene

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?

Byron
Byron

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

AstroGremlin
AstroGremlin

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

Phil
Phil

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!

Vikas Dhavaria
Vikas Dhavaria

Why Wordpress has launched a theme without "SIDEBARS" ?????????

:(

KEYWORD ONLY NAME REMOVED
KEYWORD ONLY NAME REMOVED

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.

Mani Viswanathan
Mani Viswanathan

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

Pastor Sherry
Pastor Sherry

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

Alan
Alan

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!

Anson
Anson

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.

Naser
Naser

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

Kim Castleberry
Kim Castleberry

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

Kim

Robin
Robin

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?

Kimberly Castleberry
Kimberly Castleberry

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

Kimberly Castleberry
Kimberly Castleberry

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

Kimberly Castleberry
Kimberly Castleberry

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

Naser
Naser

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