If you have a WordPress website, I recommend creating a child theme for your site's main theme. This is because themes are continuously updated for a variety of security or user experience reasons. If you have added custom coding or CSS to your theme, without using a child theme, those revisions will be lost and overwritten when the theme is updated.
That's heartbreaking and it happens to a lot of new WordPress site owners. At some point, we all have lost some customizations. It's completely preventable.
Take note that some themes/frameworks create their own child theme, which is very nice. Not all do. For instance, I recently had to do it for a site using Elegant Theme's Divi theme. If you purchase a theme or framework from a reputable company, the support area for that theme should have an article about Child Themes. I recommend checking your support area first. As to how to buy a theme and what to look for, that's a whole other topic I'll cover in an upcoming post.
In this video, I walk through how to add a child theme to one of WordPress's pre-loaded themes, Twenty Twelve. A friend of mine was having issue with doing this task, so I thought I'd make a short video using this theme to show as an example.
Before doing any work on your site, back it up with something like BackupBuddy (my affiliate link) which can do both the database and the FULL website. Seriously, it's not the same as using your host's database tables backup. It's my favorite plugin because it has rescued my hard work before.
1) Navigate to site using either your FTP service (in the video, I use Coda, but there are lots of great FTP services on the market) or go into your host's cPanel and click on the File Manager. Next you'll navigate to your site's file folders.
2) Go to the following folder: wp-content/themes. You should see your theme there.
3) Make a new folder called the theme name and add Child to the name. In the video I made a folder called twentytwelve-child.
4) Go to this article (it's a great read) on the WordPress.org codex and grab the code for the style.css file for a child theme. It looks like this:
/*
Theme Name: Twenty Twelve Child
Theme URI: http://example.com/twenty-twelve-child/
Description: Twenty Twelve Child Theme
Author: John Doe
Author URI: http://example.com
Template: twentytwelve
Version: 1.0.0
Tags: light, dark, two-columns, right-sidebar, responsive-layout, accessibility-ready
Text Domain: twenty-Twelve-child
*/
/* =Theme customization starts here
————————————————————– */
Yes, you can copy it here. I do encourage you to read that article on the Codex.
5) In this style.css file, the important line is the one you define the Template: Your original template name (Jupiter, Divi, TwentyTwelve, etc.). This is the most important piece of the information in this new style sheet.
6) Now we want to tell the browsers to find the other style sheet. I did that in the video by using the following code inside the style sheet
@import url('../twentytwelve/style.css');
7) Save this file in your new child theme folder by saving it as style.css.
8) Login into your WordPress site, navigate in the Dashboard to Appearances-> Themes and activate your new Child Theme. If you want to get real fancy you can upload a screenshot of your site to that child theme folder. Size it 300 pixels x 225 pixels, and name it screenshot.png. Bam! It will show up in the Appearance area with a neat thumbnail. I know, overkill.
So now, when you make changes to your CSS file, do it to the CHILD style.css file. I show you how to do this in the video by importing a Google font and changing the H1, H2, and H3 styles. Also, this little folder is great to make a copy of your footer.php file, and make custom edits or even a copy of the functions.php file if you're getting wild and crazy.
NOTE: There is an additional method you can use by creating a functions.php file for your child theme folder instead of the method I describe in the video using the @import url to call forth the main theme's style.css file. You can read all about how to use that method in the Codex. It's really just creating a copy of the functions.php file, uploading into the child theme and adding in this code:
function parent_css_theme_style() {
wp_enqueue_style( 'parent-style', get_template_directory_uri().'/style.css' );
}
add_action( 'wp_enqueue_scripts', 'parent_css_theme_style' );
For some, that's a little too much techie; therefore, I showed in the video the method described in step 6 using the @import.
Happy coding!
