Twenty Eleven Sidebar WordPress – Add sidebar widgets in Twenty Eleven theme

Twenty Eleven Sidebar WordPress – Only displayed in “Home”

Twenty Eleven sidebar is only displayed when you are viewing in “Home” or “Index” page.

If you wonder how to change your home page, you might want to see this wordpress change home page tutorial.

Actually, since I don’t use the default theme for one of my blogs, I just realized two weeks ago, that when you are viewing post or single pages, you will not have twenty eleven sidebar.

I am a bit surprised and honestly, I have no idea what is the purpose of eliminating sidebar, which is for beginners or newbies, sidebars are really important.

I guess, it would be much more helpful if there is an option, where to hide or display the sidebar, or just leave the sidebars in the post page by default, so it is more easy for the newbies if they want to have widgets on their sidebars.

Twenty Eleven Sidebar is useful for many things

Since the first day, I have a blog, I always display my sidebars, because of many things.

First reason is to display some of my recent post, popular post and also random posts. That’s the main part of my widgets. (related: best wordpress widgets)

Then others will come, such as the search form box, calendar, categories, about me section, and so many things that I can add there.

From the monetization perspective, surely, without having ability to put your text widget, you cannot add your advertisements banners or text in your blog. (related: add adsense to sidebar).

This can be really frustating if your goal of blogging is also earning some little extra money.

Tutorial to add Twenty Eleven sidebar in the post page

In today video tutorial, I will show you how to add Twenty Eleven sidebar in the post page.

Some small note that I have to mention, I move the “post navigation” which is shown as “previous” and “next” buttons under the post.

This is the screenshot of the end result:


twenty eleven sidebar

I move the "next" and "previous" link under the post

The red highlighted part is the navigation that I mentioned above, which is by default placed on the top.

However, if you don’t want to move this navigation, you can follow the video only, and stop following the part to move it.

Video tutorial:


1. Login to your cPanel and access the folder where you install your blog.

2. Open wp-content folder by double-clicking it.

3. And then open the “themes” folder.

Here, in the themes folder, I have a folder of Twenty Eleven child theme.

You can do it without the child theme, but you will have an issue when Twenty Eleven has updates, you will loose your customization, so I recommend to copy or create twenty eleven child theme.

4. In the child theme folder, in the demo, called, “MyTwentyEleven” open the “functions.php” file.

In the video, I have already a functions.php from my previous tutorial, which is resizing twenty eleven theme header.

If you add a blank file, you should add this following code (watch the video for more clearer demo!)


5. Add this code to your functions.php

add_action( 'after_setup_theme', 'my_twenty_eleven_sidebar' );
function my_twenty_eleven_sidebar() {
remove_filter( 'body_class', 'twentyeleven_body_classes' );

The screenshot from this demo:


twenty eleven sidebar

This is how functions.php look like If you just add this tutorial's code.

The screenshot if you have already some code in child theme’s functions.php

twenty eleven sidebar

This is how functions.php look like If you also have other codes already added.

The code above is to eliminate the “singular” body class. What can happen if we eliminate it?

If we don’t have a body class anymore for that post page, we can’t modify, for example having a special menu color for some specific page. Example, if I want a nav menu to have a red background, which is completely different from the rest.

Save the file.

6. Go to the parent theme, TwentyEleven folder, and look for “single.php” and then copy it to child theme folder.

7. In the child theme folder, open “single.php”

Add this <?php get_sidebar(); ?> code, right above the <?php get_footer(); ?> line (see screenshot below)

twenty eleven widget

Add the code before the <?php get_footer(); ?>

Save file.

If you don’t want to move next and previous navigation, you can stop right here, but if you want to move them, you can follow the next steps.

8. Open single.php again, and move the “<nav id=”nav-single”>” under the content.

And then, adding <div style=”clear:both;”></div> and eliminate the nav id and the assistive-text class.

Here is the screenshot of the previous and after editing of single.php

add sidebar twenty eleven

Single.php after the modification to move the next and previous link

9. Additionally, in the video, I have also changed the wording of previous and next text.

I changed “previous”, to “My previous post”, and for the “next”, I changed to “My next post”. You can change those text to anything you like.

And I can’t explain here on how to change this text, best to watch the video, it is faster:)

10. After editing the php files, I also added this line to child theme css file:

.single h1.entry-title{padding-top:0;}

This will make the post title moves up a bit that it will be in the same line as the widget.

That’s how I did add Twenty Eleven sidebar in my wordpress blog.

Share the knowledge
Share on Google+0Tweet about this on TwitterShare on Facebook0Pin on Pinterest0Share on Reddit0Email this to someonePrint this page