How to Create a WordPress Child Theme

Blogging Tips WordPress How To Create Child Theme

It is simple, actually. All you need are two files–style.css and functions.php.

On the following steps, it is assume that you just had a fresh install of WordPress.

First step. Create a folder called yourtheme-child placed inside wp-content/themes of your WordPress installation. For example, if your parent theme is “sela”, you can call your child theme as “sela-child”.

Take note of the lowercase or capitalization of the parent theme directory because it will be essential later as we go on.

Second step. Create two blank files name styles.css and functions.php inside the child theme folder. The resulting directory would look like:

wp-content/themes/yourtheme-child

(inside it are your two files above.)

Third step. On your parent theme’s folder, open style.css and copy the stylesheet header. For example, in Sela, it looks like below.  Take note, the theme name and information are different with other themes.

/*
Theme Name: Sela
Theme URI: https://wordpress.com/themes/sela/
Description: Sela is not your typical business theme. Vibrant, bold, and clean, with lots of space for large images, this theme will look great on all devices, from desktop to mobile.
Version: 1.0.15
Author: Automattic
Author URI: https://wordpress.com/themes/
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: sela
Tags: blog, custom-background, custom-colors, custom-menu, featured-images, full-width-template, microformats, right-sidebar, rtl-language-support, sticky-post, translation-ready, two-columns
*/

Fourth step. Paste the copied text into your blank style.css (which is inside your child theme folder). Under the Author URI, add the template name, which in our case is:

Template: sela

The fourth step is important. This is where I almost banged my head to the wall figuring out what is the problem with my installation.



Fifth step. Open the blank function.php file inside your child theme folder and copy-paste the following:

<?php
function pg_enqueue_parent_styles() {

$parent_style = 'parent-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', 'pg_enqueue_parent_styles' );

/*Insert the PHP codes here*/
?>

Save the file. Customize the function name  pg_enqueue_parent_styles based on your preference. The PHP codes above were sourced from codex.wordpress.org/Child_Themes.

Sixth step. This is optional. On your parent theme’s folder, copy the screenshot.png file to the child theme folder.

Seventh step. Go to the WordPress dashboard, Appearance > Themes. If you successfully created a child theme, you will see the parent theme and the child theme. At this time, the active one is still the parent theme.

It is easy to know, which theme is the child theme. While still in the Appearance > Themes, click Theme Details and it will tell you, for example:

This is the child theme of Sela.

Click the Live Preview of the child theme and see if everything works correctly. If it is, then you have created your child time successfully!

Eighth step. Activate the child theme and open a different browser to see if your website looks like as you wish.

WHY I MENTIONED ABOUT THE LOWERCASE THINGY
I created the style.css and functions.php as per the procedures I saw online.  But when I checked Appearance  > Themes,  I had this broken theme error:

The parent theme is missing. Please install the “Sela” parent theme.

What the heck? I even had a fresh copy of Sela folder and why I’m being asked to install again. I figured out why. Because initially, I used “Template: Sela” and inserted it under the Author URI.  The lowercase or capitalization of the theme name matters. Because I had an all lowercase “sela” on my theme folder, I simply changed the letter S into lowercase and saved the styles.css. Believe me, it worked like magic!

ONE LAST THING BEFORE I END THIS POST
Should you encounter a broken theme error asking to add index.php, do not add the file. When I added it, and hitting Live Preview, I got this Uncaught Error: Call to undefined function sela_content_nav().

The reason for this error is because I am missing the complete stylesheet header on the child theme’s style.css. This can be resolved if you follow the third and fourth steps on this post.



There are couple of other PHP errors that I encountered because when I first created the child theme, I already made direct changes to the functions.php. header.php, footer.php and content.php. Yes, I know editing parent theme’s files directly are not recommended. During that time I do not quite understand yet what to do. But I learned as days went by, I finally made the child theme work on my site.

If you encounter errors on creating child theme, drop a comment and maybe, I could be of help to you.

Ymatruz is the author of poetry book: The Coffee Cries Foul. She founded PoetsGig.com hoping to accommodate works of other poets and writers, anywhere in the world. She also writes about her blogging and migration experience on PoetsGig. Her motto: "By experience you learn. By embracing mistakes, you become a master of perfection."
Follow on: Twitter | Facebook | Instagram


Thank you for reading. Tell us what you think.