How To Make Your Own Child Theme for WordPress

Making a basic child theme is a lot easier than you think. But why would you need your own child theme?

If you have made any design changes using CSS code or created functions in your themes functions.php file then you may want to save this work in a separate folder.

If you don’t save your custom changes then they will be lost when you update your theme!

This is called a child theme and over rides your parent theme which could be Thesis, Canvas, Twenty Eleven or any other parent theme.

Child Theme Example

This child theme will only work if you have the Twenty Eleven parent theme installed. If you are using another theme, you need to modify the style.css in this child theme to import your parent themes file.

Download Twenty Eleven Child Theme

What is a Child Theme

A child theme is a folder (directory) with a css file in it which you create from notepad and name it style.css

The contents of the style.css file will include the custom CSS code you have added to make changes to your original parent themes styling. Plus a few lines which all child themes include. Here’s how to do it:

1) Login to cPanel

2) Using File Manager, navigate to wp-c0ntent/themes which is where your current parent theme is located

3) Click on New Folder and name the folder the same as your parent theme but also include – child at the end

Example: thesis-child or twentyeleven-child. I’ve named mine canvas-child

New Child Theme Directory

4) Create a new file using notepad and name it style

5) Add this information to the top of the file

/*
Theme Name: parenttheme-child
Author: Your name here
Template: parenttheme
Version: 0.1.0
 */

The 2 most important and compulsory details are:

  1. Theme Name – The name you have given your child theme i.e canvas-child or twentyeleven-child
  2. Template – Directory name of your parent theme (case sensitive) i.e canvas or twentyeleven or thesis

6) Add this line of code as well below the above detail

@import url("../twentyeleven/style.css");


Make sure you name the blue part the same as your parent theme i.e twentyeleven or canvas or thesis (Not the name of your child-theme).

This will import your parent themes style.css file

Custom CSS Child Theme File

You can now add any custom CSS code changes you want to make into your child themes style.css file rather than use your parent themes style.css or custom.css file.

Tip: A great way to customize your site is to copy and paste code from your parent themes style.css file into your new child themes style.css file and make custom changes to it there.

7) Now go to Appearance > Themes and activate your new child theme. It will only work if the parent theme is currently activated.

You can also create a functions.php file and add all your custom php code as well. Make sure you start the functions.php file with

<?php
Insert Your Custom Php Code Between These Tags
?>
These are the opening and closing php tags.

Whenever you update your parent theme, all your CSS changes will not be overwritten as they are in your new child theme directory which you have just created.

You could also add a screen shot 300 x 250 and simply name it screenshot. Import the screen shot into the child theme folder and it will show up in the backend of your WordPress admin panel like your parent theme’s image does.

Child Theme Screen shot

Here’s what the inside of your child theme directory will look like. Pretty simple but a great start to making your own theme.

Child Theme Contents

If you successfully made your very own child theme for the first time, you may one day be a RockStar WordPress Theme Designer! How are you feeling now?

Never Miss a Tip from Brad Dalton

Get the latest web design tutorials, custom coding solutions & WordPress updates.

5 Reasons Mad Mimi Works Better

mad-mimi
  1. Sends From Your Email Address - More personal & higher open rate
  2. Cheapest - $42 for list of 10,000 emails, unlimited sends
  3. Ease of Use - The easiest system to create & setup campaigns
  4. RSS to E-Mail - Auto send list of latest posts
  5. Auto Send Any Number of Days - enables you to offer multiple newsletters at different frequencies.

Click here to create a free account.

Comments

  1. Nellie says

    Where does the functions.php actually sit for my child theme? I have a child theme for canvas under themes/canvas-child, along with a child style.css. Does the new functions.php file sit in the same location as the style.css of my canvas-child?

    • Brad Dalton says

      In the root directory of your theme which is generally the same location as your style.css file.

  2. iwan santoso says

    hi mr.brad, i try to create child themes,and i uploaded to cpanel,but i found error there ,when i try to activate child theme,stylesheet is missing,please help me……thankyou :)

    • Brad Dalton says

      Hey Hans

      If you move the footer.php file into your child theme it will work fine and not be overwritten when you update your parent theme.

      Your page templates will be ok as well.However this is not the case for all php files.

      Hope that answers your question.

      A great place to learn more about php is at wordpress.stackexchange.com or your themes forum if you own a premium theme like Thesis or Genesis.

Ask a Question