{"id":149194,"date":"2015-04-30T23:12:54","date_gmt":"2015-04-30T21:12:54","guid":{"rendered":"http:\/\/www.elmastudio.de\/?p=149194"},"modified":"2018-03-13T03:02:03","modified_gmt":"2018-03-13T02:02:03","slug":"how-to-create-a-wordpress-child-theme-the-right-way","status":"publish","type":"post","link":"https:\/\/www.elmastudio.de\/en\/how-to-create-a-wordpress-child-theme-the-right-way\/","title":{"rendered":"How To Create A WordPress Child Theme – The Right Way"},"content":{"rendered":"

Since recently it was considered best practice in WordPress to include the parent stylesheet (style.css)<\/em> with the @import<\/em> 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()<\/em> to include you parent theme stylesheet this way. I will show you shortly how this is done. <\/p>\n

Create your functions.php<\/h4>\n

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

[code]
\n<?php
\n\/**
\n * Theme Name child theme functions and definitions
\n *\/<\/p>\n

\/*\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014*\/
\n\/* Include the parent theme style.css
\n\/*\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014*\/<\/p>\n

add_action( ‘wp_enqueue_scripts’, ‘theme_enqueue_styles’ );
\nfunction theme_enqueue_styles() {
\n wp_enqueue_style( ‘parent-style’, get_template_directory_uri() . ‘\/style.css’ );<\/p>\n

}
\n[\/code]<\/p>\n

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

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

\/*
\nYou can start adding your own styles here. Use !important to overwrite styles if needed. *\/<\/p>\n

[\/code]<\/p>\n

Note on Elmastudio Child themes:<\/h4>\n

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.<\/p>\n

You only need to add the code showed above in the functions.php<\/em> file of your child theme or create a new functions.php<\/em> 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.<\/p>\n

You also need to delete the following code snippet in your existing style.css:<\/p>\n

[code]
\n\/* This will import the stylesheet from the Theme Name parent theme *\/
\n@import url(‘..\/yourthemename\/style.css’);
\n[\/code]<\/p>\n

Your Feedback and Questions<\/h5>\n

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!<\/p>\n

Further helpful links regarding WordPress child themes:
\n– Child Theme information<\/a> on the WordPress.org website<\/p>\n","protected":false},"excerpt":{"rendered":"

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 […]<\/p>\n","protected":false},"author":1,"featured_media":149302,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1248,910,1247,1276],"tags":[1412,1401,1415],"class_list":["post-149194","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-popular","category-wordpress-en","category-wordpress-newbies","category-wordpress-tips","tag-child-theme-en","tag-featured-en","tag-parent-theme-en-2"],"_links":{"self":[{"href":"https:\/\/www.elmastudio.de\/en\/wp-json\/wp\/v2\/posts\/149194","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.elmastudio.de\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.elmastudio.de\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.elmastudio.de\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.elmastudio.de\/en\/wp-json\/wp\/v2\/comments?post=149194"}],"version-history":[{"count":0,"href":"https:\/\/www.elmastudio.de\/en\/wp-json\/wp\/v2\/posts\/149194\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.elmastudio.de\/en\/wp-json\/wp\/v2\/media\/149302"}],"wp:attachment":[{"href":"https:\/\/www.elmastudio.de\/en\/wp-json\/wp\/v2\/media?parent=149194"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.elmastudio.de\/en\/wp-json\/wp\/v2\/categories?post=149194"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.elmastudio.de\/en\/wp-json\/wp\/v2\/tags?post=149194"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}