WordPress is a CMS which gives limitless customizations and flexibility to those who wants more control over it. Here I am going to discuss a great feature of WordPress out of many different great features, which makes WP most popular CMS in the world and the feature is child theme. In this article, I’ll tell you what is a child theme in WordPress & how you can create it as per your requirement.
So, let’s get started.
What is WordPress Child Theme?
As the name suggests it is a theme which inherits another theme styles, settings, pages and everything. The other theme is called the parent theme of this child theme.
A child theme is mainly used to modify some parts of a theme or changing colors & style of some sections of the theme.
Why Use a Child Theme?
With child themes, you don’t have to create a complete theme from the beginning. Here you can do very few minimal changes to the code of parent theme files within your theme. By doing this you can easily get your own theme within a very little effort.
By doing those changes within a child theme we are assuring that nothing changes within the parent theme files. This will prevent the changes overwritten by the update of the parent theme. If you made any changes to the original theme files to achieve what you want and then don’t update the theme when the next update is available, then you will compromise with the security of your site.
Another reason to use a child theme is that it will help you organize your codes properly. With the child theme, you can have a clear understanding of what changes you have made and later you can make further changes to it more easily.
How To Create a Child Theme?
To create a child theme we need to first understand WordPress directory structure and basic theme files. If you wish to know about the other ways to develop WP themes and basics, see my previous article on theme development for beginners.
For the sake of this tutorial, I am assuming that we are making a child theme of WordPress default Twenty Seventeen theme. And the theme directory is in /wp-content/ directory, see the figure below.
Here within theme directory now we need to create another directory called “twentyseventeen-child“. In this directory, we will create all the necessary files to create our child theme.
First, we need to create 2 files within our child theme directory.
- Functions.php
- Style.css
Within style.css file, we need to add the code snippet as below.
/* Theme Name: Twenty Seventeen Child Theme URI: https://wordpress.org/themes/twentyseventeen/ Author: Pradip Debnath Author URI: https://www.pradipdebnath.com/ Description: This is a child theme of Twenty Seventeen theme. Version: 1.0 Template: twentyseventeen License: GNU General Public License v2 or later License URI: http://www.gnu.org/licenses/gpl-2.0.html Text Domain: twentyseventeen Tags: one-column, two-columns, right-sidebar, flexible-header, accessibility-ready, custom-colors, custom-header, custom-menu, custom-logo, editor-style, featured-images, footer-widgets, post-formats, rtl-language-support, sticky-post, theme-options, threaded-comments, translation-ready */
Here these codes are basic codes to register a theme to WordPress, but for child theme we need to specify a line with Template: twentyseventeen.
After style.css file to our child theme directory, if we visit WP admin Appearance > Themes we can see our child theme is showing there and it will look like this as below figure.
Congratulation! Now you have successfully added your child theme to your WordPress install. But if we activate it now the site will display texts and images with no styling or design at all.
To inherit all the styles and designs of the parent theme we need to create a functions.php file within our child theme directory.
<?php
add_action( 'wp_enqueue_scripts', 'enqueue_parent_styles' );
function enqueue_parent_styles() {
wp_enqueue_style( 'parent-style', get_template_directory_uri().'/style.css' );
}
By this code, we are adding our parent theme style file to our child theme. Now if we visit our site again now our child theme will look exactly like its parent theme.
To make our own style and implement it in our theme, we can simply now add our CSS codes to our style.css file which we have created previously in our child theme directory.
Adding More Customization To Theme
If we need more customization and control over our theme, then we can add those to our child theme also. Suppose we don’t want to have a header image to our child theme as our parent theme has one. Then we can copy the code of header.php of our parent theme and create a header.php file within our child theme directory.
<?php /** * The header for our theme * * This is the template that displays all of the <head> section and everything up until <div id="content"> * * @link https://developer.wordpress.org/themes/basics/template-files/#template-partials * * @package WordPress * @subpackage Twenty_Seventeen * @since 1.0 * @version 1.0 */ ?><!DOCTYPE html> <html <?php language_attributes(); ?> class="no-js no-svg"> <head> <meta charset="<?php bloginfo( 'charset' ); ?>"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="profile" href="http://gmpg.org/xfn/11"> <?php wp_head(); ?> </head> <body <?php body_class(); ?>> <div id="page" class="site"> <a class="skip-link screen-reader-text" href="#content"><?php _e( 'Skip to content', 'twentyseventeen' ); ?></a> <header id="masthead" class="site-header" role="banner"> <?php //get_template_part( 'template-parts/header/header', 'image' ); ?> <?php if ( has_nav_menu( 'top' ) ) : ?> <div class="navigation-top"> <div class="wrap"> <?php get_template_part( 'template-parts/navigation/navigation', 'top' ); ?> </div><!-- .wrap --> </div><!-- .navigation-top --> <?php endif; ?> </header><!-- #masthead --> <?php /* * If a regular post or page, and not the front page, show the featured image. * Using get_queried_object_id() here since the $post global may not be set before a call to the_post(). */ /*if ( ( is_single() || ( is_page() && ! twentyseventeen_is_frontpage() ) ) && has_post_thumbnail( get_queried_object_id() ) ) : echo '<div class="single-featured-image-header">'; echo get_the_post_thumbnail( get_queried_object_id(), 'twentyseventeen-featured-image' ); echo '</div><!-- .single-featured-image-header -->'; endif;*/ ?> <div class="site-content-contain"> <div id="content" class="site-content">
Here is our code for header.php file of our child theme. Here I have commented the header image codes which I don’t want to display on my theme. You can remove those codes to your final theme code if you want to remove the header image from the website.
So, now you know how easily we can create our own theme as a child theme with very little customizations.
I hope it helps you understand more about WordPress theme development. Here is the video tutorial of this.
Happy coding. 🙂
