CREATING CHILD THEME

WITH WORDPRESS 4.7

OR NEWER

This presentation will work for WordPress 4.7 or newer version. Since WordPress 4.7 was released on December 6, 2016, it enables the users to add their custom styles with its “Additional CSS” feature.

With this feature, users will no longer need a child theme to modify their website’s stylesheet. Additionally, for Twenty Seventeen, default theme of WordPress 4.7, it has the “Colors” option to customize the theme colors.

For other users who don’t use Twenty Seventeen, they can look at their theme’s colors and if it supports “Additional CSS” first before creating a child theme.

So you are WordPress 4.7 users, when do you need a child theme?

When you need to customize more than what your customizer and theme options can do.

I hope you will now understand in what cases we will need a child theme, and when we will not.

With this presentation, you will find two methods creating a child theme, manually and with a plugin help. Thank you for reading this presentation. Kimi from wpvidZ.com

Introduction

Before creating a child theme, try your theme “colors" option and “Additional CSS”

• In this presentation, we are using Twenty Seventeen default theme, if you are working with other theme, check your theme’s current options.

Some theme developers does not include “Additional CSS” feature.

• Some themes even have an option for you to create a child theme in its customizer.

• Some themes are coded differently than the others. In short, this will depend on the theme you are using.

Where are my theme option and “Additional CSS”?

Find your theme options by using “Customizer”. Dashboard -> Appearance -> Customize

Depending on what theme you are using, you should see your theme options once you are in “Customizer”. In this picture, with Twenty Seventeen, you will see many theme options, such as “Site Identity”, “Colors”, until “Additional CSS”. (left picture)

On the right picture, is an example of another theme, the theme has different options than the default theme.

I. Creating Child Theme manually without a plugin

This is the most recommended method, as you will create it manually, so you know it works, and also learn the structure of a child theme.

One drawback, you will lose your widget or customizer setting once you activate your child theme. You can reactivate your widgets again in Appearance - Widgets (Inactive widgets)

Steps:

1.Creating a child theme folder in your wp-content/themes/ directory. I called mine, as “twentyseventeen-child”

2. Create two files, style.css, and functions.php. Optionally, you can add a screenshot.png file.

3. Copy and paste the child theme codes from WordPress codex to your style.css and functions.php. For the style.css change the text to your information accordingly. Both files, should have contents as pictures below.

style.css

functions.php

II. Creating Child Theme easily with a plugin

This method is to avoid re-activating your widgets or theme settings process. The only drawback is while it is easy and fast to do, but you miss a chance to understand a child theme structure practice, and also more usage of plugin in your back end area. However, after tested, with the help of this plugin, you can still have the child theme, and using one less plugin at the end.

Steps:

1.Install “Child Theme Configurator” plugin. 2.Go to “Tools” - “Child Themes”.

Follow the plugin instruction.

1. Select an action: Create a new Child Theme.

2. Select a Parent Theme: Twenty Seventeen.

3. Analyze the Parent Theme. If for some reasons, you have errors here, then I suggest you to contact your current theme’s developer.

4. Name the new theme directory.

Step 5 and 6, we leave the options as they are, unless after analyze you have some suggestions from the plugin.

7. Customize the Child Theme Name, Description, Author, Version. etc.Fill in your info

8. Check this option, “Copy Menus, Widgets, and other Customizer Settings from the Parent Theme..”

9. Click the “Create New Child Theme” blue botton.

3. Well done, now you have your child theme created. You can preview and activate it.

What next? We are done, and these steps are optional; 4. Deactivate and delete the plugins. My reason is, reduce the usage of plugins when it is not really necessary.

5. Replace the codes inside style.css and functions.php of the child theme with the one from codex, described in the manual steps earlier, or click this shortcut link.

6. Replace the screenshot.png file with ours. Feel free to create one or download from DropBox. (you can download it without registering.

Closing

I hope this presentation can help you, and if it does, please like and share. Thank you.

Kim.

Resources: • https://codex.wordpress.org/Version_4.7 • https://wordpress.org/plugins/child-theme-configurator/ • Blog post: https://www.wpvidz.com/create-wordpress-child-theme-manually-or-with-

plugin/ • Video Tutorial: https://youtu.be/B2E8FYOAlrE