1.2 WordPress Coding Basics: Widgets
In this lesson, I’ll show how to register multiple widget areas in your theme’s functions file. Then I’ll show you how to add these areas to your theme template files so you can add widgets to the theme.
1.2 WordPress Coding Basics: Widgets
[MUSIC] Hello and welcome to this Tuts+ coffee break course on adding widgets to your WordPress theme. In this course I'm gonna show you how to register widget areas in your theme functions file. And then I'll show you how to add those widget areas to your theme so they display on your site. So here we've got our starting theme, and as you can see it's a bit bare at the moment. There's no sidebar over here and there's no footer over here. And that's because there are no widget areas. So I'm going to add those. And I'm going to add them not only in the sidebar and the footer, but I'll also add one up here in the header. So that you can have something like a search box if you wanted to. So here's our theme and the format we're gonna be working in is the functions files. So I'll open that up and here I've added some commented out text ready for my Tuts+ widgets init function I'm going to copy that there. So in my function, I add the code to register all of my widget areas, and I need to hook that to something. Specifically, I hook it to the init hook. So there's my empty function ready to go. Now let's populate it. And for each widget area I am going to add a bit of commented out text telling me what the widget area is. So here I'm using the register sidebar function provided by WordPress. That takes an array of values as it's parameters. And that array of values gives WordPress all the information it needs to be able to operate my widget area. So let's add those parameters. First there's the name, which you can see I've made translatable. Then the ID, which should be unique for this widget area And then, we have the text before the widget, which here I need to add that, a div with an ID and a class, which are taken from that ID of the widget area, using placeholders. And, hang on. Realized I just need to go and edit that. And then after the widget we've got a closing div tag. And then we have before title and after title, as well. So those are my arguments for my sidebar and that registers the first sidebar that is in my header. Now at the moment that won't display anywhere on my site but if I save my functions file, I'll be able to see it in the admins screens. There's a bit of a problem. Let's go and have a look. It's probably just a syntax thing. Let's have a look at my array. I've missed out a common error. Don't you just love PHP when it does that to you? Now let's have a look at the site. There, that's better. So here, if I go to appearance. I've got access to widgets, and here's my header widget area. So I can add widgets to it. Now I'm gonna repeat that, with some other widget areas. And to make life a little bit easier, I'm gonna copy and paste this code, and then edit it for each one. So you can see here that I've added a first photo widget area. And, I'm gonna add three more. So there's all my widget areas registered. Just going back through my code and checking it I realize I have made an error here. That should be before underscore title and because I copied and pasted all that I have done it every single time. So let's just edit that. And save it. And now if we take a look at our admin screens, we can see there's widget areas. And here they are. So we've got a header widget area, a sidebar widget area, and four in the footer. And my style sheet already has styling for those widget areas in the footer so that they'll be laid out in the best way for the size of screen. So now let's go back to our site and see if we can see anything that's changed. And the answer to that is a simple no. And that's because we haven't added the code for those widget areas into our fame template files, so let's do that. And then I'm gonna start off with my header file. So here I want the header within the main header element here but to the right of that header left div. So I'll start with a conditional tag to check whether that widget area has been populated. And the active sidebar we're looking for here is our header widget area. And I'm gonna add my and if. So within that, we're gonna output the widget area. And that uses the dynamic side bar function. Again using that id. But within that I want to add a div. So how about in here? Making sure I close my PHP tags, there. So, if the sidebar has got widgets in it, if it's populated, a div will be opened with this dynamic sidebar in it, with the sidebar displayed. Div will be closed and then endif. So if that's not active, if I haven't added any widgets to it, that code won't be run. So that makes things more efficient if you add that conditional tag. So let's save the header file and take a look at the site. So the first thing I need to is add the widget to my header widget area. And I'm gonna add a search box. And then if we go into the site, you can see the search over here on the right-hand side, because that's right aligned using the styling that's already in my theme. So let's do the same thing for the sidebar. So here we are in the sidebar file in our theme, which at the moment is empty. And I'm gonna copy the code from the header and edit it. We'll copy this inside our conditional tags. So we need to change that from header widget area to sidebar. And I'm gonna change this div to an aside. So I'll save that, go back to my site, and I'm going to add a widget to that widget area. So let's add a recent posts widget. And if we go back into the site and refresh, there it is over in the sidebar. So the last thing to do is add the same thing for the footer. And here's my footer file. Now instead of going through all this again, you can see that I've already done this. But the reason nothing is showing up in the footer is because there is no widget areas in there. So let's add one. I'm going to add a text widget. So, we go back to the site. Refresh. And, there it is. So, if I add more widgets in the other widget areas, they'll display next to it. So, that's how you register side bars and add them to the theme templet files in your theme. If you want to learn more about the code I've used in this course, the function reference here on the codex for the register sidebar function will be useful. I hope you found this course useful. Thanks for watching.