Categories
Themes

How to properly set up a child theme and why

When you implement any theme in your WordPress website, you should always try to implement it with a child theme set up. There are many advantages to implementing a site with a child theme. Please go through the details below to understand more.

What is a Child Theme & Why use it:

A child theme derives all its design and functions from the main theme or parent theme. In addition to that, you can add further customization in the theme with custom CSS and you can also add or modify any functions. A child theme is a great way to keep your customization separated from the main theme or parent theme so that you can update it without worrying about losing any changes.

Setting up child theme the right way:

  • Create a custom folder in themes directory ( wp-content/themes/ )
  • Create a stylesheet file named style.css in the newly created folder and add custom CSS as referenced below. You can notice the Theme Name and Template data, which are the two important values you have to specify. The “Template” field is the name of the parent theme directory and the “Theme Name” field can be whatever unique name you want to name the child theme.
/*
 Theme Name:   TwentyTwenty Child Theme
 Template:     twentytwenty
 Version:      1.0.0
*/
  • Add parent and child theme stylesheet files if required. Today’s modern themes include the required parent theme stylesheets automatically and you don’t have to worry about it. But, If you have an old or poorly coded parent theme, you will have to include its main stylesheet in the site.
  • You can overwrite any template file of the parent theme by adding the same one in the child theme. But please remember that you can not overwrite the functions.php file but add your custom functions in your child theme’s functions.php file.
  • You can use the following functions to reference child or parent theme directories and stylesheet.
    1. get_stylesheet_directory() function returns absolute server path for the child theme directory.
    2. get_stylesheet_directory_uri() function returns complete uri to the child theme directory without trailing slash.
    3. get_template_directory() function returns absolute server path for the parent theme directory.
    4. get_template_directory_uri() function returns complete uri to the parent theme directory without trailing slash.

For further reference, you can always visit WordPress Codex and reply here in the comment section with your questions, if any.

By Murali Kumar

Murali Kumar is a Full Stack Web Developer with over ten years of experience. He works mostly with small and medium-size businesses. He loves helping businesses with their WordPress based websites.

Leave a Reply

Your email address will not be published. Required fields are marked *