Build Your Own Business Website header image

Introduction to Creating Child Themes for Genesis 2.0 – Part 6 – Create a Custom 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.

Now that you understand how Genesis uses templates, what we’re going to do is create a totally customized front page template.

Create New PHP File

We’re going to start that by simply coming over to our byob-training and creating a new PHP file. We’re going to call it front-page. That is the WordPress naming convention for the front page template. We’ll just delete that stuff at the moment and let’s save this and upload it. Come back over to our site then over to our front page. It’s going to be blank.

It’s going to be blank because our front page template is not calling that Genesis function. So we have to actually finalize what we’re doing on this template by calling Genesis. Now if we refresh it, it looks exactly like it did before, right? And that’s because we haven’t customized anything so all we’ve done is call Genesis for a front page template but without any customization at all it has exactly the same layout.

Make the Front Page Full Width

What I want the front page to be is full width page. What we’re going to do is we’re going to put a full width feature box and then we’re going to have a full width content. Then we’re going to put a row of 3 attention boxes for featured page widgets.So when we’re done we’re going to have a full width featured box, full width content area and attention boxes and that starts by forcing this template to use a specific layout.

Force the Genesis Layout Settings

Now, I want to draw your attention to StudioPress. I’ll log in to my StudioPress account and we’re going to come down here to Developer Resources Code Snippets. I get a lot of these code snippets also from StudioPress but what we’re going to do here first is Force the Genesis Layout Settings.

So what we want to do is we want to force the full width layout and that is this bottom one, force full-width-content layout setting. I’m just going to copy this little piece of code, come back over to my front page template and add that.

Right off the bat what we’re seeing is a filter. Well, actually, let’s just save it first. And now we’ll upload it and then refresh that screen. Whoops. Let’s try that again. Well, isn’t that funny? What did I do wrong here? Front-page, add_filter, genesis_return_full_width_content.

I thought that compelled the skin to use a full width content and maybe it doesn’t. Maybe all it does is override the default setting. Sorry about that. There it is, okay so it overrides the default but your individual end user can still override that by choosing a page specific layout but our default layout is content and sidebar. And our home page layout now is this full width layout.

How a WordPress Filter Works

Now, what we have here is a WordPress function called the filter and the filter is working a couple of different ways. One of the way the filter works is that it acts like a switch and that’s what’s happening here. In this case, the filter is flipping the full width content switch for this template.

The way that works is you have the add_filter and then inside the add filter you have the name of the filter and then the function that is being used to modify the filter. And this is actually filters at its absolute simplest.

You don’t really need to understand filters in order to use this. All you really need to know is that there is a genesis_pre_get_option_site_layout filter and that filter responds to this Genesis function which is return_full_width_content, okay?

If you want to see what the genesis_full_width_content looks like, we can come over here and search for that in this project. So in layout.php, there is this function __genesis_return_full_width_content and what it does is it sends this little statement to that filter saying the page should be the full width content, that’s essentially what it does.

Andrea asks, “What does pre_get mean here?”. Well in this case, it doesn’t mean anything, right? This name of a function is a name that is meaningful to the writers of Genesis but not particularly important to you.

What it means is that this is firing before the option to get the site layout but for you it doesn’t matter. What matters is that’s the name of the filter that you’re going to use and its particular name is irrelevant except that that’s its actual name but there’s no meaning for a child theme designer in that phrase.

Next we are going to add a custom body class to the custom front page template.

0 Comments… add one
0 comments… add one

Leave a Comment