A child theme in WordPress is a sub theme that inherits all the functionality, features, and style of its parent theme. You can change your site’s appearance yet still preserve your theme’s look and functionality. It’s the safest way to modify a WordPress theme without actually making any changes to the parent theme. This allows you to easily update the parent theme without worrying about losing your changes.

When should we use a Child Theme?

If you want to make modify your website, for example change the colour of text included by adding couple of lines of CSS, then a simple plugin like Custom CSS Plugin will do the job.
However, if you plan to introduce some major set of styling or functionality changes, such as a complete typography overhaul, tweaking default spacing structure, adding some custom WordPress hooks to alter your theme’s core functionality or even adding your own template files, then a child theme is definitely the ideal option.

Note: The steps below can be performed directly on your server via an FTP client. However, I recommend that you first set up everything locally, then zip your child theme folder and install it as a normal theme via the “Theme” tab. This will make the whole process much easier.

Setting Up A Basic Child Theme

The first step to initiate is to create a folder for our child theme in our themes folder. The path to our theme folder is /wp-content/themes/. You can use any name for this folder, but make sure that it doesn’t include any white spaces otherwise it will not be detected as a theme by WordPress.

WordPress theme

For this guide we shall use the name quadchild.

We are creating a child theme for twentynineteen theme. Though it’s ideal to choose -child (i.e. twentynineteen-child) naming convention, let’ choose some other name because it works as well!


/*
 Theme Name:   Quadnotion Child Theme
 Theme URI:    https://quadnotion.com/
 Description:  A Twenty Nineteen child theme 
 Author:       Quadnotion
 Author URI:   https://quadnotion.com
 Template:     twentynineteen
 Version:      1.0.0
*/

Create a style.css file inside the newly added quadchild folder. Then copy paste the following lines of code into the file.

Let’s see what those lines actually means:

  • Theme Name: Name that will show up for our theme in the WordPress back end.
  • ThemeURI: This points to the website or demonstration page of the theme at hand. This or the author’s URI must be present in order for the theme to be accepted into the WordPress directory.
  • Description: This description of your theme will show up in the theme menu when you click on “Theme Details.”
  • Author: This is the author’s name —you name, in this case.
  • Author URI: You can put your website’s address here if you prefer.
  • Template: This part is crucial. We must provide the name of the parent theme, meaning its folder name, and it’s case-sensitive. Put in the right information or you will receive an error message.
  • Version: This displays the version of your child theme. Usually, you would start with 1.0.

From all these information the mandatory fields are Theme Name and Template.

Now the child theme is ready, let’s confirm it is detected by WordPress as a theme. Go to Dashboard – Appearance – Themes tab and check if the newly added theme is displayed as in the picture below.

You can put a screenshot.png file in the child theme folder for easier identification

Child theme

Now click Activate button to switch to the child theme. Great! We are in the right path. However, if you look at your website, it should look something like this:

Setup child theme

No stress! You are not wrong, as the newly added style.css in our child theme is overriding the style.css from the parent theme (i.e. twentynineteen) and its void of any CSS rules which cause the layout looks broken

So, in the next step, we need to do is to inherit the styles from parent theme, for which we need have another important file in our child theme – functions.php

Let’s create a new file inside child theme folder named functions.php

The functions.php file capacitates you to modify or add functionalities and features to the WordPress website. It may contain both PHP and native WordPress functions. You can also develop our own functions. Basically functions.php brings modularity and extensibility to a WordPress theme

Copy paste the content below into the functions.php and save it

<?php
//* Code goes here

Now let’s see how to inherit the styles from the parent theme. There are a couple of ways to do it, one is using the functions.php and the other is using @import method in the style.css file.

It’s ideal to enqueue the parent theme’s style.css through child theme’s functions.php rather than using the @import method. We can discuss it in detail.

Importing parent’s theme styles using style.css file

Copy the code below into style.css file to import the styles written in the parent theme’s style.css file into the child theme’s style.

The code written above with import all the styles written in the style.css file from twentynineteen theme (parent theme) to the child theme.


/*
 Theme Name:   Quadnotion Child Theme
 Theme URI:    https://quadnotion.com/
 Description:  A Twenty Nineteen child theme 
 Author:       Quadnotion
 Author URI:   https://quadnotion.com
 Template:     twentynineteen
 Version:      1.0.0
*/

@import url("../twentynineteen/style.css");

However, this is the old way of inheriting parent styles and is no longer recommended. The reason for that is poor performance.

If we need to import several style sheets, then using @import can initiate the download process. This can slow down the page’s loading time by several seconds. That’s why it’s better to use functions.php for inheriting styles by enqueuing them. We will now discuss on how to import using functions.php file.

Importing parent’s theme styles using functions.php file

he recommended way to load the parent’s style sheet from functions.php file is to use wp_enqueue_style () function. This WordPress function safely adds style sheet files to a WordPress theme.

Copy paste the below code to our functions.php file.

<?php
//* Code goes here

add_action( 'wp_enqueue_scripts', 'enqueue_parent_styles' );

function enqueue_parent_styles() {
   wp_enqueue_style( 'parent-style', get_template_directory_uri().'/style.css' );
}

Kindly make sure to paste the code at the beginning of functions.php file. Now check the front end. We can see all the styles from the parent theme got imported to the child theme

Change color in child theme

Now we have created our first child theme, it is now easier to override the styles of the parent theme by writing CSS codes in the style.css of the child theme.

We will discuss the benefits and significance of a child theme in detail…

Customizing the WordPress Theme

If you have done all steps correctly till now, your child theme should now be activated and the website will be similar to parent theme as though activated with it.

Now we shall begin customizing our theme by performing necessary changes to get the desired results. Customizations can be done in multiple ways, and we will go over a whole lot of them. In order to customize the theme, you require basic knowledge of HTML, CSS, PHP and a good understanding of WordPress Functionalities.

Implement Custom Styles

Using the child theme’s style.css, we can now add or override CSS rules. To demonstrate we shall override the font size, color of the post title and content.

After we added the above shown CSS rules, the home page looks like this.

We have overridden the color and font size defined on the parent theme by adding modified CSS rules in to child theme’s style.css

Override Parent Theme Files

Using the child theme we can edit or completely override all the parent theme files. For every theme file present in the parent directory WordPress checks for its corresponding file in the child theme. If there is any similar file present in the child theme, then WordPress will load that particular file in the child theme.


/*
 Theme Name:   Quadnotion Child Theme
 Theme URI:    https://quadnotion.com/
 Description:  A Twenty Nineteen child theme 
 Author:       Quadnotion
 Author URI:   https://quadnotion.com
 Template:     twentynineteen
 Version:      1.0.0
*/

@import url("../twentynineteen/style.css");

.entry-title {
  font-size: 35px;
  line-height: 42px;
  color: #2046f5;
}

.has-drop-cap:not(:focus):first-letter, .widget-title, .site-description {
  color: #2046f5;
}


The modifications will be done in the child theme, so when we update the parent theme none of the changes will be lost.

Now checkout this example

Quadnotion child theme

We have added a menu (Home, About, Services) and social media icons to the header section. Now we will try to swap these section. For that, first we need to find where the code for this section is placed inside the parent theme. We understand that this is header section. So the code for header section will be inside header.php. The header.php for the parent theme is as follows.


<div class="site-branding-container">              <?php get_template_part( 'template-parts/header/site', 'branding' ); ?> </div>

In this file, around line number 30, there is a get_template_part () function call for site-branding.php. In this file, we can find the code for the header menu and the social media icons. So we need to edit this file. For that we make a copy of the file site-branding.php in our child theme by keeping the same folder hierarchy. So in our child theme we will save the file inside template-parts > header > site-branding.php. Now let’s see what’s inside the site-branding.php file.



<?php
/**
 * Displays header site branding
 *
 * @package WordPress
 * @subpackage Twenty_Nineteen
 * @since 1.0.0
 */
?>
<div class="site-branding">

 <?php if ( has_custom_logo() ) : ?>
  <div class="site-logo"><?php the_custom_logo(); ?></div>
 <?php endif; ?>
 <?php $blog_info = get_bloginfo( 'name' ); ?>
 <?php if ( ! empty( $blog_info ) ) : ?>
  <?php if ( is_front_page() && is_home() ) : ?>
   <h1 class="site-title"><a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a></h1>
  <?php else : ?>
   <p class="site-title"><a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a></p>
  <?php endif; ?>
 <?php endif; ?>

 <?php
 $description = get_bloginfo( 'description', 'display' );
 if ( $description || is_customize_preview() ) :
  ?>
   <p class="site-description">
    <?php echo $description; ?>
   </p>
 <?php endif; ?>
 <?php if ( has_nav_menu( 'menu-1' ) ) : ?>
  <nav id="site-navigation" class="main-navigation" aria-label="<?php esc_attr_e( 'Top Menu', 'twentynineteen' ); ?>">
   <?php
   wp_nav_menu(
    array(
     'theme_location' => 'menu-1',
     'menu_class'     => 'main-menu',
     'items_wrap'     => '<ul id="%1$s" class="%2$s">%3$s</ul>',
    )
   );
   ?>
  </nav><!-- #site-navigation -->
 <?php endif; ?>
 <?php if ( has_nav_menu( 'social' ) ) : ?>
  <nav class="social-navigation" aria-label="<?php esc_attr_e( 'Social Links Menu', 'twentynineteen' ); ?>">
   <?php
   wp_nav_menu(
    array(
     'theme_location' => 'social',
     'menu_class'     => 'social-links-menu',
     'link_before'    => '<span class="screen-reader-text">',
     'link_after'     => '</span>' . twentynineteen_get_icon_svg( 'link' ),
     'depth'          => 1,
    )
   );
   ?>
  </nav><!-- .social-navigation -->
 <?php endif; ?>
</div><!-- .site-branding -->



Here we can see two sections, one for the site navigation and the other is for social media icons. This is where both the menus are built.

Let’s see what happens when we reverse the order of these two, like this:


<?php
/**
 * Displays header site branding
 *
 * @package WordPress
 * @subpackage Twenty_Nineteen
 * @since 1.0.0
 */
?>
<div class="site-branding">

 <?php if ( has_custom_logo() ) : ?>
  <div class="site-logo"><?php the_custom_logo(); ?></div>
 <?php endif; ?>
 <?php $blog_info = get_bloginfo( 'name' ); ?>
 <?php if ( ! empty( $blog_info ) ) : ?>
  <?php if ( is_front_page() && is_home() ) : ?>
   <h1 class="site-title"><a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a></h1>
  <?php else : ?>
   <p class="site-title"><a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a></p>
  <?php endif; ?>
 <?php endif; ?>

 <?php
 $description = get_bloginfo( 'description', 'display' );
 if ( $description || is_customize_preview() ) :
  ?>
   <p class="site-description">
    <?php echo $description; ?>
   </p>
 <?php endif; ?>

 <?php if ( has_nav_menu( 'social' ) ) : ?>
  <nav class="social-navigation" aria-label="<?php esc_attr_e( 'Social Links Menu', 'twentynineteen' ); ?>">
   <?php
   wp_nav_menu(
    array(
     'theme_location' => 'social',
     'menu_class'     => 'social-links-menu',
     'link_before'    => '<span class="screen-reader-text">',
     'link_after'     => '</span>' . twentynineteen_get_icon_svg( 'link' ),
     'depth'          => 1,
    )
   );
   ?>
  </nav><!-- .social-navigation -->
 <?php endif; ?>

 <?php if ( has_nav_menu( 'menu-1' ) ) : ?>
  <nav id="site-navigation" class="main-navigation" aria-label="<?php esc_attr_e( 'Top Menu', 'twentynineteen' ); ?>">
   <?php
   wp_nav_menu(
    array(
     'theme_location' => 'menu-1',
     'menu_class'     => 'main-menu',
     'items_wrap'     => '<ul id="%1$s" class="%2$s">%3$s</ul>',
    )
   );
   ?>
  </nav><!-- #site-navigation -->
 <?php endif; ?>
 
</div><!-- .site-branding -->


As you can see on the picture shown below, those two elements swapped their positions after we changed the code in child theme’s file but the parent theme file is unaltered. That’s the brilliance of having child theme.

Customise your website

You have seen the tip of an ice berg, possibilities are endless with child theme. Make sure that you are strictly following the folder structure of the parent theme inside the child theme.

Add a new Template file from Child Theme

We’ve learned that we can override any file of the parent theme by placing a copy of the same in the child theme. However, using files that exists only in the child theme is also possible.

Let’s create a custom page template exclusively for child theme. Twentynineteen has a sample page with default page template, but it doesn’t have full width layout, let’s create a new template for full width layout.

For the custom page template, we can copy page.php from the parent theme, rename it to fullwidth-template.php and place it in the root folder in our child theme.

Now let us make couple of changes to have full width layout


<?php
/*
 * Template Name: Full Width Template
 * Template Post Type: post, page
 */
  
 get_header('custom');  ?>

<section id="primary" class="content-area">
 <main id="main" class="site-main">

  <?php

  /* Start the Loop */
  while ( have_posts() ) :
   the_post();

   get_template_part( 'template-parts/content/content', 'page' );

   // If comments are open or we have at least one comment, load up the comment template.
   if ( comments_open() || get_comments_number() ) {
    comments_template();
   }

  endwhile; // End of the loop.
  ?>

 </main><!-- #main -->
</section><!-- #primary -->

<?php
get_footer();



Similar to any page template, it begins with header that tells WordPress to identify it as a page template. Then we have added custom header using get_header () function, which has modified HTML code to render the full width layout

Now let’s edit the page that we want to see in full width and, under “Page Attributes,” change the page template to our newly created “Full Width Template”.

Create a website

Now let’s look into our custom header in detail. Copy paste the code from parent theme’s header to the child theme and rename it to header-custom.php and make the following changes.


<?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_Nineteen
 * @since 1.0.0
 */
?><!doctype html>
<html <?php language_attributes(); ?>
<head>
 <meta charset="<?php bloginfo( 'charset' ); ?>" />
 <meta name="viewport" content="width=device-width, initial-scale=1" />
 <link rel="profile" href="https://gmpg.org/xfn/11" />
 <?php wp_head(); ?>
</head>

<body class="fullwidth-body" <?php body_class(); ?>
<?php wp_body_open(); ?>
<div id="page" class="site">
 <a class="skip-link screen-reader-text" href="#content"><?php _e( 'Skip to content', 'twentynineteen' ); ?></a>

  <header id="masthead" class="<?php echo is_singular() && twentynineteen_can_show_post_thumbnail() ? 'site-header featured-image' : 'site-header'; ?>">

   <div class="site-branding-container">
    <?php get_template_part( 'template-parts/header/site', 'branding' ); ?>
   </div><!-- .site-branding-container -->

   <?php if ( is_singular() && twentynineteen_can_show_post_thumbnail() ) : ?>
    <div class="site-featured-image">
     <?php
      twentynineteen_post_thumbnail();
      the_post();
      $discussion = ! is_page() && twentynineteen_can_show_post_thumbnail() ? twentynineteen_get_discussion_data() : null;

      $classes = 'entry-header';
     if ( ! empty( $discussion ) && absint( $discussion->responses ) > 0 ) {
      $classes = 'entry-header has-discussion';
     }
     ?>
     <div class="<?php echo $classes; ?>">
      <?php get_template_part( 'template-parts/header/entry', 'header' ); ?>
     </div><!-- .entry-header -->
     <?php rewind_posts(); ?>
    </div>
   <?php endif; ?>
  </header><!-- #masthead -->

 <div id="content" class="site-content">


We are only making a minor change in the custom-header.php file. We are adding a fullwidth-body class to the body tag. As the page is loaded with the newly created template, this custom header will be loaded. We will add necessary CSS rules to ‘fullwidth-body’ class to render the layout in full width.


.fullwidth-body .site-branding {
    margin: 0 calc(4% + 60px);
}

.fullwidth-body .entry .entry-header {
    margin: calc(3 * 1rem) calc(4% + 60px) 1rem;
}

@media only screen and (min-width: 768px) {
    .fullwidth-body .entry .entry-content, .entry .entry-summary {
        max-width: 92%;
        margin: 0 4%;
        padding: 0 60px;
    }

    .fullwidth-body .entry .entry-content > *, .entry .entry-summary > * {
        max-width: 100%;
        margin: calc(3 * 1rem) 0 1rem;
    }

    .fullwidth-body .entry .entry-footer {
        max-width: 100%;
        margin: calc(3 * 1rem) calc(4% + 60px) 1rem;
    }

    .fullwidth-body #colophon .widget-area, #colophon .site-info {
        margin: calc(3 * 1rem) calc(4% + 60px);
    }
}    

Now let’s check out the final result.

Web design agency thrissur

To Conclude

Have you got a basic understanding on how to use a child theme? You can use this work flow to make minor or detailed changes on your WordPress website without sacrificing the ability to update the parent theme. It is really important to use child theme if you are using premium themes downloaded from themeforest (https://themeforest.net/user/quadnotion) or other popular market places.

If you are looking for professional theme customization or web development services, promptly contact us here. You can also connect with us on email or phone or Skype for a free quote…

Share the post: