WordPress: Steps to Create Child Theme Manually and Why is it important?

Ever wonder why all your website styles, customization and other theme edits are gone after updating your WordPress theme?

When a new version of theme is released, you will be notified via email for the update. That means your theme files will be updated and your existing customization will be overriden with the new released updates, and viola! Your styles and functions are gone like magic.

When this happens, you will have three options:

1. Restore your Website Files via a Server Backup, or request your developer to do it for you. If you have an auto backup in the Server, you won’t have anything to worry as you can restore your lates file a couple of hours ago without any problem.

2. If you don’t know how to manually revert your web files or it not included in your hosting package, you may need to contact your Hosting Provider to restore a backup for you. Some of the hosting provider do backups multiple times daily, weekly and monthly, while some do it every 3 months. That means you will have to go back to your Website 1week/1month/3months ago depending on when is the latest backup provided by your hosting provider. If you recently added a blog, that means it is gone. And take note that some of the backup services are Not Free.

3. Create a Child Theme. A Child theme automatically inherits its parent’s theme styles, functions and templates. All your custom edits will be done in the child theme so when your original(or parent) theme is updated, you wont have to worry about missing functions and styles The parent-theme’s features and functions theme will be updated but your child theme won’t be affected.

Steps to Create a Child Theme

1. Create a folder inside /wp-content/themes.

Name it with your desired theme name; all small caps, without a space.

Example: dirctojnn or twentytwenty-child

2. Create style.css inside your theme.

3. Add the info lines to your style.css.

Supposing your parent theme directory is twentytwenty, you need to put it as value on the Template label.

The only required info lines are Theme Name and Template.

You may import your css inside style.css or enqueue it inside functions.php.

/*
 Theme Name:     Dircto Jnn
 Theme URI:      http://example.com/dirctojnn/
 Description:    Twenty Twenty Child Theme
 Author:         Janin Directo
 Author URI:     http://example.com
 Template:       twentytwenty 
 Version:        1.0.0
*/

@import url("../twentytwenty/style.css");

/* DirctoJnn style starts here*/

4. Activate your custom theme in wp dashboard and You are Done!

Go to your site’s dashboard > Appearance > Themes > click your newly created theme’s Activate button and you can start adding styles to your pages.

5. Optional Step

If you want to add a Screenshot to your custom theme, just upload your desired image and with the name ‘screenshot.jpg(or jpeg or png)’ inside your theme directory.

Go back to your site’s dashboard > Appearance > Themes > and you can see the screenshot image of your child theme and You’re Finally Done!

Theme Directory
Your Website Dashboard

Conclusion

That’s easy right? Try it yourself and you’ll never get worry about updating your parent theme anymore!

Post a comment

Your email address will not be published.