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:
[code]
<?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’ );
}
[/code]
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:
[code]
/*
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. */
[/code]
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:
[code]
/* This will import the stylesheet from the Theme Name parent theme */
@import url(‘../yourthemename/style.css’);
[/code]
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
Leave a Reply