How to create a child theme

A child theme consists of at least one directory (the child theme directory) and two files (style.css and functions.php), which you will need to create:

  •          The child theme directory;
  •          style.css;
  •          functions.php.

The first step in creating a child theme is to create the child theme directory, which will be placed in wp-content/themes. It is recommended (though not required, especially if you're creating a theme for public use) that the name of your child theme directory is appended with '-child'. You will also want to make sure that there are no spaces in your child theme directory name, which may result in errors. In the screenshot above we have called our child theme 'pixova-lite-child', indicating that the parent theme is the Pixova Lite theme. The next step is to create your child theme's stylesheet (style.css). The stylesheet must begin with the following (the stylesheet header):

/*
Theme Name: Pixova-Lite-Child
Theme URI: http://www.machothemes.com/themes/pixova-lite/
Description: Pixova Lite Child.
Theme Author: Macho Themes
Author URI: http://www.machothemes.com/
Template: pixova-lite
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Tags: gray,white,green,black,light,one-column,two-columns,fixed-layout,right-sidebar,left-sidebar,custom-header,custom-menu,featured-image-header,featured-images,sticky-post,responsive-layout,full-width-template,front-page-post-form,threaded-comments,translation-ready,photoblogging
Text Domain: pixova-lite-child
*/

A couple things to note:

  •          You will need to replace the example text with the details relevant to your theme.
  •          The Template line corresponds to the directory name of the parent theme. The parent theme in our example is the Pixova Lite theme, so the Template will be pixova-lite. You may be working with a different theme, so adjust accordingly.

The final step is to enqueue the parent and child theme stylesheets. Note that the previous method was to import the parent theme stylesheet using @import: this is no longer best practice. The correct method of enqueuing the parent theme stylesheet is to add a wp_enqueue_scripts action and use wp_enqueue_style() in your child theme's functions.php. You will therefore need to create a functions.php in your child theme directory. The first line of your child theme's functions.php will be an opening PHP tag (<?php), after which you can enqueue your 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 theme has more than one .css file (eg. ie.css, style.css, main.css) then you will have to make sure to maintain all of the Parent Theme dependencies.

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

Your child theme is now ready for activation. Log in to your site's administration panel, and go to Administration Panels > Appearance > Themes. You should see your child theme listed and ready for activation. (If your WordPress installation is multi-site enabled, then you may need to switch to your network administration panel to enable the theme (within the Network Admin Themes Screen tab). You can then switch back to your site-specific WordPress administration panel to activate your child theme.)

Note: You may need to re-save your menu (Appearance > Menus, or Appearance > Customize > Menus) and theme options (including background and header images) after activating the child theme.

More information can be found here: https://codex.wordpress.org/Child_Themes

Still need help? Contact Us Contact Us