Key Steps to Create a Child Theme<\/strong><\/p>\n\n\n\n Let’s do this!<\/p>\n\n\n In a nutshell, WordPress child themes are a more stable option for making customizations to your website. Let’s explore some of the reasons why:<\/p>\n\n\n Furthermore, WordPress child themes are relatively simple to set up. If you’re happy to tinker with some simple source code, read on for the simple steps you need to get a child theme up and running for your own site.<\/p>\n\n\n\n (If you’d prefer to avoid any code work, skip down to the conclusion<\/a>, we have a plugin recommendation that will do most of the work for you.)<\/p>\n\n\n Before you roll up your sleeves, there are two things we need to do. Firstly, you should back up your WordPress site<\/a>, which is always a good idea before implementing any major changes. There are plenty of ways to do so, but in general, we recommend using the UpdraftPlus plugin<\/a>.<\/p>\n\n\n\n Secondly, we’re going to use a File Transfer Protocol (FTP) client throughout the steps below. If you’re not sure which one to use, check out FileZilla<\/a>, and make sure you’re au fait with the ins and outs of how to use it.<\/p>\n\n\n\n With that out of the way, let’s get started!<\/p>\n\n\n For each new theme you set up on your WordPress website, a folder will be created within your back end. These folders contain all of your theme’s critical files, and it means we also need to create one for our child theme.<\/p>\n\n\n\n Adding an empty folder is straightforward. Open your FTP client and log into your site using the credentials you received during your sign up process (contacting your web host’s support if you can’t find them).<\/p>\n\n\n\n Once you’re in, head to the public_html<\/em> > wp-content<\/em> > themes<\/em> folder. Right-click anywhere you like and select the Create directory<\/em> option:<\/p>\n\n\n Any name will do for this new folder, but we suggest plumping for something that accurately identifies it. For example, Now you have a child theme folder ready, it’s time to add your first file to it \u2013 the style.css<\/em> file. This particular file \u2013 known confusingly as a Cascading Style Sheet (CSS)<\/a> stylesheet \u2013 includes all of the rules for your theme’s design and overall look. Furthermore, any changes you make<\/a> to your child theme’s stylesheet<\/a> will override those of its parent.<\/p>\n\n\n\n Using your favorite text editor (you need to edit text in raw, so don’t use Word for this), create a file that includes the following code:<\/p>\n\n\n\n Naturally, you’ll need to replace some of the text above depending on the theme you’re using as a base. There are two key sections you need to watch out for here \u2013 Theme Name <\/em>and Template. <\/em>The former determines the name your child theme will appear as on your dashboard, whereas the latter establishes its derivative parent theme. To get this right, make sure you include the exact name of the folder where your parent theme resides (located within wp-content\/themes<\/em>).<\/p>\n\n\n\n To finish, save the file as style.css<\/em> and upload it to your child theme folder via FTP.<\/p>\n\n\n If you’re able to activate a parent theme \u2013 which I’m sure you can<\/a> \u2013 activating your child theme is child’s play. Navigate to the WordPress dashboard, and click on Appearance <\/em>> Themes. <\/em>Your new theme should display (albeit with a blank thumbnail), so locate it and click on Activate<\/em>:<\/p>\n\n\n At this point, your child theme will be up and running, but if you check your front end, you’ll notice it’s all a mess. This is because your style.css<\/em> file is still bare. Let’s fix that by importing its parent’s style.<\/p>\n\n\n Just as the style.css<\/em> file governs your site’s style and layout, functions.php <\/em>enables you to add advanced customizations and functionality to your themes. What’s more, it’s the file that will enable you to import the style of your parent theme and begin to get your child theme looking good.<\/p>\n\n\n\n We’ve covered this process thoroughly in our child themes documentation<\/a>, including the code you need to enable the import function – just put this in your new file:<\/p>\n\n\n\n There’s quite a lot there, so rather than type it out, copy and paste it into your own functions.php<\/em> file, then save your changes. Once saved, you’ll need to upload it using FTP in the same way you did with your style.css<\/em> file.<\/p>\n\n\n\n Now your child theme is created, uploaded, and activated, you can begin checking out some of the cool tricks you can implement using the functions.php<\/em> file<\/a>. This file isn’t just for simple style customizations \u2013 developers use this to add functionality to themes in order to make them unique. Quite simply, once you learn the ins and outs of this file, the WordPress theme world is your oyster!<\/p>\n\n\n WordPress child themes are a fantastic tool for streamlining your development process. They lower the risk of causing significant damage to your website while tinkering with its style, and<\/em> they’re simple to set up. In short, there are practically no downsides to using child themes<\/a>.<\/p>\n\n\n\n However, if you don’t fancy getting your hands dirty with code, you can use a plugin such as Child Theme Configurator to do the work for you:<\/p>\n\n\n\n
What WordPress child themes are (and why they’re important) \ud83d\udeb8<\/h2>\n\n\n\n
\n
How to create WordPress child themes manually (in 4 steps) \ud83d\udc7c<\/h2>\n\n\n\n
Step #1: Create a folder for your child theme<\/h3>\n\n\n\n
![\"Creating](\"https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2017\/01\/create-directory.png\")
<\/figure><\/div>\n\n\ntwentyfifteen-child<\/code> would be a good choice for a Twenty Fifteen child theme.<\/p>\n\n\nStep #2: Make a new CSS stylesheet<\/h3>\n\n\n\n
\/*\nTheme Name: Twenty Fifteen Child Theme\nTheme URI: https:\/\/wordpress.org\/themes\/twentyfifteen\/\nDescription: Twenty Fifteen Child Theme\nAuthor: WordPress\nAuthor URI: WordPress.org\nTemplate: twentyfifteen\nVersion: 1.0.0\n*\/<\/code><\/pre>\n\n\n\nStep #3: Activate your child theme<\/h3>\n\n\n\n
![\"Activating](\"https:\/\/mllj2j8xvfl0.i.optimole.com\/cb:c5QE.37290\/w:auto\/h:auto\/q:mauto\/f:best\/https:\/\/themeisle.com\/blog\/wp-content\/uploads\/2017\/01\/activate-1.png\")
<\/figure><\/div>\n\n\nStep #4: Add a functions.php<\/em> file<\/h3>\n\n\n\n
<?php\nadd_action( 'wp_enqueue_scripts', 'child_enqueue_styles',99);\nfunction child_enqueue_styles() {\n $parent_style = 'parent-style';\n wp_enqueue_style( $parent_style, get_template_directory_uri() . '\/style.css' );\n wp_enqueue_style( 'child-style', get_stylesheet_directory_uri() . '\/style.css', array( $parent_style ) );\n}\nif ( get_stylesheet() !== get_template() ) {\n add_filter( 'pre_update_option_theme_mods_' . get_stylesheet(), function ( $value, $old_value ) {\n update_option( 'theme_mods_' . get_template(), $value );\n return $old_value; \/\/ prevent update to child theme mods\n }, 10, 2 );\n add_filter( 'pre_option_theme_mods_' . get_stylesheet(), function ( $default ) {\n return get_option( 'theme_mods_' . get_template(), $default );\n } );\n}<\/code><\/pre>\n\n\n\nConclusion \ud83c\udfc1<\/h2>\n\n\n\n
![\"Child](\"https:\/\/ps.w.org\/child-theme-configurator\/assets\/banner-772x250.jpg?rev=1557885\")
\t\t\t