Build Your Own Business Website header image

Introduction to Creating Child Themes for Genesis 2.0 – Part 5 – Understanding WordPress Templates in Genesis

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 added support for the footer widgets, we’re going to start talking about templates because right now, this child theme we’re creating has all the built-in Genesis 2 functionality.

Genesis Page Layout Function

Let’s edit the page, for example. We could come along to our home page here and let’s say that I want this one to be a 1 column layout or full width layout. We could say update to that, view our page and now it’s full width, right? We could do the same thing with it, we could come along and say instead of full width let’s make it 2 sidebars on the left.

So this page layout function is built-in to Genesis and it comes along automatically as soon as you include the functions file and this is not dependent upon a template. This is a layout that gets set and it gets set in every page and at this point we don’t have any really specialized templates.

WordPress Templates

But before we start talking about Genesis templates I want to talk about WordPress templates. Now, WordPress templates are really made up of two pieces. They’re made up of actual sort of page-like templates and then template parts.

The typical page-like templates are for example, page, single, front page or home, archive and 404. Those are different kinds of overall governing templates that WordPress uses and in fact, we can see those in play here.

Let’s see, instead of enterprise let’s look at twentyfourteen. It has a page template so it gets the header. A header is a template part so it goes and gets the header and then it has this HTML built into it and has some PHP logic.

If it’s the front page and if it’s got featured posts then get the template part featured content otherwise you don’t get the featured content you just come on down here and get your primary content.

You’ve got your loop and all this kind of stuff and then once you’ve got this then it goes and gets a sidebar which is another template part and then another sidebar which is in the template part and then another footer which is another template part. These are template parts and this is the overall template.

Examples of Template Parts in WordPress

You can see the template part here. For example, get_header gets this template part and this template part creates the DOCTYPE. It creates some custom IE styling, it gets some language attributes, it had some headscripts, it opens up the body, it puts together the header and that kind of stuff.

And this is what a typical WordPress header.php looks like. If you’ve been around the WordPress world a little bit you’ve seen people say well, if you want to do that you’ve got to add such and such to your header.php file.

Sometimes people in support will say, well you’ve got to make sure you’ve got a header.php file before this is going to work. This is what a header.php file looks like in typical WordPress and the header.php is a template part. The template itself calls the template part.

Another example of template part is featured-content here. If we come along here and look, here’s a file called featured-content and that is a template part that is being called by the page template. So this is how WordPress does it.

Now, WordPress displays all pages using the page template. It displays all single posts using a single template, it displays all archive pages using an archive template, it displays the 404 error page using a 404 template. Each of those are files inside of a typical WordPress theme.

If we open up this 404 error page, you can see what it looks like. It gets the header then it’s got some kind of message to you, it gets the search form and stuff like that and it gets sidebars and footers. This is what the 404 error template looks like.

How Genesis Uses Template Parts

Well, in Genesis it’s actually quite a bit different. Genesis does use templates and template parts but Genesis there are fewer template parts. For example, if we just come back to this straight Genesis, Genesis has a header template part, a footer template part but it does not have, for example, a content template part.

When we look at the header you’ll notice that this header is quite a bit different, right? Instead of having the explicit DOCTYPE stuff here, it says do_action( ‘genesis_doctype’ ) which means that if you’re supporting HTML5 then it gives the HTML5 DOCTYPE and if you’re not supporting HTML5 it gives the XHTML DOCTYPE.

The same thing, do_action( ‘genesis_title’ ), goes and gets the meta title and the meta description and then it calls the wp_head and stuff like that. And then it starts opening up the body with a whole different kind of markup than you see in a typical WordPress theme.

The reason is that each of these things are special Genesis functions that you can copy, you can dig into, you can attach yourself to and so you get different mark up if you are using HTML5 versus using XHTML. We’re going to talk more about this here in a minute but you can see the difference between the Genesis template part and a standard WordPress template part.

How Genesis Uses Templates

And in a similar way, Genesis has far less stuff in its templates. Let’s take a look at the Genesis page template. Notice that it’s not calling any template parts, it’s just calling the function Genesis and this function is deciding which template part to call.

So we’ve got a page template but Genesis doesn’t use the page template in the same way that a standard WordPress theme uses it, it just uses it as a way of calling Genesis. The same thing is true for your single template and your page template. They are identical because they both just call Genesis. The same thing is true for index.

Now, when WordPress is picking its templates, it looks for the most specific template first and then falls back to a less specific template. The least specific template of all is index.php. Genesis would actually work with just index.php but it doesn’t, it uses these other things to also call exactly the same function.

So index.php, page.php, single.php and page archive, that’s a custom template which we’ll talk about in a minute but it doesn’t have an archive.php. Archive.php just drops back down to index.php and an archive template just uses the index.php file and all it does is just call Genesis.

Built-In Templates for Genesis

First, these are the built-in templates in Genesis. Genesis has the built-in template of a 404 and a 404 actually is pretty different than a standard 404 error. It’s got a bunch of its own custom functionality and it has that custom functionality before it calls Genesis. Then it’s got Page, Single and Index.

Page, Single and Index are all identical, they all just call Genesis. However, they follow the WordPress’ template naming convention even though it doesn’t follow WordPress’ functional template convention.

Now in WordPress if you’re going to have custom page templates and you name it Page and then give it an underscore and then the name of that page template which is what Genesis has. Genesis has a page_archive custom template and a page_blog custom template.

If we open up page_archive custom template, Genesis uses the term archive differently than I’m using it in this case. An archive is a listing of all your pages, categories, authors and posts whereas the typical WordPress term of archive just means like a category archive or tag archive, a listing of post, set or group by a specific common denominator.

Template Naming Conventions

Anyway, I said all that to say that we’re going to create a custom template and we are going to create a custom front page template. Naming conventions are important. If I wanted to create a custom page template, that is if I wanted my own page template, I could create it inside of my child theme a page.php. And it would automatically use my page.php rather than the Genesis page.php.

The same thing is true with single or anything else, it will automatically use the templates that follow the naming convention inside the child theme before it tries to use them in the parent theme. This means we don’t need to recreate default templates that we want to use because we’ll all automatically use them. All we need to do is create our own custom templates.

Now that you’ve got this background information on Genesis templates, we’re going to create a totally customized front page template.

0 Comments… add one
0 comments… add one

Leave a Comment