create a WordPress child theme

In this tutorial I walk you through how to create a WordPress child theme. Once familiar with the procedure, creating a WordPress child theme can be accomplished in just a few minutes.

What is a WordPress child theme

A WordPress child theme is a sub theme that inherits all functionality, features, and style of its parent theme. Child themes are a safe way to modify a WordPress theme without actually making any changes to the parent theme’s files.

The reason to Create WordPress Child Theme is to avoid losing your theme customizations during a theme update.

How it’s done

1. Create a new folder with 2 key files. (style.css and screenshot.png)
2. Use a text editor to create the new document and save it as style.css. Open the style.css file, copy and paste the content below, add your own info and save.

/*
Theme Name: This is the Title
Theme URL: http://www.yourwebsite.net
Author: Your name
Author URL: http://www.yourwebsite.net
Template: Template Name
Version: 1.0
*/

@import url (“../yourthemename/style.css”);

Note: If you have any CSS customizations add them below this line – @import url (“../yourthemename/style.css”);
3. Open Photoshop or any image editor. Create a new thumbnail image for your child theme. Make it as pretty as you like and save as an optimized .jpg, .gif or .png in this size (300px by 225px).

Two ways to upload your child theme

1. File Manager, Web Host cPanel

  • Zip up the child theme folder, go to cPanel and locate the file manager.
  • Once inside the file manager, upload the zip file to your theme folder.
  • Once your zip file is uploaded into your theme folder you can now extract the contents.
  • Once confirmed, delete the zip file.

2. FTP, FileZilla, CuteFTP etc

In this case there is no need to zip it.

Open your FTP client and log into your account.

Locate your WordPress theme folder.

Create a new folder.

Since my theme is Headway, in this example I will call it “headway-child”. Now open the new child theme folder and upload the contents to it – (style.css and screenshot.png) If you did everything correctly you should be cleared to update your theme without losing your css customizations.

Post Views: 474

Leave a Comment