Build Your Own Business Website header image

Whoops, you've found some premium content!

Watch the opening clip of this video to preview it,
the full video is available to paid members.

Part 1 – Understanding WordPress Sidebars in Genesis

Difficulty Level -

Filed Under Topics - ,

Listed Under Lesson Subjects -

Applies to -

Good evening everybody and welcome to this special seminar on Using Custom Sidebars in the Genesis theme. Tonight is the continuation of a series on Customizing Genesis Using PHP and it assumes that you saw the first lesson in this series, the Introduction to Customizing Genesis Using PHP, so I’m not going to cover ground that I covered there.

WordPress Sidebars Background

The first part of Using Custom Sidebars in WordPress is just to understand WordPress sidebars. And, as most of you who are in attendance here probably know, a sidebar is essentially code for widget area.

Back in the distant past of WordPress there were no widgets and the sidebar was a section on the page that went on the side of the page in your theme. Whatever you put in there you put by coding HTML just like you would anything else.

Advent of Widget Areas in WordPress

Then WordPress came up with widgets and widget areas and at that point, it was still assumed that really the only place you’re going to use a widget area is on the sidebar. With these you could just put some automatic blog related stuff in the sidebar.

Sidebars = Widget Areas

But, of course, WordPress has evolved from that and now there are lots of ways in which you can use what WordPress calls sidebars but are really actually widget areas.

Widget area would probably be a much more specific term to use but because sidebar is historic we talk about sidebars now even if they aren’t on the side of the page. In WordPress speak sidebar means widget area.

Historically Typical Sidebar

A typical WordPress sidebar has some sort of a wrapping element. In this case here, a div and then inside of that the sidebar is actually the ul and then below that each widget area is an li. That’s historically the typical HTML for a widget and then everything inside that widget then is inside of this li.

Current Sidebar HTML Configuration in Genesis

Well, that’s not particularly semantic and WordPress has been moving away from that. The Genesis theme doesn’t use this traditional system at all. Let’s come over and look at a widget area in Genesis.

Again, we’ll inspect the element in Firefox so we can look at the HTML in this sidebar. And the HTML starts off with a structural wrap or wrapping something, in this case it’s an aside but it’s the thing that gives it its width. Floating properties and width properties are assigned to this structural wrap.

Typical Widget Area

Here’s in an aside. Let’s take a look at another typical widget area. I’ll go to the front page and come down to the widget area in the footer. Here, is the wrapping div. This widget area above is actually one widget area that floats widgets side by side so it’s not nearly as instructive.

In this case, we have a wrapping div and so you’ve got footer widgets 1, 2 and 3. Each one of these things has the float in the widths assigned to it. That aspect of it is critical to making it responsive.

So you have the wrapping element and then each widget is a section and in each widget there is a “widget-wrap”. Then from that point on you end up with other things like an h4 for “widget-title” and the like. That’s a typical HTML configuration for widgets.

You can see it in the About page over here as well. Here we have our wrap and then each widget has a section and then inside of that is the “widget-wrap” and then whatever else there is in it. So that’s HTML.

2 Ways of Creating a Sidebar

There are two ways of creating sidebars that people who work in Genesis are generally familiar with. There is the typical WordPress way which uses the function register_sidebar and dynamic_sidebar. Unfortunately, if you know how to do that you know most of what you need to know in order to work in Genesis, except that Genesis doesn’t work that way.

Why the Typical WP Way Doesn’t Work with Genesis

Genesis doesn’t give you access to the appropriate hook to use the WordPress system and so if you were to use a standard WordPress method for adding a sidebar you would use the register_sidebar function and you would hook that to the widgets init hook. But that simply doesn’t work inside of Genesis.

Genesis System for Creating Sidebars

However, Genesis does essentially replace that system with its own and its own works just fine. If you know how to register_sidebar and use sidebars in WordPress, you know almost everything you need to know about doing it in Genesis except that instead of register_sidebar it’s genesis_register_sidebar and instead of dynamic_sidebar it’s genesis_widget_area.

Besides that they’re very similar but if you go look on and say how do I create a new sidebar, you’re going to see that doesn’t work. It doesn’t work because the way a Genesis child theme system works, you don’t end up having access to widgets init when you need it in order for you to create your own sidebars that way.

Syntax for Creating a Sidebar

The syntax for creating a sidebar in Genesis and in WordPress is two-fold. First, you have to register the sidebar and then second, you call the sidebar. You place it where you want it in the HTML. So there are always two things that you have to do when you’re going to do that.

Save $200 on Membership Now!

Start learning today for as little as
$0.82 PER DAY!
Subscription Options
0 Comments… add one
0 comments… add one