Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
One of the staples of WordPress is the sidebars and other widgetized areas. These areas on the site allows the owner to add custom widgets, the little display functions like what you see on the right-hand side here to display additional content. Traditionally, these widgets were always placed in the Sidebar, and the WordPress terminology still uses the term Sidebar for these areas, but today you're just as likely to find widgetized areas in the footer or elsewhere on the page. And in this movie, I'm going to show you how to add a widgetized area to the footer.
Widgets and widgetized areas allow for a high level of customization and knowing how to add them to a theme will allow you to create custom widgetized areas anywhere on the site. Out of the box underscores has one widgetized area in the right-hand sidebar and this widgetized area has some default widgets that display if you don't configure any other ones from within WordPress, including search, recent post, recent comments, and so on. The widgetized area itself is created in functions.php.
If I scroll down here, you'll find a function called Register Sidebar, and this is where I said widgetized areas are called sidebars by WordPress, but they don't have to live in the sidebar. So here you see the area sidebar has been defined. It has the ID sidebar-1, and each of the widgets have, are wrapped in a side, and each widget title has a aged one with a class widget title. Once the widgetized area is defined, it's placed in the template file called sidebar.php, and this template file starts out with a conditional statement that says, if we don't have a dynamic sidebar, so the widgetized area, add a targetssidebar-one, then show these default widgets.
If, on the other hand, the sidebar, one dynamic sidebar exists, then this function here actually outputs the sidebar. So you don't have to do the operation twice. So this conditional statement is a very shorthand version of displaying the sidebar itself. The sidebar.php template is in turn called from our main templates, so, for example, if I go to index.php and scroll to the bottom, you'll see we have a function called get_sidebar, and this function automatically calls the file sidebar.php.
Now you can create additional sidebar template files, and if you want to call them, you would simply go in here and say something like get_sidebar footer. And now this function, we'll call a file called sidebar-footer, which is what we're going to create now. To create a new widgized area, we have to go back into function.php and register a new sidebar. So here I'm going to copy out register_sidebar as it is, and then just add another instance below, and then I'm going to give it a new name, so I'll give this the name, footer widgets.
I'll set the ID to sidebar two. You can set it to whatever you like. You just have to remember what it is. I'm going to set the ID to sidebar two. I'm also going to add a description here, so I'll add a new line, say description, and then I'll put the same markup, and I'm going to leave the rest of the markup as it is because that way all the widgets on my entire side will be marked up the same way. Now that I've created my new widgitized area, I can go to the back end of WordPress and go to Widgets.
And here you'll see now I have the sidebar, and I also have the footer widgets area with the footer widgets area description. And now I can drag and drop some widgets into that area so that I can test it. And I'm going to go to my front page and then jump to a post, so I don't have to scroll so much up and down. Now, of course, just adding the widgetized area does nothing. I don't have anything in the bottom of my page, so now I need to add the actual widgetized area into my footer. What I'm going to do here is create a new sidebar file, so I'll go to my theme and go to New and PHP file and call this one sidebar footer, and this is going to be the template for the widgetized area in the footer.
Here I have to put in the markup to call in the widgetized area I just created. And if you go to the cold snippets for this movie you'll see here I have all the mark ups. So I'm going to copy it out and paste it in, and here I'm using a different type of conditional statement to test whether or not my current sidebar is active. So in sidebar.php, you'll remember we had a conditional statement that says if bang, dynamic sidebar, sidebar-1. So what this statement does is it automatically outputs the sidebar if the user has configured widgets inside WordPress, but for the footer widgets, I want all the markup that wraps around the sidebar to only display if someone has actually added in widgets in WordPress.
So therefore, instead of saying if dynamic sidebar, I'm saying if not is active sidebar so that just tests whether or not there are widgets in the sidebar currently. And if this is set to true, we automatically run the return function, which means that this template file just terminates and goes back to whatever it was called, so we don't actually run the rest of this code. The rest of this code is fairly basic. Here, we have a divider with a ID supplementary that wraps around another divider with ID footer widgets and within that, we call the dynamic sidebar with the ID sidebar two, which is what we created.
So basically, what happens here is if you add widgets to the footer sidebar, this code will display. Now I can save sidebar footer and then I have to call this template file into the footer. So then I can go to footer.php and here I can place the footer wherever I want, so I'm going to just go to, right after content here, and here I can place my footer wherever I want. So I'm going to go into the footer and then just type in a PHP delimiter. And say, get_sidebar('footer');, and this function will now call my file sidebar footer.
And if we have widgets in the footer sidebar, all this code will display. So now I can go back to my page, reload it, and if we scroll down, you see, now we have those three widgets I attached. Recent posts. The calendar and categories in my footer. And if I go back to widgets, and go to photo widgets and just pull them out again, and reload the front page, and go to post and scroll down, the widgetized area disappears. What you should take away from what you've seen is this.
Using the file name structure sidebar-something, you can create as many sidebars as you want and call them from anywhere. The same goes for header-something and footer-something as well. So now you know how to add a widgetized area into your theme. Next we're going to style all our widgets so that they look nice.
Get unlimited access to all courses for just $25/month.Become a member
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.
Your file was successfully uploaded.