The Basics of Child Themes
There are many reasons why you should create child themes when using any customization. If you modify the CSS or PHP directly in a WordPress theme, and later update the theme, all of your changes will be lost.
With child themes, you can update the parent themes without overwriting your custom styles.
I prefer to use a theme released directly from WordPress.org, such as Twenty Fourteen, Twenty Fifteen, Twenty Sixteen, etc., because they are the most stable and maintained.
Sometimes, none of these are close enough to the design I’m going for, and I’d spend far too much time rewriting and modifying it.
In those cases, I browse the Popular and Featured themes on WordPress.org, looking mainly for active installs, rating and number of ratings, and when it was last updated.
Creating a child theme opens up a great deal of customization, without being overwhelming. You can customize your child theme as much or as little as you want.
For the purpose of this tutorial, I’m going to be using Twenty Seventeen (to begin the theme I will be using for this site!).
The first step when creating a child theme, and really the only required step is the header in the style.css file.
This is the structure I follow for my Sass, SCSS, or Stylus files, more or less:
stylus/ |__ reset.styl |__ typography.styl |__ colors.styl |__ header.styl |__ body.styl |__ footer.styl |__ media-queries/ |__ 200.styl |__ 480.styl |__ 768.styl |__ 992.styl |__ 1200.styl
As stated above, I develop child themes locally before uploading them to a live site.
So, create a folder in your themes directory, i.e. /var/www/html/wordpress/wp-content/themes, named twentyseventeen-child, or as appropriate if you’re using a different parent theme.
Create your style.css file and add the following code.he Basics
This header must be at the top of your style.css file (or style.styl), to be a valid Child Theme.
/* Theme Name: Twenty Seventeen Child Theme URI: Author: Kimberly Pennington Author URI: http://kimberly.codes Template: twentyseventeen Description: Version: License: GNU General Public License v2 or later License URI: http://www.gnu.org/licenses/gpl-2.0.html Tags: Text Domain: twentyseventeen-child This theme, like WordPress, is licensed under the GPL. Use it to make something cool, have fun, and share what you've learned with others. */ @import url("../twentyseventeen/style.css");
Once you have saved the stylesheet, you should be able to see your child theme listed on the Themes Page.
To show an image instead of the blank transparency, you can either copy the screenshot.png from your parent theme, or create a new screenshot.png.
You can take a screenshot and simply add “CHILD THEME” across the picture, or take a screenshot once you have done some customization.
If you use an image different from the parent theme, it makes it a little easier to distinguish which is which on your Themes page.
The recommended dimensions for screenshot.png are 1200 x 900.
You should now be able to activate the theme and begin making your modifications!
In a later post, I’ll show you had to make some serious changes to the themes, but for now, you can experiment with new CSS styles.
As always, if you encounter any errors during the process, remember to Google that shit!
Errors are inevitable when learning new skills.
The best way to learn new skills is to keep going, and keep digging, when you run into these problems.
Though it can be frustrating at times, in the end you will have learned something new! (Yay!)
Thanks for reading!