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 6 – Create a Custom Template with a Custom Sidebar in Genesis

Difficulty Level -

Filed Under Topics - , , ,

Listed Under Lesson Subjects -

Applies to -

The next thing we’re going to do in this Custom Templates for the Genesis theme lesson is create a custom template that has an entirely different sidebar. It’s got the typical Genesis header and typical setup except that this sidebar goes way and a different sidebar is there.

Why Create a Template with a Custom Sidebar?

I know that there are plugins that allow you to do this but if you are a web designer and you have to tell your client to choose different sidebars depending upon what they are going to write about, it can get confusing.

In my opinion that can be very difficult to communicate accurately. Since people find that kind of thing confusing, I think it’s better if you’re going to have to have a custom sidebar in some applications to just add that sidebar to a template instead. Then they can simply choose the template that’s right for the topic.

Create the Template File

So, that’s what we’re going to do here now. Let’s copy this custom template with the widgetized header that we just created. Paste it in the my-templates folder and then what we’re going to do is name it something that would make sense to the client, like Projects Template.

Naming Custom Templates

Let’s open it up and we’re just going to take all of this header code out because that’s not what we’re working on anymore. And, as I said, we’ll name it Projects Template.

This is a name that’s meaningful to the client so if they’ve got a bunch of pages that are the same but they’re for projects then they need to be different than other pages. That’s what you would do this for, so this is assuming that your client’s got a kind of template and Projects Template would be meaningful to them.

Register the Sidebar

Let’s save that and then we need, of course, to register our new sidebar under custom-functions.php. In this case, we’ll take the standard sidebar code and paste that here and we’ll call id ‘projects-sidebar’ and then the name, ‘Projects Sidebar’.

Actually, let’s just take a quick look and see what the rest of Genesis sidebars name are. So you’ve got Primary Sidebar, Secondary Sidebar. Let’s call this one ‘Projects Sidebar’ and ‘This is the sidebar that replaces the primary sidebar on the Projects template’. So we’re going to register this sidebar here.

Refresh this and I’m going to upload custom-functions.php so that we get our sidebar. Here it is, Projects Sidebar. What I’m going to do for demonstration purposes is put a login form there because really I’m just showing you what it would look like if we swap the sidebars out.

Replace Primary Sidebar with Custom Sidebar

Then as you may guess, what we have to do is remove the primary sidebar from its location and replace it with the new sidebar.

Remove Hooks and Functions

The very first thing really is that remove_action and we need the hook name and the function name. Let’s look at the hook name here, go to hooks and action hooks. This is the genesis_before_sidebar_widget_area hook that is firing and the function of this is genesis_primary_sidebar.

I’m just going to double check that very quickly. This is it here, that’s the genesis_register_widget_area. Sorry, I thought I knew what the right answer to this question was.

Back to the primary sidebar. Okay, genesis_register_widget_area and I’m looking for primary sidebar. Oh, the id is just ‘sidebar’ and ‘sidebar-alt’ it’s a mistake I was making. I should have searched for this pardon me, not ‘sidebar’ but that.

Let’s do this one more time, sidebar.php, add_action( ‘genesis_sidebar’, ‘genesis_do_sidebar’ ), this is the hook and this is the function ‘genesis_do_sidebar’. So what we’re going to do is remove_action( ‘genesis_sidebar’, that’s the hook and then the function is ‘genesis_do_sidebar’ ). There we go, ‘genesis_do_sidebar’. So that’s going to remove the ‘genesis_do_sidebar’ from there.

Add an Action to the Sidebar

Then what we’re going to do is add the action to add our sidebar in that same location. Well actually, widget-header would work. This is it here. We’ve removed that action, now we’re going to add an action and we’re going to say byob_projects_sidebar. So that’s the function we’re adding and we’re adding it to ‘genesis_sidebar’.

Then we’re not adding the ‘full-width-header’ of course, we are adding the ‘projects-sidebar’ and let’s change up the HTML on this also. We’ll just go look at the standard HTML in this. It’s an aside class=”sidebar”.

We’ll go ahead and leave “sidebar-primary” as that but really, what we’re going to do copy part of this and repeat it. So aside class=”sidebar sidebar-primary widget-area” role=”complimentary”. In fact, I bet you that widget where I was in just a moment ago was set for me just to copy and paste. Themes, genesis, library, widgets, widgets.php, no that wasn’t it. This is what it was.

Let’s do it just like this because I think actually that aside comes in. Let’s go to a different page. I think we have to do this ourselves so aside class=”sidebar sidebar-primary-widget-area”. We’re just going to do that and see how it turns out.

Then what we’ll do is come back over to our Projects page and we’ll edit it. Let’s choose a different template. Now it’s going to be Projects Template and view that page. There’s our login link here and let’s compare that HTML just to make sure the HTML turned out correctly.

I guess we didn’t need that before or after did we? Because it did get the aside automatically so we could leave the before and after out of this entirely, I think, now that I say that out loud. Let’s try that. So it’s got the aside and that and then section id. So it’s pretty much adding just all the default wrap that automatically happens here. If you go over to a different page of course, that login form isn’t there, it’s going to be there on the Projects Template only.

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