WordPressHow to create a child theme in WordPress

August 7, 2019by natalie0
  1. Create a new directory in your existing wp-content–>themes folder and name it <parent-theme>-child
  2. Access newly created folder and create a new file called style.css
  3. Populate that file with the following code:
    /*Theme Name: Twenty Seventeen Child 
        Theme URL: webpopular.net
        Description: Twenty Seventeen Child Theme
        Author: John Doe
        Author URL: webpopular.net
        Template: twentyseventeen
        Version: 1.0.0 Text
        Text Domain: twentyseventeen-child   
    */ 
    /*Custom CSS goes after this line
    */
        

    WordPress Child Theme CSS Information

  4. Give this new theme a name and change all other values to match your theme and domain name. The most important field is Template field because it tells WordPress which parent theme your child theme is based on.  Once you are done, click Save.
  5. Add a new functions.php file in the same folder. Don’t copy/paste the code from the parent theme’s file, because it needs to remain separate from any changes you make to the child theme. Instead, create a blank file or add any new .php functions required for your child theme.
  6. Enqueue the 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 then you will have to make sure to maintain all of the Parent Theme dependencies.
    <?php
      function my_theme_enqueue_styles() { 
        wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css'); 
      }
      add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles');
    ?>
      
  7. If your child theme style.css contains actual CSS code (as it normally does), you will need to enqueue it as well. Setting ‘parent-style’ as a dependency ensures that the child theme stylesheet loads after it. The complete (recommended) example becomes:
    <?php
      function my_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, wp_get_theme(), get('Version'));
      }
      add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles');
    ?>
  8. From the WordPress Admin area, go to Appearance -> Themes to activate your newly added child theme.

WordPress Child Theme CSS Information

  • Theme Name: The name of the Child theme, and should be the primary theme’s name with Child at the end.
  • Theme URL: The URL to the home page of your theme.
  • Description: Property that describes your theme.
  • Author: The name of the person/organization that developed the child theme.
  • Author URL: The web address to uniquely identify the author of a theme.
  • Template: The name of your parent theme.
  • Version: The version number for your template. This should increment utilizing WordPress Version Numbering
  • Text Domain: A unique identifier that allows translations to work properly in wordpress. This must match the slug of the theme url.

Scale Your Business Now:

214-282-3530
bbass@webpopular.net

    Leave a Reply

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

    minimize add