While waiting for Artisteer to release the next version which will have some support for WordPress Version 3, we thought about all the themes that have been created and modified where the authors will not be able just to reopen the template in Artisteer and just export and upload.
The new Twenty Ten theme has many new features, most of these will not be required for existing templates, but we may want to bring our themes up to date and add a bit of support for version WordPress 3.
In this tutorial we will introduce the use of WordPress child themes, leaving the original theme in the themes folder the child theme will inherit the files from the parent.
So you might be asking what is a child theme and how do I use it, lets use a human analogy, a child theme is an entity in its own right, it has it’s own identity and attributes, just like a human child it inherits all of the parents features, it will be dependant on the parent for support, and removing the parent will make the child an orphan.
All Artisteer users are familiar with this Default Artisteer template, we have done no more than exported the theme from version 2.4 and loaded it to a local environment, we have named this theme Artisteer.
If you have not yet created your local environment then a visit to Buds WAMP Tutorial will get you started, we will be using the code from another of buds tutorials later.
Our original theme will become the gene pool for our child theme, when created our child theme will already have it’s parents image, attributes and functions, all the saying you hear as a child will be true, ‘it looks just like it’s parent’, ‘a chip off the old block’, ‘just by looking you can see who’s child that is’.
Lets create our child theme, navigate to you local install of WordPress and locate the themes folder, the child theme will need a folder, in our example we have used the parents folder name artisteer and added -v3, so the child theme has a name artisteer-v3.
In this folder copy across the screenshot.png from the parent, with your text editor create an empty file called style.css, a child theme must have a file called style.css, this will be used to identify the child theme, inherit the parents files and where we will do any changes to the style, any changes in this file will override the parents style elements.
Your folder should now look like this:
The child theme needs identify with and to inherit the parents files, this is done in a few lines of code, lets have a look at these now.
- /* required this is the start tag
- Theme Name: required the name of the child theme
- Theme URI: Description: describe the child theme.
- Author: optional name of the author
- Author URI: optional authors web address
- Template: required the parents name
- Version: version information
- Tags: SEO tags
- */ required this is the end tag
- @import the parents style sheet css
Lets look at the contents of our example child themes file
/* Theme Name: Artisteer V3 Theme URI: &lt;a href=&quot;http://artisteer.com/&quot;&gt;http://artisteer.com/&lt;/a&gt; Description: A WordPress 3 child theme from an Artisteer theme. Author: David Cox of Digital Raindrops Author URI: &lt;a href=&quot;http://digitalraindrops.net/&quot;&gt;http://digitalraindrops.net/&lt;/a&gt; Template: artisteer Version: V3.1.1 Tags: WordPress 3,Artisteer,child theme, fixed width, left sidebar, two columns, valid XHTML, widgets */ @import url('../artisteer/style.css');
That is it our child theme is now complete a clone of the parent, we can now go to the admin page and activate the theme, preview the theme, we have a full copy of the parent and we can start to give the theme it’s own features, attributes and functions without changing a single file in the parents directory.
We will also create a functions.php and copy across other files as we progress through the other parts of this tutorial.
WordPress 3 Features
We are going to give our legacy theme some of of the WordPress version 3 features found in the Twenty Ten theme, background, headers and menus, these will be in parts two to four, this will enable us to add more tutorials as required.
Part 2: Horizontal Menu Support
Part 3: Edit Background Support
Part 4: Edit Header Support
Part 5: Select Header Support
Part 6: Second Horizontal Menu Support
Building Child Themes: Aaron Jorbin
Word Press: Codex Page on Child Themes
Note: we do require your feedback to improve our themes and tutorials, please leave your comments good or bad.
Code disclaimer information
This document contains programming examples therefore, www.DigitalRaindrops.net grants you a nonexclusive copyright license to use all programming code examples from which you can generate similar function tailored to your own specific needs.
All sample code is provided by www.DigitalRaindrops.net for learning illustrative purposes only.
These examples have not been thoroughly tested under all conditions. www.DigitalRaindrops.net, therefore, cannot guarantee or imply reliability, serviceability, or function of these examples.
All programs contained herein are provided to you “AS IS” without any warranties of any kind. The implied warranties of non-infringement, merchantability and fitness for a particular purpose are expressly disclaimed.