This video is part of our old WP eStore Course Go to our Updated WP eStore Course for current videos.
Welcome to Lesson 11 of the Build Your Own E-Commerce Website tutorial series. The goal of this tutorial series is to show you how to create a fully functional e-commerce website using WordPress, Thesis and WP eStore.
In this lesson we’re going to flesh out the footer with custom sidebars and widgets. This is a huge lesson and we’ve got 10 parts to it. The first four parts of this lesson address PHP and CSS and assume that you have completed the introductory lessons of Customizing Thesis Like a Pro. Most importantly we’ll be doing a variation on that fourth lesson, Introduction to Making Sidebars in Thesis. So familiarity with that information in this lesson is important.
In the first part of this lesson we’ll register the new sidebars. Before we do that I want to take a look at our ultimate objective. Here’s our demonstration site that we’ve created and looked at many times. This is what we are going to be creating: four sidebars, each of them taking a widget. While this may not be exactly what you’re going to do on your site hopefully you will learn enough from this process that you’ll be able to take this information and employ it the way that you wish.
Review the Syntax
As you probably recall from our introductory lesson on the sidebars the very first thing that you have to do when creating these is to register them. So what I would like you to do is to go take a look at the code for registering sidebars. Go over to wordpress.org and then in the Search tab, search for register sidebars.
In the introductory lesson we looked at the Function Reference for register sidebar singularly. We are now going to look at register sidebars in the plural because there are some differences between them and this is a useful piece of code to understand. Select that and it says here that the register sidebars Creates multiple sidebars. The purpose for this function is to allow you to create multiple sidebars in one step that you wish to have named similarly. So what we are going to do is register_sidebars except in this case we’re going to say how many sidebars we want to register and then we are going to place our arguments.
Register the Sidebars
We are going to copy this thing here register sidebars all the way to the semi-colon; copy that. Open up our custom_functions.php file. This is my custom_functions.php file that I did for Lesson 9. I’m going to change this to Lesson 11 and here is that search that we did in a previous lesson.
Now we are going to register our sidebars below that. So let’s give ourselves a couple of spaces, paste. While I’m at that I’m going to add the comment – This registers the footer sidebars. Okay, so it is register_sidebars.
Notice that we are not going to put this inside of a function. The reason is that it is going to be automatically called when WordPress calls our custom_functions.php file which is very early on in the process of rendering a page. It doesn’t need a function call because it’s going to be called every time. We’re just going to create 4 so we’ll put the 4 in there and then the args we’re going to add above this. We need to define the variable args before it goes through this process.
Let’s go back over to the Function Reference here and here are the arguments. We’re going to capture all of these arguments here from args down to the semi-colon; copy those. Come back over to our custom_functions.php file and paste them; give ourselves another space. So here we are args equals array and the array has a name. This is the name of our sidebar. Now we’re going to replace this extra text here and it’s not going to be Sidebar, it’s going to be Footer Sidebar. The name is Footer Sidebar and this little thing is going to change its number for each instance of this Footer Sidebar. It’s going to take this number 4 and the first time it prints it’ll be 1, and then 2, then 3 and then 4. If we had 50 it would build 1 through 50 there.
Then we are going to simply remove the id – we don’t need to reference the id because we’re going to use the name. Then in before_widget in the same way that we did this in the earlier lesson we are going to keep this id code and code the same. This is exactly the way it works in Thesis and so this will allow us to maintain a similar styling. That’s before the widget and then after the widget stays li, and then before the title and as you may recall from the last lesson in Thesis we’ll take this and delete this class=widgettitle and just make it an h3. Go ahead and make that an h3 and this is going to create four sidebars for us and that’s all we have to do to create those.
Save this. Let’s open up Filezilla – log on to our site – thesisestore11 – go to themes, thesis18, custom, custom_functions.php and upload. Yes, we are going to always overwrite. Then in Firefox – I think it probably makes the most sense to do this in Firefox – here’s what it looks like right now.
Go ahead and log into the Dashboard. So wp, hyphen, admin, and that is – here we are in our Dashboard – if we come down here to Appearance and Widgets you can see now that we have Footer Sidebar 1, Footer Sidebar 2, Footer Sidebar 3 and Footer Sidebar 4. All of those footers were created using that piece of code that we just did.
If we go over and take a look at it on the site – Open link in new tab –you will see that nothing looks different and that’s because we haven’t done the second step which is creating the dynamic sidebars and then hooking it to the right spot.
That wraps up Part 1 of Lesson 11, Register the Sidebars, on creating the fat footer with custom sidebars and widgets.