How To Create A Child Theme For Your Current WordPres Theme

Creating a child theme for the current theme in your WordPress website is a great method to improve website security. As we know, WordPress is an open-source CMS platform,  a child theme can prevent your customization from being overwritten when the parent theme is updated.

In this article, we will introduce how to create a child theme for your current theme in WordPress.

Step-by-step guide on creating a child theme

You can create the child theme in the folder of your WordPress site directory, or you can package the child theme folder as a .zip file and upload it through the WordPress dashboard. Here’s a step-by-step guide. Here we crete the child theme folder in the local PC, and zip and upload it.

Step 1: Create the Child Theme Folder

  • In your local environment (your computer), create a folder for the child theme, e.g., storefront-child.
  • Inside this folder, add two files:
    • style.css – This is where you add the child theme’s header and any custom CSS.
    • functions.php – This will contain any custom PHP code, such as the code to enqueue the parent theme’s stylesheet.
    •  

Step 2: Add Code to style.css and functions.php

  • In style.css:
    Add the following code to ensure WordPress recognizes it as a child theme. Replace "mytheme" with your parent theme’s folder name.

				
					/*
 Theme Name:     storefront Child
 Theme URI:      http://wpcollege.com/mytheme-child
 Description:    storefront Child Theme
 Author:         Your Name
 Author URI:     http://wpcollege.com
 Template:       storefront
 Version:        1.0
 Text Domain:    storefront-child
*/

/* Import the parent theme's stylesheet */
@import url("../storefront/style.css");

				
			
  • In functions.php:
    Add this code to ensure the parent theme’s stylesheet is enqueued properly.
				
					<?php
// Load parent and child theme styles
function storefront_child_enqueue_styles() {
    wp_enqueue_style('parent-style', get_template_directory_uri() . '/style.css');
    wp_enqueue_style('child-style', get_stylesheet_uri(), array('parent-style'), wp_get_theme()->get('Version'));
}
add_action('wp_enqueue_scripts', 'mytheme_child_enqueue_styles');

				
			

Step 3: Create a cover image for the Child Theme

Normally, the current theme contains a cover image, you should also create a cover image for the Child theme,

You can create an image file named screenshot.png and place it in the root of your child theme folder storefront-child.

  • The recommended dimensions for the cover image are 1200 x 900 pixels. WordPress will resize it to fit smaller previews in the theme selection area.
  • The file must be named screenshot.png.

This image will appear as the preview for your theme in the WordPress dashboard.

Step 4: Zip the Child Theme Folder

  • Go to the folder where storefront-child is located.
  • Right-click on the storefront-child folder and select Compress or Send to > Compressed (zipped) folder.
  • This should create a .zip file, e.g., storefront-child.zip.

Step 5: Upload the Child Theme in WordPress

  • Go to your WordPress Dashboard.
  • Navigate to Appearance > Themes.
  • Click on Add New and then Upload Theme.
  • Choose the storefront-child.zip file and click Install Now.
  • Once installed, click Activate.
Here is what it looks like:
 
Scroll to Top