Adding a new widget area and Left Sidebar page template

In this tutorial you will learn how to:

  1. Add a new widget area
  2. Add a new page template
  3. Use the Bootstrap push and pull classes

All of these will be used to make a left sidebar page layout for your theme. This is a good tutorial to learn how to combine widget areas and page templates to create different layouts within WordPress.

Steps

  1. Open the functions.php file and scroll down to around line 71 to find the bootstrapwp_widgets_init function
  2. Duplicate the sidebar-1 register_sidebar. It should now look like the following:

    Notice the name and id have been changed for the left sidebar

  3. Go to Appearance -> Widgets from your WordPress Dashboard and notice the new Sidebar Left widget area
  4. Add the Text Widget to this area with some filler text
  5. Go back to your theme files and duplicate the page.php template file. Name this file template-sidebar-left.php
  6. Duplicate the sidebar.php file and name it sidebar-left.php
  7. Change the references to sidebar-1 in the sidebar-left.php file to sidebar-left. This file should look like the following:

  8. Open the template-sidebar-left.php file and add Template Name: Sidebar Left into the comments section at the top of this page. This page template should now look like the following:

  9. Now you should be able to go to your WordPress Dashboard and create a new page. In the right hand sidebar select Sidebar Left from the Templates drop down menu. Add a title and some filler content to this page.
  10. Edit the template-sidebar-left.php and add 'left' to get_sidebar at the bottom of this file. This template file should now look like the following:

  11. If you view this page in the browser you will notice the new sidebar content, but it should still be on the right side. We will fix this next.
  12. Edit the template-left-sidebar.php template and add the Bootstrap push class, col-md-push-3, where the column classes are set. This page template should now look like the following:

  13. Edit the sidebar-left.php file and add the Bootstrap pull class, col-md-pull-9, where the column classes are set. This file should now look like the following:

  14. Save both files and view the page in the browser. You should see the sidebar to the left of the content.

Notes from the Video

You can read more about the Bootstrap column ordering here.

You can also read more about all the arguments the register_sidebar function will accept on the WordPress codex here.

Feedback

Please let me know what you think of this tutorial and if you need help with anything.

  • Brad makes WordPress theme development a cinch!

  • Thanks, appreciate this video on template building. Question: with the way WordPress is insisting on theme controls in the Customizer, is there anything different we’ll need to do to add / edit widget blocks in the future? I noticed the sidebar-left did not show up in the customizer after completing this section

  • Leon Gotje

    If you want your left sidebar on the left side at your widget overview, just register this sidebar before the default one

  • CU

    I follow your tutorial and my code for template-sidebar-left.php looks like yours. When I go to WordPress to select the page template, which is working well, the drop down menu shows: “Template Name: Sidebar Left* * The template for displaying the left sidebar page.* * @package nameofmytheme” instead of just Sidebar Left.

  • ernesto

    Hi Brad,
    this morning after fallowing this tut for two days I noticed that i need to start all over again because I did not download your original files, so now reaching this episode and not messing anything(working with your files), when i select the template sidebar left the result is a white page but when i select the default everything work fine except the footer that i have to figure it out.
    PLEASE I NEED SOME HELP
    my site is http://www.ernestohc.ca
    thanks