GeneralWordpressPHPSoftware

WordPress – Child Theme Steps

Summarizing the steps explained in the WP Codex for creating a child theme.

Source:https://developer.wordpress.org/themes/advanced-topics/child-themes/

  1. Select theme to use via WP dashboard -> Appearance -> Themes
  2. Create new folder named after selected theme with ‘-child’ appended to the end (ie ‘Theme Name-child’)
  3. In the theme child folder, add these files:
    1. style.css
    2. functions.php
  4. Insert this header information in the ‘style.css’ file
    /*
     Theme Name:   Twenty Fifteen Child
     Theme URI:    http://example.com/twenty-fifteen-child/
     Description:  Twenty Fifteen Child Theme
     Author:       John Doe
     Author URI:   http://example.com
     Template:     twentyfifteen
     Version:      1.0.0
     License:      GNU General Public License v2 or later
     License URI:  http://www.gnu.org/licenses/gpl-2.0.html
     Tags:         light, dark, two-columns, right-sidebar...
     Text Domain:  twenty-fifteen-child
    */
    
    
  5. Update this information ensuring that:
    1. Theme name is unique (best practice is to use the name of the parent theme with ‘child’ added to the end
    2. Template lists the name of the parent theme
  6. Insert this script into the function.php file (that was created for the child theme)
    <?php 
    
      add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' ); 
    
      function my_theme_enqueue_styles() { 
    
        // Example: 'parent-style' is 'twentyfifteen-style' 
        //           for the Twenty Fifteen theme
        $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 ), wp_get_theme() );
    
        get('Version'));
    
      }
    ?>
    
    
  7. NOTE: Ensure the $parent_style variable is set to the handle used by the parent theme. The handle can be found by searching in the parent’s theme folder for the ‘functions.php’ file and searching for: ‘wp_enqueue_style’. The first argument is the handle to use.
  8. To display an image in the WP theme selection an image named ‘screenshot’ needs to be added to the child theme folder.
  9. Child theme should now be able to be selected in the WP dashboard (Appearance->themes).
  10. Update css in the style sheet, functions in the functions file and copy over any theme templates that you want to modify. Modifications will not impact the parent theme and updates to the parent theme will not erase the changes made in the child theme.

 

Leave a Reply

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