Save your Site Modifications with Child Themes
The vast quantity of available themes is a big reason why WordPress is the platform of choice for so many people. A theme provides an excellent starting point for your WordPress site. However, not all themes are as customizable as you might need. You may have to alter your theme files in order to get the exact look and feel that you desire for your WP site.
Tweaking the CSS or functions of your site is easy enough. Even people with no coding experience can find snippets of code to add to their site from all corners of the always-helpful WordPress community. However, a mistake that new WordPress users often make is editing their themes files directly. Editing your theme files directly works short-term, but if the author of the theme issues an update, the updated version of the theme may vary well overwrite all of your customizations.
Directly altering your themes files also increases your chances of making a mistake that could break your site and be difficult to recover from. To avoid this pitfall, it is a WordPress best practice to install a “child theme” before making any alterations to your theme.
What is a WordPress Child Theme?
The definition below comes directly from the WordPress.org Codex:
“A WordPress child theme is a theme that inherits the functionality of another theme, called the parent theme, and allows you to modify, or add to, the functionality of that parent theme.”
In other words, all that a child theme needs to be is a single CSS file. Or, a child theme can be expanded to include as much as a full fledged WordPress theme including a functions file and template files.
Creating A Child Theme for your WordPress Site
For the purposes of this tutorial, we will show you how to create the child theme by uploading the files to your Cpanel. (If you are hosting the site yourself, or your host doesn't use Cpanel, the process will be essentially the same). Using an FTP client is a faster method, but configuring FTP is a topic for another article. If you already have FTP access, feel free to use it.
Specific Steps for Creating a Child Theme…
Step One: Create a directory (folder) in your WordPress themes folder. The standard location for your themes directory is sitename > wp-content > themes. Create a new folder and name it “yourtheme-child.” For the purposes of this tutorial we will be creating a child theme for the standard “twentyeleven” theme. So we create a folder named “twentyeleven-child.”
Step Two: Open your text editor and copy/paste the following text into it.
Theme Name: Twenty Eleven Child
Theme URI: http://example.com/
Description: Child theme for the Twenty Eleven theme
Author: Your name here
Author URI: http://example.com/about/
This is the standard head for a WordPress CSS file. However, the only required information is Theme Name and Template. The template field must match the name of the parent theme.
Step Three: Find your original themes CSS file / parent theme files. (This can be found a few ways, including from within the WordPress admin under Appearance > Editor > Stylesheet, or in your themes directory at, sitename > wp-content > themes > twentyeleven > style.css.) Copy and paste everything under the head into your child theme's CSS file.
Any time you see text in between symbols like this /*example text */ it is what's referred to as “commented out” this text is only there to give information about the code to users and does not affect the code. In this case, copy and paste everything under the comments (head) at the top of the CSS file.
Note: You must place this code in the new file because WordPress will load child theme's CSS file instead of the parent theme's. The other files will load normally, and any changes can be made by inserting new code into a blank file.
Step Four: Save the file as “style.css” and upload it to your child theme's directory.
Step Five: Activate the theme. In your WordPress admin go to Appearance > Themes and activate Your Child Theme.
Step Six: Visit your site. Since no changes have been made yet, the site should look and function exactly the same as before.
Step Seven: Make your changes to the CSS file in your child theme's directory. You are now free to alter your theme's style with out fear of losing your alterations after an update.
Making changes to your functions and template files follows a similar process, but that's a topic for another article.
That's all there is to it. A simple and fool proof way to preserve your customizations while keeping your theme up-to-date. Thanks for taking time to view this Upload WP tutorial and please feel free to leave your comments below.