Child themes aren’t just for Genesis! You can make a child theme for any WordPress theme, and it’s easier than you think! Before you learn how to make a WordPress child theme, why would you want to make a WordPress child theme anyway? Well, the answer is this: It’s the safest way to modify your theme. Have you ever been in a situation like this? You have a theme you love, but you just want to make one small change. So you go into the theme files and make a couple small edits. Perfect! Then your theme posts an update, and being the responsible WordPress webmaster you are you install it. Boom! All your changes are gone! By making a child theme from your theme you can avoid losing your work when you update your theme.
Now let’s get started!
Step 1: Pick a Theme
To begin pick a theme you are going to work with. It can be any WordPress theme, but there is one small restriction. It cannot be a child theme. That is to say, you can’t make a child theme of a child theme. So you can’t make a child theme from one of Genesis’s child themes (for example Parallax Pro), but you can make a child theme of the main Genesis theme (this is exactly what all Genesis Child Themes are!).
Step 2: Start the Child Theme
First, create a directory or folder. Name it whatever you want, the name of the child theme is good. Or if you want to be more clear try THEMENAME-ChildTheme, just so you know what you are doing. Within your directory create a CSS file named style.css. Open up your style.css file in any text editor you want (I like to use Brackets or Atom, but notepad works just as well) and add the following to it:
/* Theme Name: My Child Theme Theme URI: http://example.com/my-child-theme/ Description: A Child Theme for THEME NAME. Author: Me Author URI: http://example.com Template: originalthemename (this needs to be your original theme's name you can copy this name from the original theme's style file) Version: 1.0.0 License: GNU General Public License v2 or later License URI: http://www.gnu.org/licenses/gpl-2.0.html Tags: light, dark, two-columns, right-sidebar, responsive-layout, accessibility-ready (This is optional) Text Domain: my-child-theme (You can change this to yourthemename just make sure there are no spaces either make it all one word or use hyphens to connect words.) */
From here you can go ahead and add your own CSS to make whatever changes you need to make to the theme. If you want to change fonts or colors this is where you would put that CSS code!
Step 3: Create a Functions File
Within your child theme directory create a PHP file called functions (functions.php). Open up your new functions file in your text editor and add the following code:
<?php
function my_theme_enqueue_styles() {
$parent_style = 'parent-style'; // Change this to your parent or original theme for example the Twenty Fifteen theme is 'twentyfifteen-style'.
wp_enqueue_style( $parent_style, get_template_directory_uri() . '/style.css' );
wp_enqueue_style( 'child-style', get_stylesheet_directory_uri() . '/style.css', array( $parent_style ), wp_get_theme()->get('Version') ); }
add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' ); ?>
This code is telling WordPress to load your new child theme’s stylesheet. It’s also telling WordPress to do this before loading the parent theme or the original theme you worked with. This helps to ensure your styles will not get overruled by the parent theme’s styles. The code also ensures that the child them style is only loaded once, which will help your theme load faster.
After this, you can also make a screenshot of your site to include in the theme’s directory. This screenshot will show up when you view themes in your Dashboard. To do so save your screenshot to the correct size (currently recommended size is 880 x 660 pixels), and in .jpg format, and same it screenshot.jpg.
Step 4: Upload & Activate
Would you believe me if I told you this is the last step? IT IS! How easy is that? Now all you have to do is save your work and upload it to your WordPress site! To upload it you will need to compress your files into one zip file. On PC right click on your child theme directory (folder) and go to “Send To” and then select “Compressed File”. Rename your new compressed file if needed, then upload it like you would any other WordPress theme.
After your theme has been uploaded you can go to your WordPress dashboard > Appearance > Themes and activate your new child theme. The changes you made to the child theme will now show up on your site. Now you will be able to update your parent theme without fear of overwriting your changes and make changes to your child theme without fear of breaking the parent theme!
Learning how to make a WordPress child theme isn’t hard and is the best way to ensure your theme’s changes are done in a safe manner. You can make a WordPress child theme from any WordPress theme! Child themes can be much more complex than this, but they all start like this.
Learning how to make a WordPress child theme, not for you? Get in touch, I’d love to help you spend more time designing by helping taking over coding tasks for you! I have packages for every need. Learn more here!
Leave a Reply