Hi guys & gals, today I want to walk through the first steps in creating your own custom page templates in Genesis. If you’re a beginner, this will open up a variety of opportunities in customizing your Genesis site.
Why Do We Need This?
There are a ton of reasons you will need to do this. In fact, without knowing how to create your own templates, you are basically stuck with every page of your Genesis child theme looking pretty much the same. For important Sales Pages, your About Page, your Contact Page, this most likely won’t do.
Having the freedom to customize individual pages of your site opens up a world of possibility that you don’t want to miss out on.
- You could want the site title to appear on some of your Landing Pages, but not all of them.
- You might want a widget area to appear at the bottom of your About Page.
- You could need a different page width on your Individual Staff Pages.
All can be solved easily by creating new page templates and customizing those templates.
Let’s Start at the Beginning
Before we splinter off into a specific example, let’s get the fundamentals in place.
Whenever you create or edit a page, you will notice the template drop down on your right.
With most child themes you may get one or two templates included; Landing Page, Archive Page and Blog Page.
Genesis makes it really easy to create your own custom template. Unlike other WordPress themes, you don’t need to write much code. In layman’s terms, Genesis adds everything you need for the page to be built, all you’re doing is adding stuff and taking away stuff until you’re satisfied.
About Page Template in Genesis
We learn by doing, so we’ll dig into an example use case.
We decide our About Page is important. We decide we want it to look different to our other pages and there are a few things we decide we definitely need to win over our readers;
- The content on the About Page needs to be wider than our usual 750px that we have set for all other pages.
- The entry title needs to be larger.
- We want a widget area after the content so we can display our newsletter sign up and some social network icons.
- We want to remove the footer widgets as they can distract our visitors from signing up at the bottom of the page.
Creating the Basic Template
My imagination is running wild today so we’ll name the template ‘About Page Template’. So we create a file named ‘about-page-template.php’.
You can name the file (and the template) anything you want, but be careful with choosing names beginning with page_ as this is the format WordPress uses in it’s Template Hierarchy. A safe way is to add the name of your child theme as a prefix, this way you are certain not to name it something WordPress already uses, ie yivva-about-page-template.php.
Let’s Build the Blank Template
That’s it. Just change the template name to your own and add the file to your child theme folder. (/wp-content/themes/your-child-theme/about-page-template.php)
Once the file is added, try adding a new page to your site. You will notice the shiny new template there for the taking.
You’ve added your first custom page template! Feel free to treat yourself to a congratulatory coffee.
Good. The page templates work very similar to the functions.php file which, if you have been customizing child themes before you’ll know, is for adding functions, removing functions, adding filters and all that jazz.
We do exactly the same with the templates, adding, removing, filtering whatever we like for that specific group of pages. Or in this example case, one about page.
Adding a Bit of Class to Our Template
In our example, the first two instructions were in relation to the styling. We needed to change the width of the content and also make the entry title larger.
We obviously don’t want to change the width and title font size on every page, so we have a neat trick which helps us target only this template. We add a specific class to the body element of any page using this template.
We consider this a good first step with every new template you build. It allows the styling you add to stay separate from the rest of your site and doesn’t cause any awkward problems on other pages. Below is the updated code for the template.
This code now gives the About Page a body class of ‘about-page’. In our stylesheet, the CSS we need to add to change the width of the content and increase the entry title is simply this;
Notice the .about-page at the beginning of each rule.
To remove the footer widgets on this page, we can then just remove that function in our template.
(If you’re wondering where that ‘Remove Footer Widgets’ snippet of code comes from, just Google ‘remove footer widgets genesis’ and you’ll find a bunch of kind people sharing the code. The same is for most functions in Genesis.)
Lastly, we wanted to add a widget area to the bottom of the template after the content. For this there are two steps. We first need to register a new widget area (this is done in the functions.php file) and then add the new widget area to the template.
We add the code below to the bottom of our functions.php file. Just change childtextdomain to the name of your child theme.
Then we add the widget area markup to our new About Page template. Here is the complete code.
As I said before, Google is your friend when it comes to finding the code snippets you need when you’re just starting out. Also StudioPress has a bunch of code snippets that can be used in any template or in your functions.php if it applies to your whole site.
I hope this simple example sparks some inspiration for you to create your own templates and helps give you more control of how your website works and interacts with your visitors.