How to add Twenty Seventeen Page Sidebars

Twenty Seventeen is a great default theme for WordPress with many features and options to personalize it. Unfortunately it doesn’t display a sidebar on pages, which can be important on business sites. This guide will show you how to easily add Twenty Seventeen Page Sidebars. No hacks, no child theme.

 

Page Sidebar for Twenty Seventeen

If you’ve already spent some time trying to add page sidebars to Twenty Seventeen, you might have seen posts telling you to edit the theme files or create a child theme.

Editing files of default WordPress themes is considered a hack, and while it might work for now, the change will be overwritten the next time you update the theme. You obviously don’t want that. Creating a child theme is usually the way to go when customizing default WordPress themes, but in this case it seems like a big overhead just to add a simple sidebar.

For this reason, I created a tiny plugin called Page Sidebar for Twenty Seventeen, which does all the work for you:

Just upload the plugin to your site, and the Blog Sidebar will now be displayed on all pages as well. For best results, I recommend that you go to Customize > Theme Options and set Page Layout to One Column.

This plugin also works with Twenty Seventeen child themes. If you’d rather change a template file in your child theme, you can check out the plugin on GitHub and see how I did it.

 

Add Sidebars to Individual Pages

You probably want the sidebar for some or all pages to differ from the default Twenty Seventeen Blog Sidebar. For this you can use the Content Aware Sidebars plugin; it’s completely free and lets you create an unlimited number of custom sidebars and display them on your own conditions very efficiently.

Go to Plugins > Add New on your site and search for “content aware sidebars”, then install and activate it. Alternatively you can click here to download the plugin, and then upload it to your site manually.

 

Once installed, navigate to Sidebars > Add New. On this screen, click on the “– Select content type –“ dropdown and choose Pages.

You should now see a condition like in the above image, which means that this sidebar will be displayed on All Pages. You can click on the input field and select individual pages if you like. All conditions will be saved automatically after a few seconds.

To the right you will see an Options box. Make sure that Target Sidebar is set to Blog Sidebar, as that is the one we want to replace on pages. Give your new sidebar a descriptive name, eg. Page Sidebar, and click Save in the upper right corner.

You have now created your first custom sidebar that will be displayed on pages in the Twenty Seventeen theme! Head over to the Widgets screen and add some widgets to it.

And there is even more!

 

Hide Sidebar on Pages

You will notice that if you don’t add any widgets to your new Page Sidebar, it will be completely hidden on your pages, ie. your pages will take up full width in the Twenty Seventeen theme (just like they did before). This is intentional as it allows you to effectively show and hide different sidebars on different pages and posts. No widgets, no sidebar!

How awesome is that?

 

I hope this article was useful to you, and that you can see how easy it really is to personalize the theme and get Twenty Seventeen Page Sidebars.

If you want to create a sidebar for pages written by a select author, read the Content Aware Sidebars documentation on how to display a sidebar on mixed conditions, or check out the supported sidebar conditions.

If you have any questions about getting this to work in your theme, let me know in the comments!

Share This Article

29 Comments

  • JLK says:

    Why not have the Sidebar visible for Pages also?
    Can you imagine how many people out there who is s p e n d i n g hours to solve the problem with the disappearing Sidebar?!

    And what happens when a visitor is on a Page – how can he navigate back to the other content like Posts, Comments e t c?

    I searched for the plug in “Page Sidebar for Twenty Seventeen” inside my WordPress, but no search results.
    is this the correct name, or isnt it there yet? Meaning I have to open my FTP and install it. I have no clue how to install a plug in this way.
    Which reminds me, that many of us are not professional developers. We have other jobs than trying to figure out how to make a WordPress site to function,

    • Hi!

      I can’t answer you why the developers of the Twenty Seventeen theme didn’t include a sidebar for pages, but the plugin I made will add it automatically.

      Because the Page Sidebar for TwentySeventeen plugin is hosted on GitHub and not wordpress.org, you cannot find it there. But you don’t need FTP access to install the plugin.

      In the admin dashboard on your site, just go to Plugins > Add New, and in the upper left corner you will see a Upload Plugin button. Click on that and you will be able to upload the zip file containing the plugin.

      I hope this helps.

  • How could we add the sidebar to the welcome page ?
    The plugin works very well for all other pages ! Thank You !

    • Robin Hughes says:

      I would like to know this too. Why everywhere else except the home page?

    • Because of the way the theme makes it possible to add “sections” to the front page, I didn’t know if adding the sidebar there would be too intrusive (you could of course hide it with Content Aware Sidebars).

      As it looks like this is a popular request, I will see what I can do 🙂

    • I have a development version now that works with a static front page too! However, the sidebar is only applied if the user hasn’t selected any “sections” in the customizer. It would be almost impossible to properly display a sidebar next to all sections because of the way they’re implemented.

      I want to know if this would be OK, are anyone of you using the sections on the front page?

      • Harold Gardon says:

        Hi Joachim, I am not using the sections on the front page.

        Can you help me how to add the side bar in the static front page?

        The app was awesome! It appeared in all pages and posts except for the front page! Thank you!

      • Andrew Nixon says:

        Hey Joachim, I’m not using sections on the homepage, would really like to be able to add the sidebar to the main page if possible? Many thanks

      • Mark Brown says:

        Yes that is OK with me Joachim, I’m not using sections on the front page. When will you release the version that works with static front page?

      • elaine7an says:

        I am interested in this Joachim, I’m not using sections on front page too.

      • @aurlienvernet:disqus @elaine7an:disqus @disqus_NvLUauSfpp:disqus @disqus_bYSMuOKZeU:disqus @haroldgardon:disqus @disqus_1He5VBsji3:disqus @chrisrudge:disqus

        Tagging everyone that requested front-page support to make sure you see this. Apologies for the delay.

        You can try downloading and installing this version: https://github.com/intoxstudio/twentyseventeen-page-sidebar/archive/front-page.zip

        It will add the default sidebar to the front page, unless you’re using the panel features. It will also no longer load a sidebar on pages using special Page Templates.

        To display a different sidebar on the front page, use this condition: https://dev.institute/docs/content-aware-sidebars/sidebar-conditions/static-pages/

        If you have any feedback, please reply to this thread or open an issue on Github: https://github.com/intoxstudio/twentyseventeen-page-sidebar/issues

        Thanks!

        • Martyn Hordern says:

          Hi Joachim. Thanks for doing this – have clicked on the link to download the new version and I am gettign just a blank page ? Can you assist please ?

          • Your browser ought to download a zip file automatically (hence the white screen), so check the Download folder on your pc. Otherwise try to click the link again. I hope this helps!

          • Martyn Hordern says:

            Yes it did – it was a quick download and never showed up on my browser ! tried to install it and get the following fatal error when I try to activate it Fatal error: Cannot redeclare psts_template() (previously declared in /home/thergftu/public_html/wp-content/plugins/twentyseventeen-page-sidebar-master/twentyseventeen-page-sidebar.php:53) in /home/thergftu/public_html/wp-content/plugins/twentyseventeen-page-sidebar-front-page/twentyseventeen-page-sidebar.php on line 57

          • You’ll need to deactivate and remove the old version of the plugin first, sorry about the confusion!

  • Martyn Hordern says:

    Downloaded this as only had a side bar showing on my blog page. With this and the other it adds the sidebar to other pages but not the home / welcome page which on my site is a static page. How do I get it to display a sidebar on the home page please ?

  • Lior says:

    Why do you not post your plugin to wordpress.org?
    And is there any chance you’ll make it more general so it’ll work with Twenty Sixteen too?

    • I have thought about doing that, but there are still some things I need to consider. Could you explain in more detail what you want for Twenty Sixteen? I think that theme already has page sidebars.

  • Erwin says:

    Joachim, thanks for the plugin. I would like to make the sidebar a little bit smaller. Where to tweak this?

  • Aldo E Ch says:

    Hi. Is there any way to change the relative size of #primary and #secondary without editing the .css file? Now this containers appears to be set to 58% and 37% respectively. However, I want to add a sidebar to display some ad banners 120 pixels width. Thanks!

    • While this is not possible in Page Sidebar for TwentySeventeen, WordPress allows you to add custom CSS to your theme without editing any files. Just go to Customize -> Additional CSS and add the new widths 🙂

      I hope this helps!

  • darin ayres says:

    I have an unusual problem: I cannot get rid of the sidebar on my static front page, even when using the static page condition.

    • Are you using a child theme or Twenty Seventeen itself? The sidebar on the front page ought to be hidden if you add an empty custom sidebar with a static page condition, or if you use the Panels feature in the theme.

      If you’re still having trouble, please open a thread here and I’ll gladly help you out: https://wordpress.org/support/plugin/page-sidebar-for-twentyseventeen

      • darin ayres says:

        Thank you so much for the quick response! It seems that the conditions of static pages and pages was creating an either/or scenario. Probably my fault in how I set it up. So I created two empty sidebars. One for static pages only and a second for pages only. Worked like a charm. Thanks again for your quick response!!

Leave a Reply

Your email address will not be published. Required fields are marked *

Ready to design and display widget areas the easy way?

Psst... This is a conditional widget area built with Content Aware Sidebars