DesignWall

The A to Z guide: How to create a WordPress child theme

How to create WordPress child theme

Last week, we have had a nice write-up on WordPress child theme topic, which covers what a WordPress child theme is and how it should be useful for your web project.

As a follow up, in this how-to tutorial, we will help you produce a child theme. Remember our WordPress blog and portfolio theme DW Wall, which features various styles as WallPress, WallChristmas, WallPin and WallDark? To bring forth such unique styles, we have applied the technique of creating child themes for WallPress theme so that we can generate any style we want.

Today we are going to help you achieve just that. You’d learn all basic steps needed to create a WordPress child theme for any theme you like.

Ready? Now let’s start.

1. Create your child theme folder

The first thing you need to do is to create a new folder for your child theme in the theme directory wp-content/themes. The folder name should not contain any space and it’s common to name the child theme folder as “parenttheme-child” to make it easy to identify.

For example, if you are making a child theme for WallPress theme, your folder name would be WallPress-child. However, you can name the folder whatever you like, such as WallPin, WallDark for example.

Create child theme folder

2. Create your child theme’s style.css file

After having a child theme folder, you need to create a style sheet file in it to make your child theme valid. In the new folder, create a file called style.css. This file should start with the following lines:

/*
Theme Name: WallPin
Theme URI: http://cmspioneer.com/designwall/wordpress/themes/dw-wall/
Author: DesignWall
Author URI: http://cmspioneer.com/designwall/
Description: This is a sample child theme for WallPress
Version: 1.0
License: GNU General Public License v3 or later
License URI: http://www.gnu.org/licenses/gpl-3.0.html

Tags: black, brown, orange, tan, white, yellow, light, one-column, two-columns, right-sidebar, flexible-width, custom-header, custom-menu, editor-style, featured-images, microformats, post-formats, rtl-language-support, sticky-post, translation-ready

Text Domain: wallpin
Template: wallpress
*/

You could change most of the information above to suit your specific needs, especially the Theme Name and Template. Make sure you fill in the right parent theme name in the Template line and the right child theme name in the Theme Name line.

3. Modify your child theme’s CSS

Now since you have a style.css file for your child theme, you would need to import the CSS from the parent theme into the child theme and add new customization to it. You can do this by adding the following snippet to your child theme’s CSS file:

@import url('../dw-wallpress/style.css');

/* Theme customization starts here*/
body {font-size: 16px;}

In the @import section, make sure you enter the correct path to your parent theme’s css file. Your child theme will then reuse all styles from this parent theme. If you want to make any change, just add your new CSS information right below, such as body {font-size: 16px;} in this example, to change the font size to 16px.

You can be sure that the CSS in the child theme’s style.css file will overwrite the original CSS in the parent theme once your child theme is activated.

4. Activate your child theme

To get your child theme go live, just log into your WordPress admin area, then navigate to Appearance >> Themes. Choose the newly created child theme and hit Activate. Your child theme will then be listed as the current theme.

Activate your WordPress child theme in back-end

5. Changing other PHP theme files

Other than the style.css file, if you want to change any PHP theme files in the parent theme, simply copy that file to the child theme folder directory and edit it right there. For example, if you need to modify the 404.php or the header.php file in the parent theme, just duplicate that file to the child theme folder. Any change made to the file there will override the equivalent file in the parent theme directory when the site loads.

6. Editing the function.php file

Similar to modifying the style.css file or any PHP theme files, when you need add additional functions into the functions.php file, simply create a functions.php file in the child theme folder. However, this file will not override the functions.php file in the parent theme directory but it will load in addition to the parent theme functions.php file.

<?php

/* custom PHP functions start here */

?>

7. Write custom JavaScript functions

When you need to add new JavaScript functions to your theme, you can follow these steps.

<?php

function custom_scripts() {

wp_register_script( 'custom-script', get_stylesheet_directory_uri() . '/assets/js/custom.js', array() , false, true );

wp_enqueue_script( 'custom-script' );

}

add_action( 'wp_enqueue_scripts', 'custom_scripts', 99 );

8. Notes

When you copy the file you want to edit from the parent theme to the child theme folder, make sure that its path should match as in the parent theme folder. For example, if you want to edit the 404.php file in “/parenttheme/php/404.php”, you should place it in “/childtheme/php/404.php”.

That’s it! That’s all you need to know about creating a child theme from editing style sheet to adding new Javascript functions. Are you ready to  make one of your own? Don’t forget to share with us your result after this 🙂

Exit mobile version