Why is a child theme important in WordPress?
You install WordPress, choose a good-looking theme for your site, install it but there is something that is missing from the theme. You want to make customization but can’t do it easily in the theme you installed because you know, your edits will be lost once you update the theme to a newer version.
That’s when Child themes comes in handy.
Child theme’s main purpose is to allow you to add your customization and edits in a way that won’t be lost if ever the parent theme that you use send in any new updates.
Child Themes are Update Proof
Whether using free WordPress themes from worpress.org repository or buying a premium theme from marketplace like Themeforest, most of these comes with some form of update mechanism. When there is a new update, you get a notification in your WordPress dashboard and with one click the files of your theme are replaced with new version.
In such a case if you have added customization into the core files of the theme then those files will be replaced by the new version that the theme author sends with update.
So, to not lose your hard work it’s always best to us a Child Theme to add your customization and edits.
How to create Child theme in WordPress
Creating child themes in WordPress very easy. You can either do it manually by creating a new theme folder in your themes folder or by Using Child Theme Wizard plugin.
Creating Child Themes Manually.
A child theme by default consist of two files from the parent theme.
- style.css
- functions.php
Create a new folder inside wp-content/themes folder and name it something unique like “sitename-child”. Make sure there are no spaces in the name or else it will throw an error while activating the theme.
Now create one new file inside that folder called “style.css” and Paste the following code at the top of the style.css file
/* Theme Name: Twenty Fifteen Child Theme URI: http://example.com/twenty-fifteen-child/ Description: Twenty Fifteen Child Theme Author: John Doe Author URI: http://example.com Template: twentyfifteen Version: 1.0.0 Text Domain: twenty-fifteen-child */
This small piece of code is what will define your child theme and will let WordPress identity your child theme,
Now, Modify the code with details relevant to your theme.
- Theme Name – Add something unique like “Site Name Child”. You can add spaces here
- Theme URL: Add your sites url.
- Description: Add a small description about the theme.
- Author: Add Your Name
- Author URL: You can add your URL here.
- Template: This is the most important part. In the field you will have to write the exact folder name of your Parent Theme. If for an example, you are creating child theme of Twenty Fifteen then write “twentyfifteen”, If you are using some other theme then adjust accordingly.
- Version: Start from 1.0.0 and update this line with every update you make to your theme.
- Text Domain: Enter the folder name of your child theme. If your folder name is “site-name-child” then your Text domain will also be “site-name-child”
After this, create another file called “functions.php” andd paste following code into your functions.php file
<?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' );
}
?>
The above example function will only work if your Parent Theme uses only one main style.css to hold all of the css. If your child theme has more than one .css file (eg. ie.css, style.css, main.css) then you will have to make sure to maintain all the Parent Theme dependencies.
If you child theme’s style.css also has custom css then you will have to enqueue that file as well.
Setting ‘parent-style’ as a dependency will ensure that the child theme stylesheet loads after it. Including the child theme version number ensures that you can bust cache also for the child theme. The complete (recommended) example becomes:
<?php
function my_theme_enqueue_styles() {
$parent_style = 'parent-style'; // This is 'twentyfifteen-style' for the Twenty Fifteen theme.
wp_enqueue_style( $parent_style, get_template_directory_uri() . '/style.css' );
wp_enqueue_style( 'child-style',
get_stylesheet_directory_uri() . '/style.css',
array( $parent_style ),
wp_get_theme()->get('Version')
);
}
add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' );
?>
where parent-style is the same $handle used in the parent theme when it registers its stylesheet. For example, if the parent theme is twentyfifteen, by looking in its functions.php for its wp_enqueue_style() call, you can see the tag it uses there is ‘twentyfifteen-style’. In your child code, replace the instance of ‘parent-style’ with ‘twentyfifteen-style’, like so:
$parent_style = 'twentyfifteen-style';
Failure to use the proper tag will result in a CSS file needlessly being loaded twice. This will usually not affect the site appearance, but it’s inefficient and extends your page’s loading time.
Now, your child theme is ready to be activated. Upload your child theme to your WordPress Dashboard and activate. You may have to re-save your Menu items, widgets and customizer options if you have added any new menu, widget or customizer panels.
Create Child Theme Using a Plugin
Go to your site’s Dashboard > Plugins >> Add New and search for the plugin called “Child Theme Wizard”. Install it and activate it.
The Child Theme Wizard lets you create a new child theme without the need for additional tools, right from within the WordPress admin interface.
Once activated, you can find it under Tools – Child Theme Wizard.
Specify a parent theme, customize options such as title and description and click Create Child Theme. Upon success, you will find your new theme under Appearance – Themes.
It’s generally a good idea and a recommended one to create a child theme if you want to customise your WordPress site. Modifying core theme files which you know will be replaced in future updates is a bad idea and that will waste a lot of your time and resources.
Build child themes and make your WordPress site free from future update problems.
