Build Your Own Business Website header image

Introduction to Creating Child Themes for Genesis 2.0 – Part 8 – Add a Feature Box to the Front Page Template

Difficulty Level -

Filed Under Topics - , ,

Listed Under Lesson Subjects -

Applies to -

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.

The next thing we want to do is add a feature box to the front page template we’ve created.

Methods for Manipulating Genesis Functionality

Genesis uses 3 primary methods for manipulating the Genesis functionality. It uses templates as we’re doing right now, it uses filters as you’ve just seen and it uses hooks. Now, a hook is a place in the processing of Genesis that you can attach a function to.


It’s actually quite simple, hooks provide a placeholder where you can say okay, I’ve got this little thing I want to do and I’m going to add it to this place in the page or in the processing of Genesis.

Genesis Visual Hook Guide Plugin

There’s this terrific plugin which is actually already installed on my site here and I’m just going to show it to you. This is a terrific plugin called the Genesis Visual Hook Guide. Now, you don’t want this running while your site’s working, you’re only going to want this running during development. But one of the things it does is it produces this little thing up here and allows you to show various elements here for example, action hooks.

Add Feature Box Using an Action Hook

Once I click on action hooks here, I now see the location of various action hooks in the page and so what I want is this feature box to go below the navigation and above this here in its own special container. So I’m going to either use the genesis_after_header which is what these two nav menus are attached to or I’m going to use the genesis_before_content_sidebar_bar.

Create the Function

Now, let’s start by using that one. This is the hook we’re going to use and like we just did here before we’re going to create a new function. We’re going to call it function and byob_feature_box. In this case, instead of add_filter it’s add_action and it starts off with the name of the hook.

Then the second element is the name of the function that’s being hooked there. Okay, so we have an add_action statement that’s going to add this function to this hook.

Now, this function doesn’t have anything in it right now, right? So let’s just add Hello World here. We’ll use an echo statement, echo ‘hello world”, and check to see if it works correctly. So what’s going to happen is we’re going to have ‘hello world’ added to this hook.

Check the Location of the Hook

Let’s save it, upload it and refresh it, there’s ‘hello world’. Let’s take a look at the layout here, inspect our element, look at elements and this is actually where I want it because I’ve got the overall site-container then I’ve got a header, two navs and site-inner.

I actually want it above site-inner not inside of it so what I’m going to do instead is to take it out of site-inner and put it in a different location. And this means I’m going to use a different hook. So let’s turn the hooks back on and now we’re going to try this genesis_after_header hook. Okay so we change our hook and now ‘hello world’ is no longer in that spot. It is inside of site-container, it’s below the nav and it’s above the site-inner.

Specifying a Priority

The reason why the hook is up here but it’s below the nav is because in advance of the processing of this function, these two things had been hooked to that same hook. We’re going to talk about priority in functions here in a minute but the takeaway from this is that all things being equal without specifying a priority, the first thing that WordPress encounters gets hooked first, the second one gets hooked second and the third one gets hooked third.

So we don’t really need to specify a priority because that’s where we want it in this case. In a little while we’re going to have to specify a priority and you’ll understand why. Okay, so that is our simple hook.

Now what I really want to do is create some HTML for this and so what I’m going to do here is…actually, rather than doing it this way I’m going to exit PHP. Enter PHP again and then I’m going to create an aside class=”feature-box”. So I’ve got my aside and then I’m going to add Hello World.

And now there’s my typical HTML for this. Actually I forgot, the other thing I want to do is add a wrapper so I’m going to say div class=”wrap”. This is a very specific Genesis class.

Specifying the Width of the Page

Genesis uses “wrap” to specify the width of the page so this aside is going to be full width and “wrap” is going to follow the standard Genesis styling for a div with the class of “wrap” which is going to be the width of the page.

This is the typical WordPress way of doing this kind of thing in a template. Let’s hit save, upload that, come back over and refresh our page. Now, if we look at this, we’ve got our feature box, inside of that is a div class=”wrap” which has now moved our Hello World over into the page area and inside of that is our Hello World. So that’s our feature box.

We don’t have to type in HTML for this. We don’t have to write this kind of stuff in, all we want to do is widgetize this and that’s what we’re going to do next, we’re going to widgetize this feature box. That way you can take a widget, drop it in and put in a slider or text or any other kind of widget.

0 Comments… add one
0 comments… add one

Leave a Comment