Smughost

Facebook Twitter Linkedin
My Account

How to Create a WordPress Child Theme?

A child theme lets you modify a parent theme as much (or as little) as you want. You can then change the child theme without impacting the parent theme or any other projects using it as an anchor for its own child themes.

Using a child theme also avoids losing any customizing when you update your WordPress theme.

A child theme resides in a separate directory from the parent theme, and every child directory needs to include its own style.css and functions.php files. Additional customized files and file types can be added as needed, but those files are recommended for the theme to function properly.

Step 1: You will create a directory for the child theme in the existing wp-content/themes directory. It’s best to maintain good directory organization by adding -child to the end of of the parent theme’s name. You can also add the name of the specific project if you prefer. Remember not to include any spaces in the file name because they can cause errors. To create a new directory, you can either use FTP client or File Manager.

  • Access your Smughost control panel and click File Manager.
  • Navigate to your WordPress installation directory (usually called public_html) and open the wp-content -> themes folder.
  • Click the create new folder icon, enter your child theme’s name and click Create.
  • Access the newly created child theme’s folder.
  • Click the New File button, enter style.css as the file name, and click Create.
  • Add the following code to the style.css by editing the file.

  • Give your new theme a name and change all other values to match your theme and domain name. The most important field is Template field because it tells WordPress which parent theme your child theme is based on.  Once you are done, click Save.
  • Add a new functions.php file in the same folder, but do not copy/paste the code from the parent theme’s file, because it needs to remain separate from any modifications you make to the child theme. Instead, create a blank file or add any new .php functions required for your child theme.
  • From the WordPress admin area, navigate to Appearance -> Themes to see your newly created child theme and click Activate.
  • Visit your website, and you’ll see your theme with some obvious issues (as pictured below). Don’t panic, because the functions.php file isn’t loading the CSS from the parent theme yet.
  • From the WordPress admin area, navigate to Appearance -> Editor and choose functions.php.
  • WordPress has a function to load the CSS from parent themes. Copy and paste the following code to the child theme’s function.php file:
  • Click Update at the bottom of the page to save your changes.
  • Visit your website again. You will notice that the CSS is loaded and your child theme looks exactly the same as the parent theme.

We hope this has helped you create your own WordPress child theme, if you need any support please don’t hesitate to contact us!

The Smughost Team

Our Services

Useful Links