wpvidZ

Learn WordPress With Video Tutorials

  • Blog
  • Browse
    • Backup & Restore
    • WordPress Localhost
    • WordPress Hosting
    • WordPress themes
    • Version Updates
    • Plugin Tips
    • Security
    • Tutorials
    • WordPress SEO
    • WP Miscellaneous
    • Sitemap
  • WP 5+ Tutorial
  • Search
wpvidZ Blog WordPress themes Add sidebar widgets in Twenty Eleven theme

WordPress themes

Add sidebar widgets in Twenty Eleven theme

Last updated on February 18, 2017
Posted on August 15, 2011

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:

  • Is my site loading fast? I use this shared hosting
  • Try my theme >

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.

eleven page twenty twenty eleven wp3.2

Latest Posts

  • Twenty Nineteen Theme Full Tutorial – Creating a Website
  • Uninstall W3 Total Cache Plugin – Incredibly Easy!
  • Create WordPress Website 2018 on SiteGround Genesis
  • WordPress Noopener Noreferrer Rel Attribute Quick Fix
  • WordPress CDN Setup with MaxCDN and W3 Total Cache Plugin
  • Twenty Seventeen One Page Parallax Scrolling Website Style
  • How To Add Google Map in WordPress Contact Page
  • WordPress 4.7 Justify Text and Underline
  • Twenty Seventeen Footer “Proudly Powered By WordPress” Text
  • How To Add YouTube Subscribe Button To WordPress Website
← How to remove Twenty Eleven Search Form from Header
→ Twenty Eleven thumbnail or show Set Featured Image in WP 3.2 theme

Comments

  1. Markus says

    August 25, 2011 at 1:32 pm

    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

    August 29, 2011 at 8:04 pm

    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

      August 31, 2011 at 5:12 pm

      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

    August 30, 2011 at 3:58 pm

    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

      August 31, 2011 at 5:11 pm

      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.

  4. kukung says

    September 3, 2011 at 4:53 pm

    thanks you, great tutorials

  5. Giorgio says

    September 4, 2011 at 12:19 am

    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

    • Kimi says

      September 6, 2011 at 7:27 pm

      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

  6. Mark P says

    September 4, 2011 at 4:05 am

    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

    • Kimi says

      September 5, 2011 at 6:40 pm

      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.

      • Mark P says

        September 6, 2011 at 2:54 am

        Hi Kimi, I got it figured out… thank-you for the tutorial and for the troubleshooting help…

        • Kimi says

          September 6, 2011 at 7:24 pm

          Hi Mark!

          Glad you figured it out!

          Kind regards

          Kimi

  7. Jian says

    September 28, 2011 at 1:21 am

    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

    • agathis says

      October 4, 2011 at 12:36 pm

      do the same manipulation with page.php file 🙂

      Kim, thanks for the tutorial!

  8. Michael says

    October 7, 2011 at 6:40 am

    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.

    • Kimi says

      October 8, 2011 at 8:58 am

      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

  9. Michael says

    October 7, 2011 at 6:44 am

    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

    January 31, 2012 at 7:09 pm

    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

      January 31, 2012 at 8:54 pm

      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

    April 6, 2012 at 5:30 pm

    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

      April 7, 2012 at 9:42 am

      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

    April 15, 2012 at 8:36 am

    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?

    • Kimi says

      April 15, 2012 at 11:05 am

      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.

  13. Kutch-The Heaven says

    April 15, 2012 at 11:31 am

    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.

    • Kimi says

      April 19, 2012 at 5:49 pm

      HI

      Please check this newest tutorial: https://www.wpvidz.com/plugin-to-modify-twenty-eleven-theme/

      Kimi

Comment form on this post is closed after 60 days.

Search

Worth Reading

  • Twenty Nineteen theme tutorialTwenty Nineteen Theme Full Tutorial - Creating a Website
  • Twenty Seventeen One Page ParallaxTwenty Seventeen One Page Parallax Scrolling Website Style
  • Twenty Seventeen Proudly Powered By WordPress codeTwenty Seventeen Footer "Proudly Powered By WordPress" Text
  • Where your child theme folder should be located inside themesHow To Create WordPress Child Theme Manually or With Plugin
  • How to Remove Twenty Fourteen Author Name or Link
  • How I add thumbnails with Twenty Twelve theme
  • Change Default Green Color WP 2014 Theme
  • Showing Twenty Fourteen Thumbnail in A Smaller Size
  • How To Style WordPress Caption in WP Twenty Fourteen Child
  • Proudly Powered By WordPress Twenty Fourteen

Backup & Restore

Backup WordPress Without a Plugin or FTP

Export WordPress Database using phpMyAdmin

BigDump Alternative – When BigDump Failed Importing Large WP Database

At This Place The Current Query Includes More Than 300 Dump Lines

View All..

Live Online Website

View All..

Offline Installation

How to Upload WordPress localhost to live server manually

Steps to Install WordPress on Windows 8 and WAMP 2.4

Install WordPress on Mavericks OS X 2014

Maximum upload file size in WAMP WordPress

View All..


WPvidz Hosting Image

  • About Me
  • Contact
  • Affiliate Disclosure
  • Privacy Policy
  • Term of Use

Copyright© 2023 wpvidz.com SG2021 | sitemap.xml


WPvidz.com is independent from WordPress.org but is proudly powered by WordPress & its block-based editor (Gutenberg)

WpvidZ.com uses cookies" to give you the best browsing experience possible. If you click "I Accept" below then you are consenting to this. For more information about your privacy settings on this website, please visit the Privacy Policy page. I Accept