The second part of using custom sidebars in Genesis is the process of calling the sidebar which is what we just did. So that’s the very simple method of adding a sidebar in Genesis. First, we wrote the code to register the custom sidebar and then we called the sidebar. And obviously it’s been added to every page.
Our first example tonight will be to create a 2 column widgetized bottom footer. We’ll keep the attribution in the Genesis footer just as we changed it in the Introduction to Customizing Genesis Using PHP lesson but then we’re going to create 2 widget areas for us to put something else in.
You could put images of customers on one and contact information on another. It could be used for anything but that’s what we’re going to start off with, is creating 2 widget areas.
Register the 2 Widget Areas
Obviously, that starts off here. I’m going to copy this and instead of ‘above-footer’ this is going to ‘bottom-footer-left’. The name will be ‘Bottom Footer Area – Left’ and then ‘This is the left widget area in the bottom footer’. That’s our first one.
We’ll just copy that again for our second one, ‘bottom-footer-right’, ‘Bottom Footer Area – Right’ and “This is the right widget area in the bottom footer. So we’ve registered both of those widget areas.
Place the Widget Areas Side by Side
The next thing we’re going to do is copy this. It’s going to be ‘bottom_footer_widgets’. Then we’re going to have 2 Genesis widget areas. It’ll be ‘bottom-footer-left’. Now, instead of after-post I am going to add the class “bottom-footer-left” to that. Then we’ll copy this and it’ll be “right”.
So this is the structural element that we’re going to use to give definition and margin and that sort of thing around our widget areas. That’s what this is right here. We’ve got our function byob_bottom_footer_widgets.
So we’ve got byob_bottom_footer_widgets, genesis_widget_area( ‘bottom-footer-left’ ); genesis_widget_area( ‘bottom-footer-right’ ). It’s going to take these two widget areas and put them side by side wrapped inside of this. So we can save that, upload it, reload it and now we have two widget areas.
Specify Column Widths of the Widget Areas
What we really want is these two widget areas to be half of the width of the page and side by side. You could, if you wished, use the handles that we have here ‘bottom-footer-left’ and ‘bottom-footer-right’ to control what happens there. However, as it turns out Genesis provides us with column classes that can work reasonably well for this. But we’re going to have to do a little bit of monkeying around with it.
Add Column Class for Float, Margin and Width
The column class that we’re going to use is one-half. Now, this is going to be a little less than you expect it to be. We’re adding a class that provides dimension so it’s going to make it float, it’s going to give it margin and it’s going to specify a width.
We’re giving a class that does that to our structural wrap so we’re going to save this, upload it, reload it and bummer, now they stack on top of each other and this thing pops up over here beside it.
Self Clearing Float
The first thing we want to do is wrap these in another div that we can make self-clearing. The way to do that before here, is to add another div. So we’ll call it div class= bottom-footer-widgets. Now, we did that before this one. We’re going to close this div after the second one so that the wrap wraps around both of them. We’ll put another closing div in here.
If you know about floats you’ll understand what I am doing here. The problem that we have is that these two things are floating and they aren’t going side by side for a reason that’s quite odd that I will talk to you about in a moment. Because they aren’t floating side by side they’re leaving room for this to pop up beside them.
Essentially, the thing that is containing them is collapsed and so what we’re going to do is add a self-clearing property to the div that we just created that wraps these.
Let’s reload that again. And there we go. So if we inspect this element now, you’ll see we have this “bottom-footer-widgets” div. Note that it doesn’t appear to have any height, “bottom-footer-left” does but “bottom-footer-widgets” doesn’t and that’s because it has collapsed. It’s got floating elements inside of it that haven’t cleared.
So we have a choice. We could either use p class=”attribution” clearing, essentially say clear:both which would make it go down but I think it’s better practice these days is to make the wrapper that we have here, the “bottom-footer-widgets” wrapper make that self closing.
Genesis System of Self Closing
Now, Genesis uses a system of self closing that we can find right here. You can see it’s Float Clearing and we’re using the after pseudo class. Essentially it’s this, it’s clear: both; content: blank; display: table. I’m going to copy that. Come back into our Custom CSS in the Child Theme Editor and we’ll just come down here to the bottom. It’s “bottom-footer-widgets”, copy that. So “bottom-footer-widgets”, after, that’s going to make that section self clearing which will prevent the attribution from popping up beside it.
That’s odd. Oh, I must have something I have to fix in the plugin here. I’m surprised this hasn’t showed up before but I’m getting my escape HTML showing up here. It must essentially a security feature but I need to go back in and fix that.
Instead I’m going to do this in the custom.css file until I can fix that issue. First, I have to make sure the custom.css file downloaded. It’s downloaded so I’ll open up CSS here and add that in there at the bottom.
Issues with Enterprise Child Theme Column and Margin Sizes
We’ll upload custom.css and now, it’s staying down at the bottom. When you highlight the “bottom-footer-widgets” now you can see they do have a height. So why are they sitting side by side? Well, these two are sitting side by side since we give them the class of one-half.
For whatever reason, and this is not common everywhere, Enterprise makes the width of the column and the margin of the column too big. You would assume that one-half and it’s margin would add up to 50% because they’re making the width and height of 48.717% and one half is equal to 2.564%.
This is actually 51.2% which is why that’s not working. If we take out a couple percents out of this it works just fine. So you have two options here and in Enterprise in particular, one of your options is to fix the one-half and we could fix that one-half here because the code in this is going to override the code elsewhere. I have to make it 45%.
So you can fix it in custom.css or you could submit a bug request I mean there’s all kinds of things you could do but fixing it in your custom.css like this makes it really sleek then for you because once you scale this down it stays responsive. No, I take that back. The reason it’s doing that unfortunately is that the media query is not taking precedence.
One Fix: Add Another Media Query to Change Widths
Where’s our width of this here? So our media query is right here and it is @media only so it’s this one here. We can go ahead and add our own media query. Let’s just make sure that our media query is always at the bottom of our CSS file and we’ll fix this by taking this and making it 100%.
What you’re seeing is a kind of precedence that is related to the order in which the CSS is found and in the absence of more specific CSS, the CSS that comes later is going to be the CSS that is followed. This up here overrode our media query because it came after it.
So what we are doing now is adding the media query stuff back in. Let’s just make sure the media queries are always at the bottom of our CSS file. If we reload this now, now it’s dropped back down to the full width like it should or expanded out to be half the width.
Now, there’s another way to do this without actually having to mess about with this. There’s one other solution to this. Let’s comment out that code real quickly, put the comment before that and the closing comment after it so save that.
Second Potential Fix: Change Definition in Widget
Another fix to this is to come over here to our definition and we put in our widget here. Yes, here it is one-half. We could remove the one-half from this one. If this has a width and this does not but they both float, this will collapse to fill the space available to it so we can make this one just a specific definition.
Now, there are problems with this approach but not in our situation. You can see it’s still working and if we reduce its size, it works just fine even though this one does not have the one-half assigned to it. So this one has one-half and this one doesn’t.
Why This Doesn’t Always Work
Now, I don’t think that’s the right way to do it but it is a way for this kind of content. It’s not going to work if you put an image in here that’s bigger than the space. If you do that since it doesn’t have a specified width, if that image is bigger then it’s going to force everything down below it.
But if we followed what we did in the first example where we come in here and changed the CSS, if we keep up with this then it will automatically scale images and so on. So this I think is the preferred method.
Probably with other themes it’s probably not an issue. I think this is just a mistake in Enterprise Pro. I don’t see how they could possibly imagine that adding stuff up to more than 50% made sense so I am assuming that it’s a problem that doesn’t exist in other child themes.
Options for Styling the Widgets
Obviously there’s all kinds of styling you could do here as well. Right now we’ve got these things are taking the styling in the footer. If we don’t want it to do that we could say ‘bottom-footer-widgets’ and then text-align:-left. We could do that.
Or instead you could do ‘bottom-footer-left’ and ‘bottom-footer-right’ and say on that one text-align:right. It’s possible to go in there and target the styles here individually because they each have a different class, ‘bottom-footer-left’ and ‘bottom-footer-right’. And you could style them all the same but make them different from the site footer by customizing “bottom-footer-widgets”.
That is the first real world example. The second real world example is going to be adding a content area to the front page. We’re going to add it right here using a sidebar.