Creating Child Theme, Most Basic Steps

Last updated on February 15th, 2017 at 04:03 pm

Listing below the most basic steps for creating Child Theme.

  1. Create a new directory in the same location as your parent themes folder residing in /wp-content/themes. Or full path as:-
    Wordpress Child Theme Location
    WordPress Child Theme Location
    • /home/[YourTopLevel-WebSpace-Folder]/public_html/wp-content/themes

  2. Name the directory using name of the parent theme folder with “-child” appended to it.
    • For examples: If your theme is named “YourResponsiveTheme”, then child theme will be “YourResponsiveTheme-child”.
    • Take note: no space allowed in your new directory’s name.
  3. Next, use Notepad to include below lines in the content. Amend as per your theme’s name.
    • /*
      Theme Name:     Your Responsive Theme
      Theme URI:          http://YourWebsiteName.com/
      Description:         Child theme for Your Responsive
      Author:                  Your Author Name here
      Author URI:          http://YourWebsiteName.com/about/
      Template:              YourResponsiveTheme
      Version:                1.0.0
      */

  4. Save the new file as style.css. This is the only file exist in your theme child folder.
  5. Important requirement are Template and Theme Name. Template refers to directory name of parent theme, in this case, is YourResponsiveTheme
  6. Paste below code right after the */.

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

  7. Change accordingly to your template name. In this case, is “YourResponsiveTheme”.
  8. Log in to your site’s dashboard, and go to Administration Panels > Appearance > Themes. You will see your child theme listed there. In this case, it should show the one create with your Author Name from earlier stylesheet created, e.g.:
    • Your Responsive Theme
      By Your Author Name here

  9. Create another file on the same child folder and name the file as functions.php
  10. Copy and add this following codes.
    1. <?php
      function theme_enqueue_styles() {
      
          $parent_style = 'parent-style';
      
          wp_enqueue_style( $parent_style, get_template_directory_uri() . '/style.css' );
          wp_enqueue_style( 'child-style',
              get_stylesheet_directory_uri() . '/style.css',
              array( $parent_style )
          );
      }
      add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );
      ?>
  11. Return to Dashboard > Appearance > Theme.
  12. Activate the child theme. Click Activate.
  13. Any customized codes for updating stylesheet can be pasted into this newly created style.css file.