Just like plugins, themes need to be upgraded from time to time.But what happens to all your css modifictaions when you upgrade it with a newer version, won’t you lose all your changes?

WordPress introduced a concept called “Child Themes,” to address just this. Child themes lets you make your changes where they won’t be touched by future  “theme” upgrades.

One-Click Child Theme

Take a look at the ARI WordPress theme I just uploaded. There’s TWO WAYS to create a child theme. One-Click Child Theme and Create a Child Theme Step by Step.

The quickest and easiest way to get started with a child theme is to use the One-Click Child Theme plugin. Just install it, activate the parent theme you want your child theme to be based on (if it isn’t active already), and click on “Child Theme” under Appearance in the WP dashboard.

From there, enter a name for your new child theme, a short description, and your name, and click on “Create Child”. One word or warning: I got an error message after clicking “Create Child”, but the child theme was created without a problem.

OR

Create a Create a Child Theme Step by Step

1) Log into your ftp, double click on your public_folder, find the site your working on and double click on it to open it.

• Open the folder: wp-content
• Open the folder: themes
• Open the folder: ari

Create a new, empty folder using standard web conventions (no spaces or special characters in the name). The folder could be named something like “ari_childtheme“. Your child theme will live in this folder.

2) Open up Text Wrangler and create a blank style.css file.

3) Open that style.css and add the following lines:

You’ll want to change most of the lines above to suit your needs. It’s not critical what they say, as long as the Theme Name doesn’t conflict with any theme you already have installed. The really important line is the Template: line – this must match the exact name of the folder that contains the parent theme! Likewise, edit the @import url line to match the path to the parent theme’s stylesheet.

Save this bare-bones stylesheet file to the server, then go to the Dashboard’s “Appearance” section and activate your new theme. Take a look at the live site and… nothing’s changed! That’s a good thing – at this point, all you’ve done is to activate a new theme that imports the entirety of the parent theme, with no changes.

Setting Theme Options

Before you start customizing your new child theme’s CSS, make sure you check out the theme options and do some customizations there. It’s better to make changes within the existing framework of the theme if that’s an option, as it makes it easier to manage your theme’s code.

Basics of Editing your Theme

If you go to the WordPress theme editor, you’ll see a mostly-blank style sheet for your new child theme. The first line of your new CSS file (after the child theme info) is importing the stylesheet from the parent theme. This is vital, and it has to remain at the top of your sheet or the parent stylesheet will be invalidated and won’t import.

One thing you may want to do at this point is install a better code editor plugin for theme editing. Color-coded syntax makes it significantly easier to code directly in WP, and will especially be useful for those who are used to colored syntax with outside editors. My personal choice is Advanced Code Editor.

Adding CSS to Your Child Theme

The Basics
Let’s start by defining things like the body background color, the typography, and other basics that will give us the basis for our child theme. This code sets up everything in the header, with the exception of moving our navigation menu. Let’s break it down into a few different steps.

Inserting Code into your Head or Elsewhere in your Theme 

This is probably the most technical part of creating a child theme, and is only necessary if you wannt to do something like add Google Web Fonts to your site. That’s exactly what we’re going to do here. This is the only time in creating your child theme that you’ll need to work with PHP, and if you don’t need to insert anything into your theme’s header or elsewhere, you won’t need to work with PHP at all.

First, create a functions.php file in your text or code editor of choice. The basic code you’ll use will look something like this:

<?php function customfunctionname() { ?>
 <script type="text/javascript"> Whatever your JavaScript is </script> <?php } add_action('wp_head', 'customfunctionname'); ?>

For the child theme above, we needed to insert code into our header to link the appropriate Google Web Fonts so we could call them into our CSS. Here’s how we do that (you can get the link directly from Google with whichever fonts you want to use):

<?php function googlefonts() { ?>
    <link href='http://fonts.googleapis.com/css?family=Dancing+Script:400,700' rel='stylesheet' type='text/css'>
<?php }
add_action('wp_head', 'googlefonts');
?>

Now your fonts should all be working properly! And all the functions that were included in the original parent theme will still be working, too.

Read about it in more detail here. 

Conclusion on Child Themes

Creating a child theme is incredibly simple when compared to designing and coding a theme from scratch. With some basic CSS knowledge and just a little bit of PHP, you can create basically any kind of theme you want.

Make sure that your code is well-written, commented, and organized. This way, if your parent theme is updated, your child theme is unlikely to break.

The child theme we’ve created in this tutorial is very, very basic. But it gives you the information you need to start designing your own themes. Child themes, when built on a great parent theme, can be as powerful as any other theme available. For more information on child themes, check out the WordPress Codex.

HOMEWORK | Week 7

• Create a CHILD THEME for your theme and install it. Add child theme to the new name. Take a screen shot and upload it to your blog.
• Change at least FIVE attributes in the style.css on your child theme. Take screen shots before and after, showing the difference and upload to your blog.
• Finish loading ALL content to your client’s site.
• On week 8 give me the URL to your blog, your client’s URL where the WordPress site is located and your Delicious account.
• On your del.icio.us account tag three Web Sites that focus on WordPress and WordPress child themes or anything we learned in class today, and write a note in the Delicious comments section about why you think each one would be a good resource for this class. ALSO, add week 7, etc. in your comments section so that I can keep track of your comments. *Make sure you also add the tag: msuinteractivemedia AS WELL AS add additional tags.
• Be prepared to present your client’s site to the class for CRITIQUE on week 8. The FINAL and completed site will be due on week 9.