preloader

You just found the perfect WordPress Theme for your Website, however, you would like to add your personal touch? You started customization by using the functions.php of the theme but you are not sure that at every theme updates all your code will be overwritten? It means you have to create a child theme ;).

Why do I need to create a child theme?

A child theme gives you flexibility and security regarding WordPress and theme updates. A Child theme is like an extension of your theme folder in which you can add all your personal data such as pieces of code, images, etc.

It is important to understand that a child theme is closely linked to a parent theme. So if you want to change your website theme, you will need to create another child theme. And all the customizations you did in the previous child theme will be deactivated. (Not lost, just deactivated! By reactivating the previous theme, you will find them again, don’t worry 🙂 ).

That is why if you want your customizations to be cross-theme, you had better create your own plugin instead of a child theme. Here is the post I explain how to create your own plugin!

My first child theme

Create a child theme is easy. The first thing you have to do is to create a new folder in your “/wp-content/themes” folder. You can name it as you want but by convention, we prefer to call it <your-parent-theme-name>-child. For example for “Twenty Seventeen” theme, it will be “twentyseventeen-child”.

Style.css file

Then, you will create two files inside your newly created folder. The first one is a CSS file called “style.css”. Inside copy-paste the following code:

/*
Theme Name: Twenty Seventeen Child Theme
Theme URI: <your-theme-url>
Description: Twenty Seventeen Child Theme Description
Author: <your-name>
Author URI: <your-web-site-url>
Template: twentyseventeen
Version: 1.0
*/

I am not going to explain all the fields because most of them are clear enough ;). The most important one is the “Template” field. You have to write the folder name of your parent theme. In this example, as my parent theme is Twenty Seventeen, I wrote “twentyseventeen”.

Functions.php file

The second file is the famous “functions.php” file. In this file, you could add all your customization pieces of code you would like. But before it is required to write this one:

function twentyseventeen_child_styles() {

	$parent_style = 'twentyseventeen'; //parent theme style handle 'twentyseventeen'

	//Enqueue parent and child theme style.css
	wp_enqueue_style( $parent_style, get_template_directory_uri() . '/style.css' ); 
	wp_enqueue_style( 'twentyseventeen-child-style',
	    get_stylesheet_directory_uri() . '/style.css',
	    array( $parent_style ),
	    wp_get_theme()->get('Version')
	);

}
add_action( 'wp_enqueue_scripts', 'twentyseventeen_child_styles' );

We write this code to load the style.css file the parent theme. You will need to replace all the “twentyseventeen” value by your parent theme slug.

For an explanation regarding the “add_action(‘wp_enqueue_scripts’) visit this link. As you can see, it is a famous WordPress action hook.

For the ‘wp_enqueue_style’ function, you will find details on this WordPress Codex page.

Before starting to add some personal code, you need to activate your child theme in the Admin Panel > Theme. You can now customize your theme by adding some CSS codes in your style.css file and PHP codes in your functions.php file!

How to customize your parent theme templates

You know now how to change the design of your website with CSS and PHP customizations but you would like to modify the layout of some elements of your Website, for instance, the header.

With a child theme, it is really and your change will be theme update-proof!

If we keep the customization of the header of your website, first you need to look for the header.php file in your parent folder. Then copy-paste this file in your child theme folder and edit it as you wish. That is all. The WordPress Engine will automatically load your child theme header.php file instead of the parent header.php file. After any parent theme updates, only the parent theme folder will be updated. It means your child theme header.php file will not be modified!

We are there! You just created your first child theme and learn how to add custom CSS styles, code functions and how to override templates. You can now add your personal touch!

Leave a Reply

Your email address will not be published. Required fields are marked *