Build Your Own Business Website header image

Introduction to Creating Child Themes for Genesis 2.0 – Part 2 – Create a Bare Bones Child Theme

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.

You now know that there’s an entire system of functionality that is built-in to the Genesis 2 parent theme that can be accessed from a child theme. So, let’s get started by creating a child theme.

Tools You’ll Need to Use

If you are going to create your own child theme in Genesis you have to start with some kind of a code editor, right? This is not something you’re going to do inside of WordPress, it’s not something you’re going to do with a plain text editor, you’re going to want to use some kind of an error checking code editor.

A Code Editor Like NetBeans

I happen to like NetBeans as my code editor but there are other tools out there that you can use but the tool that I’m going to be using in the course of this is NetBeans.

An FTP Manager Like FileZilla

You also are going to do all of your coding on your local machine and then upload those code changes to the WordPress site. So you’re also going to be using some kind of a file manager, an FTP manager and I recommend using FileZilla but there are other FTP systems out there that are available.

Benefits of NetBeans and FileZilla

NetBeans and FileZilla happen to be free and they work on both the Mac and on the PC and that’s one of the reasons why I like to use these two tools because regardless of what platform you’re working on, you can follow along with me.

Our Genesis 2 Child Theme Project

I’m working in a Genesis 2 project that has the familiar wp-content and then directory and then the themes directory and this is connected up to my Genesis test site which is this one right here, childtheme.byobgenesis.com.

At the moment what we have is just the default Genesis installed here and without any child theme being activated whatsoever. In your themes directory you’re going to have the Genesis theme installed first and then you’re going to have some number of other themes.

Create a Directory

A child theme installs just like a regular theme except that it’s dependent upon having Genesis installed for its functionality. So in order for us to create a bare bones child theme, what we have to do is start off by creating a directory so that’s what I’m going to do. I’m going to create a new folder and we’re going to call it “byob-training” and create that directory.

Minimum Necessary Files for a Child Theme

The child theme has some minimum elements to it. The child theme needs a screenshot which is a png that is 880 pixels wide by 660 pixels long. I have such a screenshot created already.

Screenshot.png

It has to be named screenshot.png and it needs to be 880 x 660. I’m going to go ahead and just copy that here and put that in my new child theme.

Style CSS File

Then it needs a style CSS file so we’re going to create a new cascading stylesheet that needs to be named style.css.

Functions File

And it doesn’t absolutely need but for the purposes of what we’re doing it needs a functions file and that is a PHP file and we’re going to just create a new one of those. That will be a new PHP file and we’re going to call it functions.php.

So these 3 files are really the minimum necessary for a functioning child theme and they don’t have any content in them so they don’t actually serve as a functioning child theme yet.

Style.css Requirements

Style.css needs a very specific kind of header. Now, I think one of the easiest ways to get a header for style.css is to simply borrow it from another child theme.

Specific Header

I have Enterprise Pro in this project and so if I come down to enterprise-pro and open up style.css, I’m going to copy this header from the style.css file inside of enterprise-pro and paste it at the top of my style.css file.

Theme Name and URI

This has some very important elements to it. First one is the theme name, obviously this is going to be the BYOB Training Theme and then it needs the theme URI. Now this is the place where the theme can be seen. I’m going to use this demonstration site as my theme URI. So I’m going to copy that URL and then replace this so there’s the theme URI. This is the place where the theme can be seen functioning.

Description and Author

Then I need to add a description and I’m going to add, “A mobile responsive HTML5 theme built to teach how to create child themes for the Genesis Framework”. And then for the author this is your own name and then author URI is your website address in this case, it’s byobwebsite.

Version Number

A version number is used for things like automatic updates and things like that, I’m going to say 0.1 because we’re going to say this is in a beta version.

Template Name

This tag here is really not something that you need to worry about yourself when you’re creating your own child theme because this is something that exists and is used by StudioPress in its system for sorting themes when it shows them. It’s not an absolutely essential aspect of a child theme.

However, this template Genesis is the name of the parent theme and if you don’t have that exactly like this then the child theme is not going to install correctly. So you want to say Template: genesis and right now we’re actually working with a Genesis version 2.0.

I don’t really know why they did that but we’re just going to say 2.0 for theme version because that’s actually the version of Genesis that we’re using.

License and License URI

Then you have a license and a license URI which is where people can go to see that license. So this is the absolute minimum necessary for a WordPress child theme stylesheet.

How it’s Different from Standard WordPress

Now, if I was going to make this a child theme of TwentyFourteen then I can just come along here and type in TwentyFourteen and it would be that instead, right? This is how WordPress knows that this is a child theme for Genesis as opposed to something else.

Now, in standard WordPress system, what you would do now is put an @import statement here to bring in the parent child themes CSS file. Genesis suggests that you not do that because Genesis wants to preserve the ability for the underlying parent theme CSS file to change and so they recommend that you not do that. And we’re not going to do that here at the moment.

View the New Files in FileZilla

In fact, what we’re going to do is just save this right now and refresh FileZilla. So FileZilla sees that we have byob-training here and this is my child theme website. I’m going to upload that byob-training into the wp-content themes folder of that site.

Review Theme in Themes Dashboard

Let’s come over here now to the themes dashboard. You can see here is my BYOB Training Theme and if we look at theme details it’s by Rick Anderson, if you click on that it will link us off, here’s the version number. It says, “This is a child theme of Genesis”, right?

We didn’t write that, WordPress got that from our template description and it says, “A mobile responsive HTML5 theme built to teach how to create child themes for the Genesis Framework”.

Upload style.css

If we activate the child theme now and come take a look at it, it’s blank, right? I mean it’s got the content in it but it doesn’t have any styling and that’s because we didn’t include the style.css file of the parent theme. And we didn’t do that because that’s what Genesis recommends you not to do.

So what we’re going to do is come back over here, open up style.css for Genesis and copy its contents in. Note this warning here, “WARNING – Please read the notice below: This file is part of the core Genesis Framework. DO NOT edit this file under any circumstances. Please do all modifications in the form of a child theme. Copy the contents of this file to the child theme. Do not use @import as the CSS included with Genesis might change in the future.”

So this is the way in which a typical WordPress child theme is different from a Genesis child theme.

What we’re going to do is just copy all of this, come over to our style.css file, paste it. Then we’re going to delete the header and the warning but we’re going to keep the table of contents because we’ve copied all of that CSS stuff over, right? Okay, we’ll save that again.

Now we open up byob-training and we’ll upload style.css again and now we’re going to have some styling. This is all the same CSS as it was being used in the standard theme but note how different it looks.

HTML and HTML 5 Issue

It looks different because the Genesis framework is an HTML5 based theme and its CSS is HTML5 based but the HTML that it is generating at the moment is not HTML5. We’re going to look at how to make it turn into HTML5 so it starts looking appropriate here in just a moment but I want you to understand that’s what’s going on here.

In fact, if we take a look at our structure for a second, you can see that the HTML here is the HTML4 version so that’s kind of a doc type instead of HTML5 doctype. It’s got a different HTML tag up here then it has the div id of “wrap”, a div id of “header”, div id of “inner”, div id of “footer”, div id of “content-sidebar-wrap” and “content”.

None of the HTML5 elements that are built-in to Genesis are actually here and that’s because by default even though Genesis is an HTML5 theme, by default it generates HTML until you tell it to do otherwise.

Add an Images Folder

We’re going to do that in just a moment but there’s one last thing I want to add to our child theme and that’s an images folder. The typical mechanism for adding header images in Genesis is to add them to the images folder and then give them a specific name. I think it’s header.png or something like that.

You’re going to want this images folder in order to be able to put a header image into it in order for the default Genesis system to work properly. Let’s refresh that for a moment, upload our images folder, now you have the basic bare bones child theme set up for Genesis 2.0.

0 Comments… add one
0 comments… add one

Leave a Comment