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:
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:
Steps:
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!)
<?php
?>
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:
The screenshot if you have already some code in child theme’s functions.php
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)
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
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.
Dear Kimi,
I just want to thank you for this great tutorial, it worked like a charm, and it covered exactly what I needed!
Best regards
Markus
Hi Kimi,
You read my mind. Today I was going to figure out how to do exactly what you cover on this tutorial: display a sidebar on the posts so I can add widgets there.
You saved me a lot of time. Your tutorials are the best! Very well explained!
Thanks again!
Hi Sueli!!
I am glad I can explained clearly 🙂 and that you were also thinking about displaying a sidebar in the posts.
Thank you for the nice words and for coming accross
Best wishes
Kimi.
Hi! Thank you for your great tutorials. I was wondering, what kind of file manager do you use? I try to find a plug-in that works the way yours does, but I’m unable to add new folders in them. What am i doing wrong?
Hi Mariann,
Welcome to my blog. The file manager is actually a cPanel of a sharedhosting.
What kind of plugin you want to add folder? sorry I don’t understand your next question 🙁
Kimi.
thanks you, great tutorials
Dear Kimi,
First of all I thank you very much for being so clear and helpful for a newbie like me! Secondly, I beg your pardon but I have a question: it looks like this code
.single h1.entry-title{padding-top:0;}
doesn’t work for all the titles, like the ones in pages.
What code shall I use in order to move al the titles a bit upwards?
Cheers,
G
Hi Giorgio,
Welcome to my blog 🙂
I have posted a quick video tutorial in this matter, here is a quick link:
https://www.wpvidz.com/sidebar-on-pages-wordpress-3-2-1-video-tutorial/
I hope this will help
Kimi
Hi there, thanks so much for the tutorial but it isnt working for me… I followed your instructions to a “T” and even created the child them successfully but nothing has changed on my post pages… what am I doing wrong????
Thanks alot
Hi Mark!
Welcome to my blog 🙂
I have tried this tutorial again just now, and it actually worked.
One thing that may cause it, try not to exact copy, but to type the code, it will work.
Let me know if this helps
Kimi.
Hi Kimi, I got it figured out… thank-you for the tutorial and for the troubleshooting help…
Hi Mark!
Glad you figured it out!
Kind regards
Kimi
Hi, Kimi,
Thank you for your great tutorials. I successfully added sidebar to the post page. Now I am wondering if you may help me to add the sidebar to all the static pages.
Best Regards,
Jian
do the same manipulation with page.php file 🙂
Kim, thanks for the tutorial!
Hi Kimi,
Thanks for the great tutorials on your site. I just want to mention that Twenty Eleven has the ability to use a template called Sidebar Template that is built into the theme. You can either choose to use it when you write a post or for multiple pages using Bulk actions. Just go to All Pages, check the pages you want, choose Edit from the Bulk Actions dropdown, click Apply, and chose Sidebar Template from the template choices.
Hi Michael!
True, it can be done faster in the theme option and choose “sidebar template” in the drop down menu.
Actually, I have posted the “similar” post with Twenty Ten theme about this feature:
https://www.wpvidz.com/wordpress-page-no-sidebar-wordpress-3-0-1-tutorial/
Thanks Michael for the catch
Kimi
I forgot to mention that you will have to click the Update button for the changes to be made to the selected pages.
Hi Kimi,
Thanks for your tutorials! I have a questions, and I might be missing something really obvious here, but I copied the single.php into my child theme, and opened it, and it’s blank….
…what am I missing?
All the best,
Morgan
Hi Morgan,
I would check again if the file is really copied from the original? are you working in cPanel? because sometimes it happens to me, that I copy a file in a wrong folder.
Kimi.
Hi Kimi! Thank you for your support. I would like to ask you about a problem. I have made the changes to my sidebar as you said, but after when i put this code to count the post views the page dosen load. The code is:
thank you
Hi Chris,
Unfortunately can’t see the code?
and I didn’t really understand what is the thing which doesn’t load?
Kimi
Hi,
I added the code in single.php.Please see my site for the result.I want the same sidebar content as it is on the homepage for all the rest of the pages.After adding i am not getting any sidebar content.It is blank.How do i get all the widgets there?
Hello there,
With pages, it works by default by selecting template in the right side (in admin page) with “a sidebar”.
This post will help you doing that, but instead choosing “no sidebar” choose with one sidebar.
https://www.wpvidz.com/wordpress-page-no-sidebar-wordpress-3-0-1-tutorial/
I hope it helps
Kimi.
Hi Kimi,
Thanks for the reply but i dont have any option like template in admin page.It is showing only Parent & order box in page attributes everywhere & it is twenty eleven child theme on my blog.
Kindly help.
HI
Please check this newest tutorial: https://www.wpvidz.com/plugin-to-modify-twenty-eleven-theme/
Kimi