• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar

WP SITES

2784

Original Genesis Tutorials & 6000+ Guaranteed Code

Snippets

  • Consultation
  • Full Access
  • Log in

How To Make A Child Theme

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 code modifications, they will be lost when you update your parent theme!

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

There’s 2 ways to create a child theme in WordPress:

  1. You can use the @import rule in your child themes style.css file
  2. Or you can use wp_enqueue_scripts in your child themes functions.php file (This is the preferred method)

Downloads – Child Theme Examples

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.

This is an example of using the @import rule in a child themes style.css file

Download Twenty Eleven Child Theme

This is an example of using the wp_enqueue_scripts function in a child themes functions.php file

Download Twenty Fourteen Child Theme

Twenty Sixteen Child Theme – Free

This child works with the Twenty Sixteen child theme for WordPress which must be installed before you install this child theme.

Note: This child theme only works with WordPress 4.4 which will be released on December 4th 2015. Use the WordPress beta tester plugin if you want to use Twenty Sixteen however its not advisable to use a beta version of WordPress on a live site unless you know what you are doing.

Download Twenty Sixteen Child Theme

Create Child Theme Using wp_enqueue_scripts

There’s only 2 files you need to create inside your child themes root directory:

  1. A functions.php file
  2. And a style.css file

Here’s how to create the functions.php file which loads your child themes style.css file.

  1. Simply create a new file using a code editor like Notepad++ named functions.php
  2. Add the code from the Gist labelled functions.php below
  3. Save the file in your child themes root directory

You can then create a new file named style.css in your child themes root directory and add your custom CSS modifications to the file. This custom CSS will over ride your parent themes CSS as its loaded afterwards.

Another Way To Create Child Theme

You can also use the following PHP and CSS to create a child theme.

  1. Create a new file named functions.php and paste the PHP code into that file.
  2. Create a new file named style.css and paste the CSS in that file.

Both files should be placed in the root directory of your child theme.

Here’s the code:

Video – Create Child Theme

This video shows you how to make your own child theme using the Twenty Sixteen parent theme as an example. You can use this video as a guide to create a child theme for any parent theme.

The video uses the wp_enqueue_scripts function to load the child themes style.css file after loading the parent themes styles.

Create a Child Theme Using @import

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 in your child themes style.css file

@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 CSS 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 installed.

Conclusion

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

Related Tutorials

  • Child Theme For Divi by Elegant Themes โ€“ Free Download
  • Child Theme for Genesis โ€“ Free Download
  • How To Make a Divi Child Theme

Child Theme

Reader Interactions

Comments

  1. Richard F. says

    December 15, 2014 at 6:02 pm

    I am so pleased to say to you thanks…I have had nothing but headaches trying get the Clubix theme a child theme that really worked until I read your way…even the guys who produced the theme do not off a fix for a child theme…Using your method, I was able to build a child theme, and then zipped it up, installed it…still it gave me a fit with errors until I added the lib, asset and the admin folder…it worked…thanks much…I trust this method works for anyone who has the Clubix wordpress theme.

    Log in to Reply
  2. Brian says

    September 2, 2014 at 7:24 pm

    Thanks. Great tutorial. I’ve been doing all of this and for some reason the custom child theme I’m trying to create for the Genesis framework does not pull the basic styling over. Would you recommend using this plugin instead? Any disadvantages like load time?

    http://wordpress.org/plugins/genesis-simple-hooks/

    Log in to Reply
    • Brad Dalton says

      September 2, 2014 at 7:39 pm

      Its a good stepping stone to learn custom functions.

      It simply teaches you about the different hooks positions which is the most basic code in custom functions.

      I would use custom functions rather than the plugin as its more flexible and efficient.

      Plugins always include a lot more code than custom functions.

      Make sure you add the import rule.

      Why not start withe the Genesis Sample child theme and modify it rather then build from scratch.

      This is what you should have in your child themes functions file:

      <?php
      //* Start the engine
      include_once( get_template_directory() . '/lib/init.php' );
      
      //* Set Localization (do not remove)
      load_child_theme_textdomain( 'eleven40', apply_filters( 'child_theme_textdomain', get_stylesheet_directory() . '/languages', 'eleven40' ) );
      
      //* Child theme (do not remove)
      define( 'CHILD_THEME_NAME', __( 'eleven40 Pro Theme', 'eleven40' ) );
      define( 'CHILD_THEME_URL', 'http://my.studiopress.com/themes/eleven40/' );
      define( 'CHILD_THEME_VERSION', '2.2.1' );
      
      //* Add HTML5 markup structure
      add_theme_support( 'html5', array( 'search-form', 'comment-form', 'comment-list', 'gallery', 'caption' ) );
      
      //* Add viewport meta tag for mobile browsers
      add_theme_support( 'genesis-responsive-viewport' );
      [/code]
      
      And this at the start of your child themes style sheet:
      
      [code]
      /*
      	Theme Name: WP Sites Version 3
      	Description: This is my custom child theme
      	Author: Brad
      	Author URI: <a href="http://wpsites.net/" rel="nofollow ugc">http://wpsites.net/</a>
      	Version: 2.0.1
              Template: genesis
      	Template Version: 2.0.1
      */
      Log in to Reply
  3. Nellie says

    June 16, 2014 at 7:32 pm

    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?

    Log in to Reply
    • Brad Dalton says

      June 16, 2014 at 8:51 pm

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

      Log in to Reply
  4. Audrey says

    January 26, 2014 at 7:44 pm

    Thank you so much for all your advice, it is AWESOME!

    Log in to Reply
  5. Dan Laird says

    October 31, 2013 at 6:51 pm

    Thanks, made my first one! Looking forward to breaking stuff and it being OK ๐Ÿ™‚

    Log in to Reply
    • Brad Dalton says

      October 31, 2013 at 7:08 pm

      hahaha. Congrats Dan!

      Log in to Reply
  6. iwan santoso says

    June 16, 2013 at 7:53 am

    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 ๐Ÿ™‚

    Log in to Reply
    • Brad Dalton says

      June 16, 2013 at 10:15 am

      Sent you an email Iwan.

      Log in to Reply
  7. Han Brugmans says

    May 9, 2012 at 4:31 am

    Hi Brad,
    Love your work!
    Can you explain if changes in other templates (ig footer.php) will behave as a child as well?
    Thanks
    Han

    Log in to Reply
    • Brad Dalton says

      May 9, 2012 at 7:58 am

      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.

      Log in to Reply
  8. John says

    September 30, 2011 at 3:49 am

    Thanks for this post! Just loaded my first child theme. Now to customize!

    Log in to Reply
    • Brad Dalton says

      September 30, 2011 at 8:49 am

      Smart move John. Let me know if you find any good articles on customization for beginners

      Log in to Reply

Leave a Reply Cancel reply

You must be logged in to post a comment.

Primary Sidebar

Recent Posts

  • Style First Nav Menu Item Using CSS
  • Genesis One Page Block Theme
  • Reposition Image Before Title When Mobile Responsive
  • Post Tags By Current Category
  • Custom Button Link Per Product in WooCommerce

Advertise · WPEngine · Genesis · Log in

  • Access Problems
  • Account Details
  • Consulting
  • Tags
 

Loading Comments...
 

You must be logged in to post a comment.