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 visit WordPress Codex. You can also reply here in the comment section with your questions if any.

By Murali Kumar

I am a Full Stack Web Developer with over 12 years of experience. I love WordPress & WooCommerce.

If you need help of a WordPress developer for your website, Get in touch now!.

Leave a Reply

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