Thu 05 November 2020
How To Create And Modify WordPress Child Theme
WordPress themes are the window to your awesome content on your site. In this guide, you will learn how to create and modify WordPress child theme on Bluehost in 2020. It is important to choose the right themes and know how to customize or modify them.
You will find your self modifying and updating your theme after installation.
However, many people have painfully found out that all the changes they made on their themes are overwritten or removed once they update the theme with a new version. This is because when you install a WordPress theme, it replaces the entire folder containing the theme files! This is where child themes come in!
It is normal to spend quite some time dealing with WordPress themes once you are done creating your website. Modifying your WordPress theme via a child theme is the recommended approach.
How to create and modify WordPress child theme on Bluehost – 3 Steps
- What is a WordPress child theme?
- Creating a child theme
- Updating or Modifying a child theme
1. What Is A WordPress Child Theme And Why Is It Important?
A child theme is a theme that inherits it’s behaviour and look from another theme(ie parent theme). Changes you make on a child theme are passed on to it’s parent. This is important because when the parents gets updated/upgraded and the files are overwritten with new theme files, the changes you make to the child theme will be preserved since overwritten files are that of the parent and not the child. This preserves all your previous changes!!
2. Creating A Child Theme On Bluehost
In our example, we will be creating a child theme for the Schema theme. Which is a theme from the awesome people at MyThemeShop. Give them a try!
In order to create a child theme, you will need a minimum of two files to be located in your child theme folder. These are style.css and functions.php.
Create these two files on your local machine in preparation to upload them to your Bluehost installation files.
The child theme folder will be stored in the same directory as the parent theme folder on Bluehost. The recommended way of naming the child theme folder is by adding the suffix ‘-child‘ to the parent folder name. Example mts_schema-child
Populating Child Theme Files
You will need to add special information to the style.css for WordPress to know your theme folder is a child theme folder.
1. On your WordPress dashboard, hover over Appearance, click Theme Editor to open the theme editing window. Your theme files will be displayed on the right pane. Locate style.css, click it to display it’s content in the left pane window.
2. Copy the text between /* and *\ character and paste it into the style.css file you created on your local machine.
Theme Name: Schema by MyThemeShop - Child
Theme URI: https://mythemeshop.com/themes/schema/
Author URI: https://mythemeshop.com/
Description: Schema is a fast loading, ultra-SEO friendly WordPress theme that features rich snippets in order to help search engines identify all parts of your site and rank you higher.
Text Domain: schema
Domain Path: /lang
Edit your style.css by changing the line that says Template: to point to the name of the parent theme folder name. This tells WordPress that we are inheriting the behaviour and look of this parent theme. Save the style.css and prepare to upload to Bluehost!
You can also edit the Theme Name to your own preferred name.
Uploading Child Theme Files To Bluehost
1. Log into Bluehost and click on Login(top right corner).
Bluehost Landing Page
2. Once you successfully log in by entering your credentials, click on the Profile icon at the top right corner(circled red). Click ‘Profile‘ on the dropdown menu to open your Account Center
Account Center Log in
3. On Account Center page, click on Advanced to open the CPanel (i.e. Control Panel)
4. On the CPanel page, expand the FILES menu by clicking the plus(+) sign on the right. This reveals extra icons including the File Manager icon. Click File Manager and this will open in a new tab.
File Menu Icons
5. The File Manager window displays your server and WordPress files. The left column displays the folder hierarchy and the right column displays the content of a selected folder. Note: WordPress files are in the public_html folder.
File Manager Window
6. We are creating a child theme so let’s locate the parent theme folder in the WordPress theme folder. Click the plus(+) sign against the following folders to locate the WordPress theme folder: public_html -> wp-content -> themes. Click the themes folder to display all theme folders in the right column.
7. At the top left, click +Folder to create a new folder. Rename the folder mts_schema-child
8. On the left column, click on the newly created folder. Then at the top menu, click Upload, navigate to your local machine and select style.css and functions.php files. These files should be uploaded to the child theme folder.
Upload file to Bluehost
TIP: Copy the screenshot.png file from the parent theme folder into your child folder to have the same display icon picture in the themes gallery.
9. Activate the child theme. Hover over Appearance, click Themes. Locate your child theme and click Activate. Your site is now using your child theme!!
3. Updating Or Modifying A Child Theme
Now, all changes to your theme will be made on the newly created child theme.
Hover over Appearance, click Theme Editor. Your child theme files can now be edited in this window without affecting your main theme. Upgrades can now be safely done without overwriting your changes!!
If you find this guide useful, kindly share it with your friends via email, social media so that they can also benefit.
Take a look at our other awesome guides