Adding Widget Areas in WordPress

Zac Gordon
A free video tutorial from Zac Gordon
Expert WordPress Educator
4.4 instructor rating • 4 courses • 12,411 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] Now that we have our Sidebar set up we could look at how to convert them into widget areas. And this is where the term side bar may be a little bit misleading because when we say register sidebar what we're really doing is registering a widget area and any sort of which it can go into that. And even if we wanted to put it on somewhere else in our page we would still be calling it register sidebar so the terminology is a little bit older or not completely accurate for how wide scoping these can be used. But this is the main code that we're going to use for widget areas and where we are going to implemented in our sidebar so it makes sense there. But I just want to say at the outset that it's not limited to just working in your sidebar and you'll see how that is the case as we go through this. So always a good idea to start with the code reference checking out what's going on register sidebar is going to take an array or a string of arguments and there are a bunch of different arguments here again a little bit tricky I think to see it in this way so let's pop it open in a different view to take a look. So here is an example that we have where we are using all of the different parameters. So we have a parameter for name which is going to be the name as it appears for us to use within our admin area. We have an idea of it. This is how we're going to reference it in our template and say hey put this actual widget area or sidebar dynamic side by area or here a description which makes sense before and after the widget. So before the widget What do we want to appear Do we want a div with a class of widget too we want a section and you could see before widget an after widget are filled in there we can also add a custom class if we wanted to and before title and after title so the general format of these widget areas is that you've got your section then you've got your title and then you've got whatever is in that actual widget area appearing there. So these are the different parameters for register sidebar. Helpful to know. Check this out on your own. Just look through it till it begins to make a little sense. The next thing up is is active sidebar and this isn't exactly needed. So to say. Absolutely. But it is something that's really helpful and what this will do is we could pass in either an ID number an integer string. We could basically say hey main sidebar. Are you active. Can I use you or are you set up properly in the functions up with that register function and have stuff going on in there. And if it is then we'll know that we can go ahead and display it. And if not that we could back out and not get any potential errors from trying to display something that's not there. So the last one that we need this is just going to be a conditional tag that we run is dynamic sidebar and this is where we pass in the actual name of the sidebar that we want to get. So what we set up in this first one by saying it's actually it's going to be unique identifier so Id But we call that pretty simply not seeing a reference to it here but we'll look at it in a second in the code and that's just going to pop out our widget area and you'll see just how simple it is and how powerful it is because now you could use widgets which are great. So let's go ahead and take a look at that. Right so it started off in our function stop ph P file and come down under our menu locations and this is where we will set up our widget areas and I'm going to call them widget areas because I think that better describes what they are as opposed to just sidebars but that's up to you how you want to name that. And I'm going to create a new function called W.P. hierarchy remember all of our custom functions were named speccing in this way which basically just sets them apart from being jacked up by something else that comes along. And I'm saying widgets and net so knit if you're not familiar in programming terms refers to initialising and in general it's a name that means setting up or getting something started. So that's pretty applicable here I think. And then we have to hook into Wordpress and we haven't looked at hooks in depth but we do need a few of them and there's one called widgets and net and this is going to run. There's a certain point when Wordpress is building your page out that it says Hey let me find out all of the widgets that are set up. Well as part of that process it also has to check and see what widget areas are set up so that makes sense that when Wordpress is setting up its widgets and finding out what's available we want to look in and say hey don't forget about me. I've got a widget that I want to create. So inside of this whole function and after we set up this whole framework we can register our Sidebar and we can actually register tons of sidebars So you'll see as we go through this that we can do multiple ones like you can have a ton of different ones in here so this general wrapper will load all of them. Now how do we want to set this up. We can do something where we create args and create it that way like I showed you in the past I'm going to show you in this example how to just pass the array directly. So it's going to take a number of things. First of all it's going to take a name. So a little bit more room. And this is where we're really using a lot of these template tags that we haven't really talked about in depth. But again I've explained what this does the difference between escape underscore underscore and e is going to be one ECOs it out one just grabs it and saves it and since we are kind of just signing it here we don't want it to be Ekko down the page. I would break things. So we're going to call this main sidebar and whenever we do this we do have to add in to our namespace for theme. The next thing that comes up is the idea and we're going to call this main sidebar. Id does not have to be a number it could be but I think strings are a little bit easier to tell what it is especially when you're in a theme you could tell what's going on there. So I'm just going to indent this a little bit. The coding standards like to keep things clean. So for description let's say and scape that aged him now I will say add widgets for main sidebar here whatever message you feel is appropriate. And just so I don't have to tap's that anymore. Go ahead and say sudden I'm going to toggle off the display here just so we could see everything on one line. The next thing we have up is before widget and after widgets so before widget we want to set up a section tag and you can do it differently some people use divs. I'm just going to use a section with a class of widget. Pretty straightforward. And then we can do after widget as well. And that is simply going to be where we close out our section. Now you can put in multiple things here like it doesn't have to just be one H.T. email tag like if you wanted to do it but inside of that. Just make sure that you then close it out here in the after section. Now you might be wondering why would I use these options versus hard coding it. Remember in our head are we hardcoded nav as this as opposed to entering it in via parameter. And there's more flexibility when you enter these as a parameter because I could programmatically or you could learn to program radically change these before and after settings via your function speech P file without having to edit the actual markup so any time that you could pass that markup through the template tag etc. then that's just going to make it a little bit easier potentially. It's not necessarily going to make it easier or it's going to make it more flexible in terms of how you could customize it. So now we've got before title will make that H-2 with a class of widget title is pretty common. And then the last one down here after title and we'll close Outteridge too. That's a lot of Taipan But we now have a side bar set up. So if we ever wanted to repeat this process you could just copy this block of code paste it down here and create a new side bar area by customizing those those things. So we have a side bar set up. So if I were to come into my widgets here I could see main side bar as one of our widget areas and that is great if we wanted to add a custom one. We could do that as well. So now that we've got all this working on the back end let's come in to our actual template which I guess is still the back end but it's a little bit more front end than everything that we're doing in the setup process here. So if I come now into my sidebar here is where we're going to start customizing a little bit of what we have going on now the first thing may not make a lot of sense but it is a best practice and I'll try to explain why it is that you see this code. So what you often see at the top of your side bar is the use of is active side bar and then whatever side bar is that you're checking. So in this case we have our main sidebar and we're saying hey is this not active. So remember when we're checking conditional statements the use of the exclamation point means not. So if we did this who would say hey if this is active go ahead and do this. So what this is saying is is if main sidebar which we set up in our functions ph profile is not set up then we simply want to return and what return does in a file like this it stops right here. It never gets to all this code. So even though it's on the page if the sidebar isn't present it's not going to display any of this. And the reason is is because what comes after it may be something that depends on that code and we'll break and throw an error. So inside of this place here we can now safely assume that we can load our dynamic sidebar of main sidebar and it's a few steps here. But now you can see it's pretty simple. Most of the work comes in setting up and determining what you want to do there. But now we're going to say OK on our side bar if it's active go ahead and display it. And let's see what happens. Let's look at this through the custom Mizer we could see maybe are we still doing our splash when we come into our index. Ah. Still got sidebar splash let's remove that. OK so nothing's happening there let's come into our customize or go into widgets and add widgets for the main sidebar we can see we're in the main sidebar here. And let's just add a simple text widget. Cool. So that's working you can now work with this just like you would any other widget area super powerful super helpful and really makes sites better when you learn this little bit of code you can now code a much more customized site that will let the user add widget areas where ever they want and you could duplicate this process wherever they want as well. So let's go ahead and save this and talk about the next steps. At this point what you've got to do is follow along implement what you've learned here and now in your theme. I really want you to do something different. Go ahead and create one side bar and put in a widget area there but throw widget area down into your footer maybe throw a custom widget area into your splash top page so that someone could customize a message that would display if that is there. So try putting widget areas in more places than just your side up. Again try putting one in your footer. Try putting one in the header. Try putting one in the side bar and get really good at this because it's definitely going to make you able to code more flexible sites that are easier for people to update. So go ahead and take that challenge. Work all that out and then in the next lesson we're going to come back and finally get our actual loop up and running. We've got all of our framework we've got the whole rest of the page good to go. Let's take care of this main content area here.