Featured Video Play Icon

WordPress Child Theme Development

WordPress Tutorial: In simple steps, going to show you how to do a  WordPress Child Theme Development. The following codes are tested and can be used for any child theme development.

About WordPress Child Theme: A WordPress child theme is a theme that inherits its functionality from another WordPress theme, called parent theme. A child theme is the recommended way of modifying an existing theme without breaking parent theme functionality.

Why use a WordPress Child Theme?

There are many reasons why you should use a WordPress child theme and some of them are:

  • Modifying WordPress main theme files and folders directly can be lost in future updates.
  • Easy to recover from an accidental coding error
  • Edit or Add your own custom functions
  • Speed up the theme development process

Let’s do the WordPress Child Theme Development

WP child theme consists of at least one directory (the child theme directory) and two files (style.css and functions.php), which you will need to create:

  1. The child theme directory
  2. style.css
  3. functions.php

Step 1: Create a folder and name it child-theme (You can use any name)

Step 2: Create a style.css file inside newly created child theme folder

Step 3: Open style.css file and add this below codes

/*
Theme Name: Child Theme
Theme URI: https://www.bnwebdesign.com
Author: Emdad Khan
Description: Developing WordPress Child Theme for new WP Learner
Template: twentyfifteen
*/

Step 4: Make the necessary changes as you need in “Theme name, Theme URI, Author, Description” . In the template section “Add the main theme folder name”  WordPress 2015 theme folder name is twentyfifteen.

Step 4: Save it.

The final step is to enqueue the parent and child theme stylesheets. Note that the previous method was to import the parent theme stylesheet using @import: this is no longer the best practice, as it increases the amount of time to load styles.css

The correct method of enqueuing the parent theme stylesheet is to add a wp_enqueue_scripts action and use wp_enqueue_style() in your child theme’s functions.php.

You will, therefore, need to create a functions.php in the child theme folder or directory. The first line of your child theme’s functions.php will be an opening PHP tag <?php, after which you can enqueue your parent and child theme stylesheets. The following example function will only work if your Parent Theme uses only one main style.css to hold all of the css. If your child theme has more than one .css file (eg. ie.css, style.css, main.css) then you will have to make sure to maintain all of the Parent-Theme dependencies.

Step 5: Create a functions.php file and add the below codes

add_action( 'wp_enqueue_scripts', 'load_theme_stylesheet' );
function load_theme_stylesheet(){
    wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
}

Step 6: Save it.

Step 7: Upload the child theme in wordpress wp-content > themes directory.

Step 8: Go wordpress dashboard > Appreance > Theme section

Step 9: You will see the wordpress child theme and is ready to activate.

Step 10: Just activate it and you are done.

One thought on “WordPress Child Theme Development

Leave a Reply

Your email address will not be published. Required fields are marked *