This tutorial will explain how to use the Child Theme concept to customize a WordPress Theme. Specifically, this tutorial will explain how to create a Child Theme to hold future-proof Theme customizations, and then will explain how to build a custom Page template within that Child Theme. This tutorial is based on the Oenology Theme.
A brief background: recently, a user of the Oenology Theme contacted me, asking how to create a custom Page template. Specifically, this user wanted to have content of a particular Page display in a single, wide column with no sidebars. This customization is quite easily implemented using a Child Theme, as I will explain.
Creating a Child Theme
The first step is to create a Child Theme.
In its simplest form, a Child Theme doesn't have to be anything more than a single file: style.css. While some Child Themes are much more complex, all start with this one file. WordPress will use two critical pieces of information from the Child Theme's style.css file to do all of the rest of the heavy lifting: a header tag and a file import.
Let me show you how easy it is. In your text editor of choice, paste the following into a blank file, and save it as "style.css":
/*
Theme Name: Oenology Example Child Theme
Description: Example Child Theme based on Oenology
Template: oenology
Version: 1.0
*//*
THIS MUST COME FIRST!
Inherit styles from oenology parent theme.
*/
@import url("../oenology/style.css");
Congratulations! You just created your first (fully functional) Child Theme!
Here's how it works.
First, this "header tag" tells WordPress that the Theme is a Child Theme, and to use all of the template files from the indicated Parent Theme, if they are not found in the Child Theme:
Template: oenology
In other words, if we don't add an "index.php" template file to our Child Theme, WordPress will use the "index.php" template file from Oenology.
Second, this file-import tells the style sheet to import all of the styles as defined in the Parent Theme, Oenology:
@import url("../oenology/style.css");
Due to the way that inheritance works with CSS, any styles we define in our stylesheet that come after this file-import call will supercede the styles defined in the Parent Theme. (Note: the exact nature of CSS rules regarding specificity are outside the scope of this tutorial.)
And that's it! That's all the information that must be provided for a working Child Theme.
The Oenology Example Child Theme listed in the Themes section of the WordPress Admin area
At this point, you could simply FTP your newly created style.css file to \wp-content\themes\oenology-example-child-theme\, and you'll see your Child Theme appear under Themes in your WordPress admin.
You could activate your Child Theme at this point, and it would work (it would just look and act exactly the same as its Parent Theme, Oenology, at this point, because we've not yet added any customizations).
But, let's make our first customizations first.
Creating a Custom Page Template
Now the real fun begins! Let's create our custom Page template.
Start by making a copy of the "page.php" template file from the Oenology Theme. Since the custom template we want to create is a wide, one-column page, we will name our copy "page-one-column-wide.php".
Important! At this point, we are done with the Oenology Theme. Be sure not to make any changes to the Oenology Theme template files. Likewise, do not save your Child Theme's "style.css" file or any other file in the Oenology Theme directory!
Save "page-one-column-wide.php" in the same directory where you saved "style.css", and then open it in your text editor of choice.
We will make three primary changes:
- Change the Template name.
- Add a custom class to the HTML
<body>tag. - Remove the two sidebars.
Changing the Template Name
Look for the following at the very top of the file:
/*
Template Name: Page
*/
This tag tells WordPress what this particular Template file is. Since we are creating a new, custom Template, we need to rename this tag. (Whatever we put here will be displayed in the Add Page screen, as we'll see later.) Change this tag to the following:
/*
Template Name: Page One-Column Wide
*/
Adding Custom Class to the HTML <body> tag
Next, look for the following code (immediately following the above code):
<body id="page" <?php body_class(); ?>>
Modify it as follows:
<body id="page" <?php body_class( 'page-one-column-wide' ); ?>>
This change tells WordPress to add the CSS class "page-one-column-wide" to the HTML <body> tag. We will use this CSS class to define our custom style for our template.
Removing The Sidebars
Finally, find and delete the following code, starting around Line 53:
<!-- Begin Left Column (div#leftcol) -->
<div id="leftcol">
<?php
/*
div#leftcol contains the left column content of the three-column layout.
*/
get_sidebar('left');
/*
sidebar-left.php is the left column content. Used in all primary template page types (index.php, single.php, archive.php, search.php, page.php)
For index.php, sidebar-left and sidebar-right both appear to the right of the main content column.
For page.php, sidebar-left is to the left, and sidebar-right is to the right, with the main content column in the center.
*/
?>
</div>
<!-- End Left Column (div#leftcol) -->
<!-- Begin Right Column (div#rightcol) -->
<div id="rightcol">
<?php
/*
div#rightcol contains the right column content of the three-column layout.
*/
get_sidebar('right');
/*
sidebar-right.php is the right column content. Used in all primary template page types (index.php, single.php, archive.php, search.php, page.php)
For index.php, sidebar-left and sidebar-right both appear to the right of the main content column.
For page.php, sidebar-left is to the left, and sidebar-right is to the right, with the main content column in the center.
*/
?>
</div>
<!-- End Right Column (div#rightcol) -->
Here, we simply remove the code that adds the Sidebars to the template, so that they do not display.
That's all we need to do with the template file. Save your changes, and we will move on to styling our new Page template.
Defining CSS for Custom Page Template
Once again, open "style.css" in your text editor of choice, and look for the following line:
@import url("../oenology/style.css");
Be sure to make all additions beneath this line. This rule is very important.
Beneath this line, add the following style definitions:
#page.page-one-column-wide #extent #main {
width: 1000px;
margin-left:0px;
}
#page.page-one-column-wide #extent #main img {
max-width: 990px;
width: auto;
height: auto;
}
The first rule changes the width and margin of the main content area, so that it takes up all the space made available by the removal of the sidebars. The second rule ensures that any pictures that are added to the content will take up the full available width.
At this point, we're done make edits to Theme template files. Now the fun begins: using our new Child Theme, and custom Page Template!
Using the Custom Page Template
Using whatever method you prefer, upload the two files, "style.css" and "page-one-column-wide.php" to the following directory:
\wp-content\themes\oenology-example-child-theme\
As demonstrated previously, the Child Theme will now appear in the Themes section of the WordPress Admin area, and can be activated like any other Theme.
Once you activate the Child Theme, you won't notice any differences whatsoever on the front end:
Why? Because you've not made any changes to any of the default content, templates, or styles. You will need to tell WordPress to use your Custom Page Template for a Page in order to see the changes.
So, either create a new Page, or else edit the Page for which you want to use the custom template. Look for the "Template" field in the "Page Attributes" metabox (click to enlarge):
The drop-down box lists all of the possible Page templates that can be applied to the Page. Look for our new custom Template, "Page One Column Wide" (remember, this is the same name we used in the "Name" header tag in the "page-one-column-wide.php" template file):
Select the custom template file, and then save the Page. Now, when you view the Page, you should see the custom template applied to it:
And that's it! You've just created a Child Theme, and used it to define a custom Page Template! Here are the before and after screenshots, for comparison:
I've also uploaded a ZIP file containing the example files "style.css" and "page-one-column-wide.php" used in this tutorial: oenology-example-child-theme.zip. Feel free to use however you'd like!
If you have any questions, please don't hesitate to ask. Though, I would prefer that you ask them in the Oenology Support Forum at wordpress.org, where official support for the Oenology Theme is provided, rather than in the comments.
Good luck, and happy Child Theming!
Oenology: How To Create a Child Theme and a Custom Page Template – http://www.chipbennett.net/2010/11/01/oe… #wordpress