wpvidZ

Learn WordPress With Video Tutorials

wpvidZ Blog WordPress themes Add sidebar widgets in Twenty Eleven theme

WordPress themes

Add sidebar widgets in Twenty Eleven theme

Last updated on
Posted on

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:

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:

 

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.

Latest Posts

Comments

  1. Markus says

    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

  2. Sueli says

    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!

    • Kimi says

      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.

  3. Mariann says

    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?

    • Kimi says

      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.

  5. Giorgio says

    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

  6. Mark P says

    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

  7. Jian says

    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

  8. Michael says

    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.

  9. Michael says

    I forgot to mention that you will have to click the Update button for the changes to be made to the selected pages.

  10. morgan says

    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

    • Kimi says

      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.

  11. chris says

    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

    • Kimi says

      Hi Chris,

      Unfortunately can’t see the code?

      and I didn’t really understand what is the thing which doesn’t load?

      Kimi

  12. Kutch-The Heaven says

    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?

  13. Kutch-The Heaven says

    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.

Comment form on this post is closed after 60 days.