How to create a WordPress Child Theme?

How to create a WordPress Child Theme?

How to create a WordPress Child Theme?

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-contentthemesthe-theme-name”
  • Check out the website if the look and functionality provided by the theme is what you desire

After the theme is installed and verified that it suits your needs, let’s go ahead and create a Child Theme for this parent theme installed.

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-contentthemesthe-theme-name” by the name of the theme.

  • Whether on local development machine or on live web server, navigate to wp-contentthemes”.
  • You should see a folder by the name of the theme installed.
  • Create a new folder for the child theme under wp-contentthemes” 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-child

Template:     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.
wordpress-child-theme-footer-credit-remove

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.

Leave a Reply