Now that we’ve added the feature box area in our custom front page template, we are going to widgetize it.
WordPress Terminology: Sidebar Versus Widget Area
We need to start off by understanding that WordPress again has this sort of mixture of terminology. WordPress uses this terminology sidebar and widget often interchangeably which is kind of irritating.
So Genesis sometimes substitute the word widget area for sidebar and we’re going to be using Genesis’ system for creating them so you’re just going to have to manage those two words in your mind here for awhile and that you have two different kinds of things.
In order to use sidebars or widget areas in WordPress, you have to register the sidebar so you’ve got this register sidebar which has all kinds of stuff that you can add to it or subtract from it which makes it a little bit more complicated than Genesis.
And then you have dynamic sidebar which is how you call it into a location in a template. When you call dynamic sidebar you end up having to add all kinds of HTML around it in order to make it work. And in fact, the call of dynamic sidebar is confusing at best really and so we’re not going to use either register sidebar or dynamic sidebar but we’re going to use the Genesis equivalents.
Genesis Register Sidebar and Genesis Widget Area
The Genesis equivalents are genesis_register_sidebar and genesis_widget_area. We’re going to come back over here now to our functions file again or our front page. Actually, why don’t we just do it there. Let’s take this code from their little set of…okay so they don’t really have a snippet there for that so we’re going to go looking for one in our example skin.
Register the Sidebar
If we scroll down here just a little bit, you’ll see that there is this genesis_register_sidebar. So we’re going to copy one of those of theirs, come back over to our functions file because the registration of sidebars happens in function.
We’re going to call this feature-box, so its id is feature-box. This has to be all lowercase, no spaces and it should be in this format. Then we’re going to give it a name and I’m going to call it ‘Feature Box Widget Area’.
You can see this little function in here, we’re not going to talk about this today because it’s outside of the scope of the introduction but what we’re going to do is use our unique identifier here in this case. That way in the future people can use this system here for translating our skin into other languages.
In some future seminar I’ll talk about how this works but that’s why they’ve got enterprise here anytime text is supposed to be displayed. What we have is what’s called the text domain and then the text that’s going to be translated.
So here, ‘This is the widget area of the feature box on the front page.’ okay. This goes in your functions.php file. We can save this, upload it. Now come back over here to our widgets and you’re going to see we’ve got this new widget area, Feature Box Widget Area with our little description.
I think we’re just going to take another text box and we’re going to say “Hello World”, save it. If we come back over and look at our page, it’s not actually any different, it says “Hello World”, okay maybe I’ll change that “Hello Worlds” so you can tell the difference.
Add Widget Area to the Template
It’s not here because we have not added that widget area to the template yet, right? We registered it so it’s available for us to add widgets to but now we need to add it to the template. In that case, what we are going to use is our front page template. And again we’re going to create a new function. Oh no, we’re not creating a new function we’ve already got the function here but what we’re going to do is call our sidebar in this function.
Now, I’m going to show you the enterprise-pro front-page template as well here. Scroll down here and they’ve got this section here where they’re adding their widgets. They’ve registered them in the functions but they’re adding them here and this is what that looks like. It’s genesis_widget_area then the id of the widget area and then HTML that you want to happen before and after that. So I’m just going to copy this, come back over to my front page.
Now, I don’t need any of this because it’s implicit or it can be implicit in this so I’m going to just add the genesis_widget_area, the id was feature-box, right? Our id was feature-box here, that’s what we call it in register_sidebar. So now we’ll come back over and we’re going to call that id and then we’re going to give it some stuff before.
Now in this case, I’m going to say aside class=”feature-box” and then I also want to add that wrap. So div class=”wrap” and then after I’ve got my closing div and I need my closing aside. So this is going to give the same HTML result as we had before but we’re going to be using the genesis_widget_area call in order to affect it or make it happen.
Let’s save this. Now we can go to our front-page and upload it, come back to our site and now you can see Hello Worlds ended up there, right?
In fact, if we inspect the element you can see we’ve got our aside class=”feature-box”, we’ve got our div class=”wrap” which is giving us the page and then a Genesis adds all the rest of this HTML for us, the section with an id and classes and all that kind of stuff.
If we had not used the Genesis system we would have to write all this for ourselves but as it is, Genesis outputs all the rest of this HTML for us by us using that much more simplified genesis_register_sidebars and genesis_widget_area functions. So we now have added this one widget area, this feature box to our template.