With this presentation, I hope you will learn how to create a Child Theme with WordPress 4.7 or newer version using Twenty Seventeen default theme. This presentation covers manual steps and with a plugin help steps.
2. 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
3. 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.
4. 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.
5. 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”
6. 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
7. 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.
8. 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.
9. 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.