WordPress has tons of free and premium themes you can use for almost any kind of website. But there may be a need to do some customization here and there to fit your need. Customization should not be done on a base WordPress theme as the changes will be lost when the theme is updated to a new version. That is why it is always important to use a WordPress child theme instead. In this post we shall discuss about how to create a Child Theme in WordPress.
What is a Child Theme?
If you are familiar with 'Inheritance' in Object Oriented Programming, Child Theme is something like Inheritance.
A WordPress child theme is also a WordPress theme that inherits its functionality from another WordPress theme, called the parent theme. WordPress Child themes are often used because customization can be done on the Child Theme while still using the functionality and features from the Parent Theme. The customization done on the Child Theme are not affected when the parent theme is upgraded.
Installing and activating the parent theme
- If you do not have a particular theme offline, login to the WordPress website as administrator and navigate to "Appearance" > "Themes" > "Add New"
- Search for a suitable theme and click "Install"
- Activate the theme after installation.
- After the theme is installed, a folder by the name of the theme is created at "\wp-content\themes\the-theme-name"
- Check out the website if the look and functionality provided by the theme is what you desire
Creating a child theme for the WordPress Theme
To create a Child Theme we need to create some additional files. It is recommended that you have access to your WordPress website files on the web hsot if the website is already hosted. You can access using the File Manager web interface provided by the web host or via FTP clients. If the WordPress website is not yet hosted, and is on a local development machine, there should not be an issue in accessing the website files.
As mentioned earlier, when a new WordPress theme is installed, a new folder is created at \wp-content\themes\the-theme-name" by the name of the theme.
- Whether on local development machine or on live web server, navigate to \wp-content\themes".
- You should see a folder by the name of the theme installed.
- Create a new folder for the child theme under \wp-content\themes" and name it anything. For easier identification, name the Child Theme folder as "ParentThemeName-Child"
- After the Child Theme folder is created, we now need to create some files which are essential for WordPress to identify the Child Theme as a WordPress theme in the Theme Administration Page.
- The only file that is essentially required under the Child Theme is "style.css" file. All new styles that need to be applied to the Child Theme is to be added in this file.
- The other file that may be included if there are some functions to be applied to the Child Theme is "functions.php".
A) Create Style.css in the child theme folder - File required by WordPress Child Theme
The only necessary file required by a WordPress child theme is the "style.css". The child theme inherits from the Parent Theme including CSS. Additional customizations can be done on the Child Theme in the style.css file and by including other template and files.
- Inside the Child Theme folder, created a file and named it "styles.css".
- Opened the "styles.css" in an editor, and added the following lines.
/*
Theme Name: child-theme-name
Template: the-parent-theme-name
*/"Theme Name" and "Template" is the only basic requirement to be added in style.css of a child theme. The "template" tells WordPress that it is a child theme and who the parent theme is.
For example:
If the parent theme folder name is: eleganttheme
And the child theme folder name is: eleganttheme_child
Then the text to be included in the Child Theme style.css is:
/*
Theme Name: eleganttheme_child
Template: eleganttheme
*/Note: You may also copy the header text from the "style.css" of the parent theme to the "style.css" of the child theme and edit only the Theme Name and Template details and other details wherever required. On the other hand,
B) Two ways to let WordPress refer to the Parent Theme's CSS
As discussed, the Child Theme will inherit styles from the Parent Theme. To tell WordPress, we need to add a few lines.
First Method: Add @import within the "style.css" of the child theme (not recommended)
The first way to let WordPress refer to the Parent Theme's CSS is using the "@import" instruction in the "style.css" file in the child theme. The format looks like this:
@import url("../parent-theme-name/style.css");
- Open "styles.css" of the child theme in an editor and add the above line to it. So the contents of the "style.css" file of the child theme looks like this:
/*
Theme Name: mh-magazine-lite-childTemplate: mh-magazine-lite*/
@import url("../parent-theme-name/style.css");
This tells WordPress to load the Parent Theme's CSS.
Second Method: The other way to let WordPress inherit the Parent Theme's CSS is using "functions.php"
- Create a new file within the child theme folder called "functions.php".
- Open the "functions.php" file in an editor and paste the following code in it and save it.
add_action( 'wp_enqueue_scripts', 'enqueue_parent_styles' );
function enqueue_parent_styles() { }
wp_enqueue_style( 'parent-style', get_template_directory_uri().'/style.css' );
- Save it and that is it.
.The "functions.php" file can also be used to add additional functionality to the website if required.
Activating the new child theme in WordPress dashboard
Now that the necessary steps to create a WordPress child theme is done, we can go ahead to activate it.
- Login to WordPress dashboard as administrator
- From Appearance > Themes, we should now be able to see the child theme. If anything went wrong with the child theme creation, there should be error message displayed by WordPress right there with hints about what is missing.
- Click "activate" to activate the child theme
- After activating the child theme, open the website and view.
We'll notice that though no CSS style has been added to the "style.css" file of the child theme, the website looks okay, since the CSS is loaded from the parent theme.We can now customize the website by adding custom CSS code in the "style.css" of the child theme. Any additional functionalities can be added to "functions.php"
Now that a child theme is in place, the parent theme can be updated whenever there is an update without any risk of losing the customization done on the child theme.
Remove or modify the copyright / credit links in the footer of the WordPress child theme
If you had edited the credits link in the parent theme, we'll notice that after creating a child theme, the default credit links appears on the footer of the child theme (may vary from theme to theme). If so, the following steps can be used to remove or modify in the child theme.
- Copy the footer.php file from the parent theme folder to the child theme folder.
- Open the footer.php file in an editor
- Edit the credit details as desired or add your own.
By copying the footer.php file from the parent theme folder to the child theme folder, it tell WordPress to override the parent file and use the footer.php file from the child theme.
Comments
Post a Comment