Hello, dear blog readers!
Today, we’ll take a look at a standard topic for most WordPress-related blogs — creating a child theme.
Why might we need to create such a theme:
- We need to change the design of specific blog pages without affecting the rest of the theme's functionality.
- We need to change the functionality of a specific page — for example, the homepage or the comment form.
- We need to add new functionality.
Yes, of course, all of these changes could be made in the current theme — if it was developed by you or built on demand. But if you're using a theme from the WordPress repository, it's better to make changes using a child theme. Because when you modify the parent theme, and then update it, all your changes will be lost.
Creating a Child Theme
The first thing we need to do is create a directory at the path «/www/wp-content/themes/», which will represent the name of our child theme. Since I’ll be creating a child theme based on «twentytwelve», I’ll name it «chhild-twentytwelve».
Next, we need to tell the WordPress engine that the theme we’re developing is a child theme.
To do that, go to the «chhild-twentytwelve» directory and create a stylesheet file named «style.css». In that file, add the following comment:
/* Template: twentytwelve Theme Name: chhild-twentytwelve */
where:
Template — the name of the parent theme
Theme Name — the name of the child theme
The above shows the minimum set of theme parameters. If you want, you can even leave only the «Template» line.
At this point, we can say the basic setup is complete. If you go to the admin panel, under the “Themes” section, you will find our new theme:
As you can see, our child theme has no preview image. You can create one yourself — take a screenshot, rename it to «screenshot.png», set the size to 880x660 px, and place it in the child theme folder.
If we “activate” our theme now, the site won’t display correctly. That’s because the styles from the parent theme haven’t been loaded.
To load the styles, we need to create a «functions.php» file in our child theme directory and add the following code:
<?php
add_action('wp_enqueue_scripts', function() {
wp_enqueue_style('style-parent', get_template_directory_uri().'/style.css');
});The hook «wp_enqueue_scripts» is intended for loading styles and JavaScript code. Using it, through the call:
wp_enqueue_style('style-parent', get_template_directory_uri().'/style.css');we load the styles of the parent theme.
That’s it — the basic development of a child theme is complete.
