Tutorial on Creating WordPress Child Theme

How to create a WordPress Child Theme?

In this tutorial, we’re going to show how to create a child theme for our own popular theme Spacious.

Step One:

Create a new folder in your themes directory. You can do so using the cPanel or via FTP. The themes directory is the wp-content/themes. So, let’s name the folder as spacious-child. You can name it whatever you like but remember there should not be any space in the folder name. It is a common approach to name child theme as the parent theme plus -child added on the end.

Step Two:

Inside the spacious-child folder create a file called style.css and fill in the information as shown below.

/*
Theme Name: Spacious Child Theme
Theme URI: http://themegrill.com/themes/spacious/
Description: Spacious Child Theme
Author: ThemeGrill
Author URI: http://themegrill.com
Template: spacious
Version: 1.0
*/
/* =Theme customization starts here
------------------------------------------------------- */

Add this and save the file. Points to remember:

• Template name (here in this case spacious) should match the folder name of the parent theme and also make sure there is no blank space after the name.
• Other details can be added or changed as you like.

Step Three:

Create a file called functions.php as you created ‘style.css’ in Step Two. And fill in the information as shown below.

<?php 
/**
 * Child theme functions file.
 */
function spacious_child_enqueue_styles() { 
    // Parent theme style handle 'spacious_style'.
    $parent_style = 'spacious_style';
 
    // Enqueue parent and child theme style.css.
    wp_enqueue_style( $parent_style, get_template_directory_uri() . '/style.css' );
    wp_enqueue_style( 'spacious_child_style', get_stylesheet_directory_uri() . '/style.css', array( $parent_style ), wp_get_theme()->get( 'Version' ) );
}
 
add_action( 'wp_enqueue_scripts', 'spacious_child_enqueue_styles' );

In creating a child theme, style.css and functions.php files are mandatory while template files, and other files are optional and can be created if required.
Lastly, to activate the child theme, in the dashboard go to Appearance->Themes. Look for the child theme you created and activate it. That’s it. Also, make sure the parent theme is also present in the installed themes for the child theme to work. If you now visit your site, it should look all same just like when the parent theme was activated. However, you may need to reset some of the settings in the Customizer.

Modifying Your Theme’s CSS

If you want to modify the theme’s CSS, you can add CSS in the end of the style.css file and save it. These CSS lines will overwrite the parent theme CSS.
For example, say we want to change the font size of the site title for the spacious theme for 36px default value to 42px and also change its color from #444444 default to blue (#0000FF). Then you can just add the below CSS lines.

Making Further Changes

Editing other theme files You can also make structural changes to the theme files by adjusting template files. Say, you want some changes or want to add some extra code in the header. Then you can copy the header.php file of the parent theme, paste inside the child theme and make/add changes there and save the file. This header.php file will load instead of the header.php file of the parent theme.
原文链接：https://themegrill.com/blog/tutorial-creating-wordpress-child-theme/