Customizing the WordPress Sidebar

As of now, the starter theme that we are working with has one sidebar that uses H1 tags for the titles. In this video tutorial, you will learn how to add the Bootstrap well class to the sidebar, customize the headings, and add/edit some CSS properties. You will also be introduced to one of the best development tools online, the browser Inspect Element.

Steps

  1. Adding the well class to the sidebar is pretty straight forward. Open the sidebar.php template and wrap the dynamic sidebar section with well. Your sidebar.php should now look like the following:

  2. The video then goes over how to change the H1 heading tags to H4 heading tags. To do this you need to edit the functions.php file around lines 85 and 86. The section that registers your sidebar in your functions.php should now look like the following:

    Notice the h1 tags have been changed to h4 tags.

  3. The rest of the video goes over how you can use the Inspect Element tool to customize the CSS and adjust the look of the sidebar elements. Please watch the video to learn how to use the Inspect Element tool. You will use this tool a lot!

Notes from the Video

Read more about Bootstrap Wells and the different classes you can use here.

Here is a link to the Bootstrap typography section for a quick reference.

In later tutorials you will learn how to customize the sidebar even farther. If you want a sneak peak, you can look at some of the theme demos over at GentsThemes.com. All of these changes can be done with CSS properties and HTML markup.

Feedback

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

  • Moving right along. The well class is great for targeting ‘important’ areas on the page. I used it for highlighting the products sold at the Jenny’s Farm Market site I created using StanleyWP -thanks Brad & Carlos!

  • Guy

    Everything is pristine so far except I’m still dealing with my right sidebar at the bottom of nearly all of my pages with the exception of all pages that were covered in the “Sidebar Footer” edits. Where is it that shows me how to make my sidebar appear to the right on all pages that have the sidebar? (Or just the code……?)

  • Blorriman

    Customizing the sidebar with Bootstrap panels – I know I saw it when I first watched the videos, but now I can’t find it – which video is it in?

    • As of now there isn’t a tutorial that goes over how to use Bootstrap panels with the WP sidebar. This might be a good tutorial to add though.

      Once you get comfortable with the markup you should be able to add the panels or do any other customizations.

      • Blorriman

        Thanks for the quick response, no wonder I couldn’t find it, but I thought I remembered you mentioning it.

        BTW – these are great tutorials – thanks.

        • Yeah, I think I mentioned it in one of the videos, but didn’t give you code examples on how to implement it. Glad you are enjoying the tutorials!

          • Blorriman

            No worries, I got it figured out. Now I’m working on implementing less . . . maybe you’ll consider a future tutorial.

        • mentioned at 6:35 of the video. 🙂

  • kulkarni

    Hi Brad
    I have lost “Search” title tag on sidebar. I have looked at sidebar.php & search.php, and can see getsearch query(). but dont know where the titel is coming from?
    Any help will be greatly appreciated.

    • You can set the title of each widget from the WordPress Dashboard. Go to appearance -> widgets and open the Search widget to set the title.

      • kulkarni

        Thanks

  • Mark

    Hi Brad,
    Great info in these tutorials.