Build Your Own Business Website header image

Introduction to Creating Child Themes for Genesis 2.0 – Part 3 – Initial Setup of the Child Theme Functions File

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 we’ve got that basic bare bones child theme for Genesis 2 created, what we really want to do is add the initial setup of our functions file because right now our functions file is empty.

I’m just going to add a little note to this that “This functions file is for the BYOB Training child theme for Genesis 2.0″. This won’t work properly in Genesis 1.9 because Genesis 1.9 does not have this built-in functionality so this is for Genesis 2.0”.

Bring in Genesis Functionality

The very first thing that you do at the top of a functions file is to bring all of Genesis functionality into it. Now, this is another way in which Genesis is a little bit different than the typical WordPress system because the typical WordPress system assumes that you are adding your own functions and then falling back to parent functions. So it reads the child theme functions file first and then the parent theme functions file second. Well, because we’re using all of these Genesis tools, we actually need to load the parent functions file first.

Load the functions.php File

So that’s the very first thing we have to do on our functions.php file, is load that file. Again, the easiest way to do that is just to open up the functions file of this already set up child theme and you can see right here it says, include_once (get_template_directory( ), (get_template_directory() is a WordPress command for the parent theme directory. So (get_template_directory( ) and then go to lib and then init.php and what this is doing is if we go down to Genesis lib, it is calling right off the bat this init.php file.

This is what makes all the rest of the Genesis functions work and that’s why this is the very first thing we are doing. I’m just going to copy that, come over to our functions.php file and paste it and we now have available to us all of the Genesis functions for creating a child theme with this here.

Add HTML5 Support

Now that we have that we want to add HTML5 support and Genesis does that using this tool called add_theme_support and then ( ‘html5’ ). The add_theme_support is a WordPress function. Genesis has a corresponding theme support function that when this is called, it will then convert all the HTML that it creates to HTML 5 instead of XHTML. Let’s save this and upload our functions file now to our site, come back over and take a look at it.

Note that again we’ve got the doctype here which is the XHTML DOCTYPE not HTML5, you can see that again in the HTML tag, again in all of these divs, this is all standard XHTML stuff. But now that we’ve uploaded it when we refresh that’s all going to be changed. Now you can see that the CSS that exists for the underlying parent theme is actually being applied to this child theme. Now the . HTML now doesn’t have that XHTML stuff in there any longer, just calls out the language.

You’ve got schema stuff described and now we’ve got a whole different kind of HTML system that is created simply because we added that code add_theme_support ( ‘html5’ ). And it creates all of this built-in HTML for us including stuff like the schema, items go parole all the rest of that sort of thing. You can see that again under content where itemprop is main content and items go and stuff like that. We have this whole thing happening now because we have HTML5.

Choose the Menus for the 2 Locations

One of the things I’m going to do right off the bat is just come on over to our Appearance and Menus and we’re going to add some menus. Note that automatically Genesis creates 2 navigation menus, it creates a primary menu and a secondary navigation menu. Actually, it creates locations and so all we have to do is choose the menu that we want to go in each of those locations.

Let’s save those changes and now our menus have been added to the default location. This is the primary navigation menu, this is a secondary navigation menu. Now that we’ve added menus there you can see we now have this nav element added with “nav-primary” and another nav element added with “nav-secondary”.

All this happened simply because we added support for HTML5 and we brought in the basic Genesis functions with that include statement, with the include_once( get_template_directory() to this. All that yummy goodness is available to us because of that.

0 Comments… add one
0 comments… add one

Leave a Comment