One of the best things about WordPress is that you can show your website almost in any form. In Fuel Themes, we try to create the best WordPress themes for you to make use of them. But sometimes, even our work wouldn’t be enough and you’ll need to customize a theme.
That’s where WordPress child themes come in handy. Not sure what I’m talking about? Keep on reading, because this is a lesser-known but very valuable tip for beginners and even intermediate WordPress users.
What Is a WordPress Child Theme, and Why Should We Use Them?
Put simply, a child theme is a theme that uses the files and components of a “parent theme”. If you know about PHP classes, you can think of a WordPress child theme as a class that extends another class.
A child theme use its parent theme’s files, but it has the privilege to override them (withe the exceptions of the functions.php and style.css files). For example, you can change the behavior of the homepage in a child theme by duplicating the home.php file from its parent, and edit the file as you like.
You might be asking “Why would I ever use a child theme instead of editing the parent theme?”. Great question, and I have one word to answer it: UPDATES. Here’s a scary thought: What if you need to (or have to) update your theme? All your customizations would be gone. Instantly.
Child themes to the rescue: By using child themes, you can have your theme customizations and update the parent theme too! And you’ll only need to check the files you customized after an update, and do the necessary edits if needed.
Fun fact: Saturday was “National Sovereignty and Children’s Day” in Turkey! 🙂
How to Create and Use a Child Theme in WordPress
Creating a WordPress child theme is pretty straightforward: You need to create a folder for the theme and put at least two files in it: style.css and functions.php. The style.css file has to include the parent theme’s folder name for reference:
/* Theme Name: The Voux Child Theme URI: http://... Description: ... Author: ... Author URI: http://... Template: thevoux-wp Version: 1.0.0 */
As I mentioned before, you can override any file except style.css and functions.php by duplicating the file from the parent theme into the child theme.
As for style.css, it’s a bit more different. Technically, you can override the style.css file just as you do with other theme files, but the correct way of dealing with child themes is to refer to the parent theme’s style.css and then use the child theme’s style.css to override styling. Otherwise, you’re just duplicating and editing the theme.
To refer the parent theme’s style correctly, you can simply put these lines of code in the child theme’s functions.php file:
add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );
function theme_enqueue_styles() {
wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
}
Overriding the functions.php of the parent theme looks a bit more scary, but it’s actually way simpler. Because WordPress loads the child theme’s functions.php before the parent theme’s functions.php, you can override any function declared in the parent theme. Though, the right way to do that is using function_exists() to check if the function has been declared before. Here’s an example from the Codex:
if ( ! function_exists( 'theme_special_nav' ) ) {
function theme_special_nav() {
// Do something.
}
}
Piece of cake!
Wrapping Up
The concept of “child themes” is a great example of how flexible WordPress can be without breaking anything. Seems like the makers of WordPress has thought of everything, right? (Kidding, of course: There’s always room for improvement.)
What’s your take on child themes? Share your comments with us down below, and if you liked this guide, don’t forget to share it with your friends. Thanks for reading!