Create a child theme for your modified twenty twelve wordpress theme

It’s common to modify a theme in wordpress, be it a stylesheet, or footer.php or others to edit a CSS style property, or adding analytics tracking code in the footer or adding ad codes in the content.php. Overtime the changes you made can be wiped out by an update to the theme. An update just overwrites all files. You can’t be conscious of the theme modifications when updating the theme. It’s hard to rollback to the previous state after a quick update. So having a child theme of twenty twelve is the best way to be stress free without having to worry about the future updates a theme might have. This article talks about how to have your modified twenty twelve theme that you are using now as your child theme and how to go about doing that.

 Creating a Child Theme

Creating a child theme is a fairly simple 2 step process.

Step 1: Creating a new stylesheet, linking it with the parent theme and some code.

First you need to have an empty folder with a name that you would like to call your child theme. I created a new folder and renamed it to knolpad, all small caps.

Now you would need to create a new stylesheet file. You can create a new text file, and rename it to style.css. Once you have a style.css on your folder, you then need to add the following meta data to it, the code should appear on the top of your style.css.

Theme Name: It can be any name of your choice, I named it knolpad.

Theme URI: This is your blog’s URL.

Description: You can leave this as is.

Author: You can have your name here, or a pen name if you want.

Author URI: Your blog’s about page link can go here.

Template: This is vital. This name should be twentytwelve, and shouldn’t be modified. As well as you should not delete your Twenty twelve theme folder, as this is the parent theme for your child theme.

Version: You can leave this as is, or if you want to version it for your modification reference purpose, you can do it.

My child theme’s modified meta data code is,

You can see the changes I have made.

Now, add the following code after the meta data code,

This will inherit the stylesheet’s styles from the parent theme. Your style modifications can then be added from the next line onwards.

Now you need to compare the style.css between the original twenty twelve with your current modified twenty twelve. The changes will be added to your child theme’s style.css.

To find the changes you made to your stylesheet (if any) compared to the original twenty twelve’s default styles, you need to download the latest twenty twelve theme and your current twenty twelve folder.

Now you have 3 folders. One is your child theme folder, second, the original twenty twelve folder and third, your modified twenty twelve folder that you want to have it as your child theme.

Next, go to quickdiff.com to compare changes in the code between the original twenty twelve style.css to the one you are using it.

Paste the original style.css on the left side and the current modified style.css on the right and hit compare. This will bring you the merged code with differences. The old code will be highlighted in red while the new code will be in green, as in the image below,

 

quickdiff-code-changes

You need to add all the codes in green to your child theme’s style.css. For the one in the image above, the code you need to add are,

This will complete the Step 1 of the child theme creation process. The style.css for my twenty twelve child theme knolpad looks like,

 Step 2: Copying essential PHP files that are or could be modified.

After taking care of the stylesheet, and second and the last step is to copy all the PHP files that have ads and tracking codes on it. A theme update can remove these little changes as well. So you might have edited the content.php to show excerpts on your homepage or added analytics tracking code on the footer.php or added ads on the content.php and index.php. So the safe bet here is to copy all the essential PHP files from your current modified twenty twelve folder to your child themes folder.

You can copy the following PHP files,

header.php
index.php
single.php
content.php
sidebar.php
footer.php

Once you copied it all, your child theme folder will have all the essential files. Mine looks like,
twenty-twelve-child-theme-folder

Now FTP your child theme folder to the wp-content/themes folder. Just having the twentytwelve name on your style.css will link it to the twenty twelve theme.

If you think you have modified functions.php, add it as well. But you can’t copy it as is. You need to create a new file and then add the modifications alone. If not you re-declare the setup function again.

 Step 3: (optional) Creating a screenshot for the child theme:

As you can see in the image above, there is a screenshot.png. This is a simple process of creating a png image. It can be the screenshot of your homepage or a logo or whatever you’d like to see when you go to themes from the wordpress dashboard.

First you need to create a png image of 300×225 resolution. Then rename it to screenshot.png. You should have the screenshot with that name or else wordpress couldn’t recognize. You can as well as double that resolution to 600×450. Either way you will have a nice screenshot for your child theme.

knolpad-child-theme

Now, your child theme should show up in the themes on your wordpress dashboard, activate it and you are done. You have now successfully created a child theme that is safe from any future twenty twelve updates.

To Summarize

  1. Create a folder for your child theme, name it, and FTP to wp-content/themes folder.
  2. Create a new styles.css and copy all the example meta data.
  3. Edit the meta data, leaving the template name intact,
  4. Import the parent CSS file to inherit the parent themes styles.
  5. Download original twenty twelve as well as your current one.
  6. Use quickdiff.com to find the difference between original style.css and your current style.css.
  7. copy the differences to your child themes style.css. This completes the stylesheet.
  8. Copy all the essential PHP files from the current twenty twelve folder to the child theme folder.
  9. FTP all the files to your child theme folder to wp-content/themes
  10. Create a screenshot and FTP it.
  11. On your wordpress dashboard, choose your child theme and activate it.

Leave a Reply

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