Working with Sidebars in WordPress

Zac Gordon
A free video tutorial from Zac Gordon
Expert WordPress Educator
4.5 instructor rating • 4 courses • 15,891 students

Learn more from the full course

Complete WordPress Theme & Plugin Development Course [2020]

Everything you need to become a hirable WordPress Developer building custom themes and plugins

16:04:39 of on-demand video • Updated January 2020

  • PHP for WordPress - The Loop, Conditionals, Hooks and More!
  • How to Work with Child and Starter Themes Like Pro
  • The Ins and Outs of the Template Hierarchy - Always Know What File to Customize
  • How To Enqueue and Work with JavaScript and CSS in Themes
  • The Complete List of Template Tags To Use When Customizing and Extending Themes
  • A Deep Understanding of How to Use Action and Filter Hooks to Programmatically Control WordPress
  • A Solid Starter Template For Building Your Own WordPress Plugins
  • Common Practices and Techniques for Building Custom WordPress Plugins
English [Auto] Okay now that we've got our bare bones markup in there let's go ahead and look at adding in sidebars now sidebars work the same way as the header and footer. There's a custom function at Wordpress that will get the sidebar and by default it will look for the file sidebar to each piece so that's why you want to call it this. Even if your sidebar is maybe a footer area or a header you could use sidebars maybe you want to use a custom header or maybe a custom include. So I just want to say this doesn't always have to be a side bar like literally on the side it could appear be styled differently but commonly This is really used for left or right. Additional complimentary content in addition to your main area. You know what a side bar is. So let's go ahead and look at how to use this. All right so if you come back into your index Start Page remember that we have this primary Id set up and I could do a command option open bracket to close that up just to toggle it on and off you could see toggle it on and off. So a developer tool tip for you there suggest you practice. Again command option open bracket square bracket on a Mac. What we're going to do here is call page we get sidebar. Now we haven't set this up but we know the drill we know that next if we go and recreate a new page and save it as a side bar. Now we can add in a little bit of markup so I'm going to throw in an aside and give this a class of widget area. Give it a roll of complimentary and I'm going to give it an ID two of secondary so secondary as opposed to the primary here Sonoda so be at the same level wrapped inside the content. And then let's just go ahead and place a message here for now and say Place widgets here. Now if we come back to our site because we already have the CSSA set up noticed that secondary is appearing off to the side here. If we were to come down and view this as a mobile site notice that it's still appearing side to side. We haven't really done anything responsive there with it. You can if you want to but it is appearing there off to the side as we would expect. So the other thing we would expect is that we could save this sidebar as sidebar dash splash and now we could say something like sell something major sell it up folks. OK. So coming back into here now no changes right. But if we come in to our index stop ph P and put splash there notice now we've got this going on. So that's sidebars. It's pretty simple. But the real reason people use sidebars is to add widget areas. And so what we'll look at next is how to move from hard coding all that data to being able to add a widget area and have that pop up dynamically.