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 e...
Before creating a child theme, try your theme “colors"
option and “Additional CSS”
• In this presentation, we are using Tw...
Where are my theme option and “Additional CSS”?
Find your theme options by using “Customizer”. Dashboard -> Appearance -> ...
I. Creating Child Theme manually without a plugin
This is the most recommended method, as you will create it manually, so ...
2. Create two files, style.css, and functions.php. Optionally, you can add a screenshot.png file.
3. Copy and paste the ch...
II. Creating Child Theme easily with a plugin
This method is to avoid re-activating your widgets or theme settings process...
Step 5 and 6, we leave the options
as they are, unless after analyze
you have some suggestions from
the plugin.
7. Customi...
3. Well done, now you have your child theme created. You can preview and activate it.
What next? We are done, and these st...
Resources:
• https://codex.wordpress.org/Version_4.7
• https://wordpress.org/plugins/child-theme-configurator/
• Blog post...
Upcoming SlideShare
Loading in …5
×

Creating a Child Theme with WordPress 4.7 or Newer

328 views

Published on

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.

Published in: Education
  • Be the first to comment

Creating a Child Theme with WordPress 4.7 or Newer

  1. 1. CREATING CHILD THEME WITH WORDPRESS 4.7 OR NEWER
  2. 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. 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. 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. 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. 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. 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. 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. 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.
  10. 10. 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

×