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 3 – Insert Custom Sidebars in Genesis

Difficulty Level -

Filed Under Topics - ,

Listed Under Lesson Subjects -

Applies to -

The second part of using custom sidebars in Genesis is the process of calling the sidebar. We did the first part where we wrote the code to register the sidebar and uploaded it to the side but when we refresh our page, it doesn’t matter that we’ve got a registered sidebar, it’s not showing up anywhere.

Calling the Sidebar to a Page or Template

The only way it can show up some place is if we call it and add it to either a page or a template or the whole site. The first part was register the sidebar and then the second part is to display the sidebar or add the sidebar.

What I’m going to do is I’m going to grab the Studio Press function from that How to Register a Widget Area tutorial. This isn’t exactly what I want but I’m going to grab it for the moment and come down here to our functions. I’ll add it here.

This is add_action ‘genesis_after_post_content’. For the moment we’ll just add it to the footer. Copy that, so ‘genesis_footer’ and then there’s this function. I’m just going to say byob_test_widget, that’ll be the name of this function. We’re going to throw this away after a little while anyway.

We’re going to take the if statement out of this because we don’t really care about it at this point. Let’s see ‘after-post’, array. I need one more don’t I? There we go. So we’ve got our function name and then we have this call.

ID of Sidebar and Array

In WordPress this is dynamic_sidebar but in Genesis it’s genesis_widget_area and then it takes 2 elements. It takes the id of the sidebar so instead of ‘after-post’ it’s going to be ‘above-footer’ and then it takes an array of ‘before’ and ‘after’.

I’m just going to leave these things alone for the moment just to demonstrate how this actually works. So it’s just genesis_widget_area, the id of the widget area and then the array of stuff ‘before’ and ‘after’.

I want you to see how simple this is. The ‘before’ and ‘after’ is the structural wrapping element. When I was talking about the different pieces of the HTML for the sidebar, this is the structural wrapping part of it.

Review the Widget Area on the Site

Let’s go ahead and upload that and reload it. Nothing is showing up there because we haven’t put anything in that widget area. I’ve got a widget down here that I’m going to use for the moment. Now if we reload it you’ll see it showing up down here.

Let’s inspect it. Here’s the structural wrap we gave it, “after-post widget-area”, that’s this. Then this section and the id and the class were automatically added by Genesis and WordPress. Then this “widget-wrap” was automatically added by Genesis and then everything else in here, “widgettitle” and the rest was all automatically added by Genesis and WordPress.

We can change these things and I’ll show you how to do that in the final example tonight but if we do it the way I’ve just shown then you’re going to get the structural wrapper as defined there. And each widget will be in a section and each section will have a “widget-wrap” inside of it and “widget-title” as the class of the title itself.

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