7 days of WordPress plugins, themes & templates - for free!* Unlimited asset downloads! Start 7-Day Free Trial
FREELessons: 22Length: 2.8 hours

Next lesson playing in 5 seconds

  • Overview
  • Transcript

3.9 The Footer

Welcome back. In the previous lesson, I finished building the header of our page, which is this one right here. Now I gotta take care of the sidebar and the footer. First of all, the sidebar. In order to work with sidebars, you have to register them first, and you do that inside functions.php. So let's write function number seven, which will register the widget areas. And that's how the sidebars are called. The first thing I gotta do is check if the function I wanna write already exists. So, if not function_exists and the name will be alpha_widget_init. So if the function doesn't exist we're gonna create it. function alpha_widget_init. And we're gonna trigger this function. By using a hook add_action widgets_init. This is where all the side bars are being initialized. We are gonna also fire our alpha_widget_init function. Now inside, we're gonna do this. If function_exists, register_sidebar, so with this we're basically asking if the current version of WordPress supports sidebars. And if it does, we're gonna call that function, register_sidebar, and it receives an array of elements. So, array, yeah, and we start with this. Name is going to be the main title of my sidebar. So I'm gonna make this a translatable string. I'm gonna say Main Widget Area. Next, will be an id. I'm gonna give this an id of sidebar-1. Next will be a description and the description will also be translatable. Something like this. And then we have four parameters which deal specifically with the widget. So the first one is before_widget. In here we can input the content that will appear before each widget. So in my case it's going to be a div with an id of %1$s and this will be filled in by WordPress as it generates the widgets. And then I can add a class of widget for example. Followed by this little bit, which will also be replaced by WordPress with the class for that specific widget. Okay, so this is before the widget. Next we're gonna have an after widget property. In here I'm just gonna close the div, and I'm gonna say end widget. With an HTML comment there. The third and the fourth properties deal with the widget title. So I'm gonna say, before_title. I'm gonna have an h5 with a class of widget-title and after_title. I'm gonna just close the h5. Okay, and that's it, basically. That's how you register a sidebar. Now, we have two sidebars here. We have one main sidebar which will be present right here, on the right side. And one that will be present in the footer. So, we gotta to call this function again. register_sidebar. Simply copy and paste. And, change a couple of things. It's gonna be the Footer Widget Area, with the id of sidebar-2. Appears on the footer. Class widget, I'm gonna add the class of col-sm-3. So we're gonna have four columns for the widgets and the footer. Okay, let's see, and widget, widget-title. So, let's save this. Let's go back in our appearance here. And you can see the Widgets section appeared. Click on it. And you can see Main Widget Area and Footer Widget Area, the two side bars we just created. So, now you can simply, Drag and drop widgets into those side bars. Now to display them in our page, we gotta create the sidebar.php function. So going back here, sidebar.php. File, excuse me, not the function. So, sidebar.php. Some php tags and a small description. And here, I'm gonna start with a PHP. I'm gonna say if is_active_sidebar. And we're gonna pass in sidebar-1. Which is the id of my sidebar right here. So if this is registered, then I'm gonna do an aside. Class is going to be sidebar, and also col-md-4. And this will complement the col-md-8 that you see right here. So col-md-4. Also, role we're going to say complementary. And inside, I'm going to say php dynamic_sidebar, sidebar-1, and then endif. So what we're doing here, if we have an active sidebar, then we're gonna print out some HTML. And then inside we're gonna load the actual sidebar. So let's see, in the main widget area, we have Archives and a Custom Menu. Let's refresh our page and scroll all the way down. Yeah, and notice the archives, and we should have a menu, let's see. This is the menu, save, refresh, and there it is. So this is the widget title and this is the actual widget. Okay, cool. So that is the sidebar. Now let's take care of the footer real quick. You can see we have a notice here. So the footer, really simple. Create a file called footer.php. And in here I'm going to start by closing this container and this row right here. So div end row, and this one for the container. So now, we have closed the HTML that was starting on the very top. On top of that, I'm gonna do the footer. So footer with a class of site-footer, which will contain the following, a container. So we can properly center all of the content, and then we have a sidebar. So I'm going to say php get_sidebar, and we can actually pass in an argument here. So we're gonna say footer. Now this will load sidebar-footer. And then lets add some copy right information so, div class copyright. We're gonna do a paragraph. Lets do the date. And let's only do the year. So I'm going to put a capital Y there. And then I'm going to but an anchor tag with the blog name. So a href will be echo home_url, and the text will be php bloginfo, name. Let's refresh see what we go so far. So copyright 2014 WordPress 3.9, good. And then you can also add, let's put a translatable string here like All rights reserved, and alpha. Okay, so that's the basic copyright. Let's see it. Okay, cool. Now after the footer, I'm gonna say this, php wp_footer. This is another hook, just like we used in header php. Yeah, we used wp_head. While this is wp_footer. And this will, again, load various scripts into the footer if necessary, and other WordPress related things. Okay, and after this I'm gonna close the body, which was started in header.php and HTML. Refresh. So now on the footer if we go back to widgets and we add let's say Meta into the footer. And we're gonna call it Meta. Notice it doesn't show up because we haven't created the sidebar footer.php. So, sidebar-footer.php. I'm actually going to copy the contents from sidebar.php because it's very similar. So sidebar-footer here. The footer sidebar, if is_active_sidebar, sidebar-2. I'm going to have an aside, class footer-sidebar. This grid class is no longer necessary. Since each widget in the footer will be on a separate column, I'm also going to include a div class row here. Then I make sidebar sidebar-2, save, refresh and there it is, there is the meta widget. You can add another one like search widget maybe or even a text widget. Okay, save these, refresh, and there it is. Meta, Search and test. And that's it for the footer. And in fact, for index.php we now have a fully functional index.php file. So let's take a look at the road map. Index, header, footer, these are complete. Content is complete. The next thing we gotta do is page.php which is a template for a single page. So if we go right now to let's say lorem ipsum, it still uses the index.php template. But, we're gonna write a separate one. So, I'll see you in the next lesson.

Back to the top