- 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 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 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'); ?> - 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'); ?> - 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.