How To Create A WordPress Child Theme – The Right Way

Since recently it was considered best practice in WordPress to include the parent stylesheet (style.css) with the @import rule in your child theme’s style.css. However this technique got updated and now it’s best-practice to create a functions.php file for your child theme and use wp_enqueue_style() to include you parent theme stylesheet this way. I will show you shortly how this is done.

Create your functions.php

So now next to your stylesheet style.css file and the screenshot.png file with your child themes preview image, you will also need to create a functions.php file for your child theme folder. You can use a text editor like Notepad++, Coda2 or Sublime Text to create your new functions.php file. The content of the file should include the following code snippet:

<?php
/**
 * Theme Name child theme functions and definitions
 */

/*—————————————————————————————————————————*/
/* Include the parent theme style.css
/*—————————————————————————————————————————*/

add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );
function theme_enqueue_styles() {
    wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );

}

Now you included your parent theme’s stylesheet via the functions.php and you will only need your child theme’s style.css file to add your own CSS to your theme. Your child theme’s style.css file should start like this:

/*
 Theme Name: Theme Name Child
 Theme URI:
 Description: Theme Name Child Theme
 Author: Your Name
 Author URI: http://www.yourdomain.com/
 Template: yourparentthemetextdomain
 Version: 1.0
 License: GNU General Public License v2 or later
 License URI: http://www.gnu.org/licenses/gpl-2.0.html
 Tags: Theme Name Child Theme
*/

/*
You can start adding your own styles here. Use !important to overwrite styles if needed. */

Note on Elmastudio Child themes:

At Elmastudio we also updated all your theme’s starter child theme folders to using the new method. In case you are already using a child theme you can update your child theme very easily as well.

You only need to add the code showed above in the functions.php file of your child theme or create a new functions.php file for your child theme with the above explained code. You can also just download the example functions.php file we created to get you started.

You also need to delete the following code snippet in your existing style.css:

/* This will import the stylesheet from the Theme Name parent theme */
@import url('../yourthemename/style.css');
Your Feedback and Questions

Do you have further tips or questions regarding child themes? Please just write a comment to the post below, we are looking forward to hear from you!

Further helpful links regarding WordPress child themes:
Child Theme information on the WordPress.org website

8 comments on “How To Create A WordPress Child Theme – The Right Way

  1. Hi, Ellen and team,
    I’ve applied the changes in BaylysChild and I think it’s all OK but WP is writing me this message after editing style.css in the child:
    ‘Este tema está roto. No encontramos el tema principal. Por favor, instala el tema principal “Baylys”.’
    i.e. (my own translate): ‘This theme is broken. We don’t find the main theme. Please, install the main theme “Baylys”‘.
    Is there anything to do with that?
    Best,
    Joan @mirato71

    • Hi Joan,
      I’m so very sorry, I just learned that I will need to make some changes to the current Baylys theme first, before the new method will work with the Baylys theme. I’m preparing the changes over the next days, please follow our blog announcing the theme update infos. After the update you will be able to use the new method in your child theme.

      I’m very sorry for all the trouble this has caused you. Thanks so much for your patience!
      Best, Ellen

  2. Thank you! This is super helpful! I hope you write more mini-tutorials like this. There is so much info out there and some is just overly complicated. I use your themes for two of my sites! They are so well made!

    • Hi Luisa, thanks so much for your great feedback, I’m so happy that you like the shorter posts. Yes, I will definitely prepare more posts like this for our blog :)
      Best, Ellen

  3. Hi Ellen, thanks for the helpful post. Can you say more about what this changes? What improves with the new technique and what is the reason for this?

  4. Hi! Are there any news for this issue?
    Best, Joan

  5. Hello!
    What’s name of the font(or fonts) that used at post’ image? (wordpress-child-themes-thumb1.jpg)
    Thanks

  6. I just followed your exact method with a parent theme and child theme, but it does not work with functions.php, only withimport. WordPress continues to say that it can not find the parent theme. Parent theme is built with less, can it be the reason? I followed your instructions and codex.wordpress. I have tjeck the director folder and css file in both themes.

    The parent theme is not one of yours, but maybe you have an idea of what might be wrong?

    Best
    Heidi

Leave a Reply

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