- Create a new directory in your existing wp-content–>themes folder and name it <parent-theme>-child.
- Access newly created folder and create a new file called style.css
- 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
Domain: twentyseventeen-child
*/ Custom CSS goes after this line
- 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.
- 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.
- 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
functionmy_theme_enqueue_styles() {
wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css');
}
add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles');
?>
- 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 childtheme_parent_styles() {
wp_enqueue_style( 'parent', 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', 'childtheme_parent_styles');
?>
- From the WordPress Admin area, go to Appearance -> Themes to activate your newly added child theme.
Leave a Comment