How To Create WordPress Child Theme Manually or With Plugin

This post will use Twenty Seventeen theme, but will work with other theme as well. If it does not, then it is due to your theme’s coding, and you might want to contact the theme’s developer.

WordPress seems to ship new theme each time they have a major update. I don’t know if it is a good thing, but the latest theme, WordPress Twenty Seventeen theme is a very different than other previous themes. The appearance is more corporate look than a blog look.

Why You Don’t Need a Child Theme in WP 4.7 or Newer?

Before we begin, we need to know, that for WordPress 4.7 or newer, together with Twenty Seventeen theme, you do NOT need to create a child theme, if you just want to modify the styles, like colors, background colors, text font, anything that can be achieved with the “Colors” theme option, and “Additional CSS” feature on your Customizer.

If you don’t use Twenty Seventeen theme, but you have WP 4.7 or newer, you can look at your theme option first (in Customizer) if your theme has the color option. If it does not have, you can still use the “Additional CSS” feature,if your theme is supporting WP 4.7 features.

However, if you need to modify some other files that is not included in your theme’s customizer like footer, sidebar, removing or adding functions, then you will need to create a child theme.

Creating a WordPress Child Theme without Plugin

I have recorded a video about manually creating Twenty Fifteen child theme a few years ago, also when Twenty Fourteen was released, I posted the steps using @import CSS method. However this method is now no longer recommended by WordPress Child Theme Codex. Therefore we use the recommended method for today tutorial.

While I still recommend you to follow this video however if you have set up your widgets or customize your website using Customizer, you would lose those customizations after activate your manual created child theme, and re-activate those widgets again from your dashboard (Widgets – Inactive widgets). Of course, this is doable, but mostly we forget in which area the widget was located, etc.

Steps

If you like, you can also download Twenty Seventeen theme from here. After recording my video, I just zipped the file and uploaded, who knows you can use it. The file contains functions.php, a style.css and a screenshot.png. A basic child theme.

Twenty Seventeen One Page Parallax Scrolling Website Style

If you follow these steps, you must be aware that your current widgets or customizer settings will be automatically deactivated once you activate your child theme. If you don’t want this to happen, skip this manual step, and go to the method using plugin below.

1. Create a child theme directory folder on your web server. You can do this, using a FTP client like FileZilla, or login directly to your cPanel.

Mine, I call it, “twentyseventeen-child”.

2. Then, inside that folder, create two files, one is called, style.css and the other one, functions.php.

3. In style.css file, add this line of code:

Complete code, (replace some texts with your info accordingly)

/*
Theme Name: Twenty Seventeen Child
Theme URI: http://yourwebsitehere.com/
Description: Twenty Seventeen Child Theme
Author: Your name here
Author URI: http://yourwebsitehere.com
Template: twentyseventeen
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Tags: light, dark, two-columns, right-sidebar, responsive-layout, accessibility-ready
Text Domain: twenty-seventeen-child
*/

This short code will work too;
/*
Theme Name: Twenty Seventeen Child
Description: Twenty Seventeen Child Theme
Template: twentyseventeen
*/

4. In functions.php, add these following code;

<?php
add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' );
function my_theme_enqueue_styles() {
    wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );

}
?>

More info on codex page.

As you notice, above in the pictures, there is a file, called screenshot.png. This is a screenshot about your new child theme, optional step.

In my opinion, manual creation is still the best, both to learn, and ensure yourself that you created it and it worked.

• Is my site loading fast? I use this shared hosting
• Try my theme >

Creating a Child Theme with a Plugin

The following methods will use the help of a plugin and then deleted the plugin, to reduce the plugin usage once we are done. Less plugin is still better, especially if your site is hosted on a shared hosting, which most sites are, especially newbie websites.

1. Dashboard —Plugins — Add New
Search for “Child Theme Configurator” or download directly from the repository.

If you want to use another plugin, you can do that, but avoid the one that still uses @import CSS code, as it is not recommended anymore since slowing down your website’s loading speed.

Once you have installed it, navigate to Tools — Child Themes

Plugin Configuration that we need to focus on;

2. Select a Parent Theme — Make sure to have “Twenty Seventeen” as the selected theme in the drop down menu. Click “Analyze” button. When it said, the theme is OK, we can continue.

If after analyzing process you found some errors or warnings, I suggest you to contact your theme developer

4. Name the new theme directory. You can change it, but I leave it as is.

7. Customize the child theme info — You can modify anything here, your name, your website, etc.

8. Check the checkbox to save parent theme’s customizer, widget, menu settings. This option is very important if you don’t want to lose your widgets later on.

9. Click Create New Child Theme button.

Once we are done, you can “preview your child theme” by clicking the link on the same page. Then you can activate your new child theme.

2. This step is optional. You can continue using the plugin, but in this method, I will deactivate it and deleted it, because the child theme is still there.

3. After deactivate the plugin, we will clean up the codes in the child theme’s directory. The style.css and functions.php.

For the style.css I delete most things, except the “Template: twentyseventeen” line.

For the functions.php I also deleted all codes and replaced with the one from child theme Codex web page.

4. This is also an option step, uploading the screenshot.png with our own image.

That’s it. We have now created a Twenty Seventeen Child Theme or any child theme without needing to re-activate your widgets and do the menu settings again.