WordPress Help

Create a child theme for WordPress

Sometimes, you may want to modify a WordPress theme. The best practice for modifying a theme's style and functionality is through a child theme to prevent your changes from being lost when performing updates.

  1. Connect to your hosting with FTP
  2. Navigate to the wp-content/themes directory for your WordPress site.
  3. Create your child theme directory. The following is a common naming convention for child themes: <parent>-child, where <parent> is the name of your parent theme.
  4. Navigate into the child theme directory and create a style.css file.
  5. In the style.css file, add a stylesheet header, which contains metadata about your theme. The following is an example that you can use from a Twenty Fifteen child theme:
    
    /*
    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, responsive-layout, accessibility-ready
    Text Domain:  twenty-fifteen-child
    */

    Make sure to replace the information in the example with the information relative to your theme.

  6. Save the style.css file.
  7. Now create a functions.php file. This will contain PHP functions specific to your child theme.
  8. After creating the functions.php file, you will need to enqueue the styles and scripts from your parent theme into your child theme.
    • Open the functions.php file
    • Add a function that will be used to enqueue styles and scripts from your parent theme. Below is an example.
      <?php
      add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' );
          function my_theme_enqueue_styles() {
          wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
          }
      ?>
                      

Next steps


More info