Upgrading Artisteer to Version 3 Part 1

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.

 screenshot

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.

Child Theme

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.

Child-1   

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:

Child-2

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: <a href="http://artisteer.com/">http://artisteer.com/</a>
Description: A WordPress 3 child theme from an Artisteer theme.
Author: David Cox of Digital Raindrops
Author URI: <a href="http://digitalraindrops.net/">http://digitalraindrops.net/</a>
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

Credits

Building Child Themes: Aaron Jorbin

Word Press: Codex Page on Child Themes 

Notice

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.

5 thoughts on “Upgrading Artisteer to Version 3 Part 1

  1. I'm really glad to see this post on this LinkedIn list. I had been following the topic on Artisteer forums. It looks like you have a good solution with explaining how to create a child theme for Artisteer. I will study it more carefully tomorrow. Thanks!

  2. Hi Jay,
    These tutorials are more for legacy themes where you have done to many modifications and just exporting from a new version of Artisteer is not a real way forward.

    If you produce Artisteer themes with only minor modifications then upgrading and exporting is all you really need to do, although the child theme system is wort getting your head around going forward.

    David

  3. Hi Lisa,
    in the downloads section and on each post is the base theme and the child theme at each point, so that last will have all changes, others incremental
    If you download and look in the folders it will become clear, I am working on the Vertical Menu at the moment, then I will release a template with an options panel and instructions that can be used for many themes.

    David

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Connections

Connect with Us
Follow Digital Raindrops on Twitter Join Digital Raindrops on Facebook
Share

Related Posts

Posted in Migration

Child-8-12

To much information and still finding it a bit scary, lets us make it very easy, this quick guide is all the code changes except the styling, there are only three code block to do honest, first we need to find the header.jpg in … Continue reading

Read More