The Basal Guide: How to Create a WordPress Child Theme

Posted in HowTos, Themes, WordPress • Posted on 2 Comments

Creating a WordPress child theme is important. It gives the user access to the theme without the threat of breaking it when updating. Unfortunately, child themes can be confusing if you don’t have much experience with WordPress customization.

As WordPress users customize their themes more, there might be some instances when users lose all of their theme’s layout or functionalities after updating the theme.

This gives some headache to WordPress users as they might need to debug their themes, or worst, recreate or install them all over again.

In this article, you will learn something about creating a child theme in WordPress.

Understanding a Child Theme

A child theme is a theme that inherits the functionality of another theme also known as the parent theme. It allows users to make changes or add functionalities to the parent theme by separating a set of files to modify it without breaking the original theme.

Not only does this make the modification easier, it is also the safest way to update a theme. As a matter of fact it can also be turned off and fall back on the original.

Why You Need a Child Theme

Using a child can be helpful to WordPress users and developers. Here are some reasons:

  • Update the theme without any harm
  • It can make your site more secured as it won’t break any security driven codes
  • Speed up the development time
  • A great start for WordPress aspiring theme developers

A simple guide in creating a WordPress child theme

In this part, you are going to learn how to create a basic child theme. For the sake of this article,let’s use the built in NeoBlog WP theme from the previous tutorial as the parent theme. Go ahead and download it.

STEP 1 – Create a new folder for the child theme

To start off, create a new folder on the theme directory (wp-content/themes) and name it with the word “-child” added to it.

So for this example, you’ll be calling our folder “NeoBlog-child“.

neoblog-child

STEP 2 – Create the stylesheet

A stylesheet is the only required file to make a child theme. So let’s create the style.css inside the “NeoBlog-child” folder.

stylecss

Next, the style.css must also contain the following information.

/*
Theme Name: NeoBlog Child Theme
Theme URI: http://www.1stwebdesigner.com/
Description: NeoBlog Child Theme
Author: Sam Norton
Author URI: http://www.1stwebdesigner.com/
Template: NeoBlog
Version: 1.0.0
*/
<p>@import url("../NeoBlog/style.css");

/* =You can start customizing your theme here
-------------------------------------------------------------- */

Note: You can change any information above but take note that you need to keep the theme name and the template codes.

STEP 3 – Activating the Child Theme

Now to activate the child theme, navigate the WordPress admin panel and go to Appearance-> Themes. Next, click the “Activate” button and you can see your child theme active.

Great! The child theme is now active! From there you can start adding your styles below the @import tag, overwriting the current style from the parent theme.

activate

Some Things to Remember When Using a Child Theme

Now that we know how a child theme works, it is important to consider some pointers when using a child theme. Here as follows:

  • If you want to add new functions or add hooks on your theme using functions.php, you need to create your new functions.php file on the Child theme folder. Please note that the child theme functions do not override the parent theme’s functions.php.
  • The fact that a child theme’s functions.php is loaded first means that you can make the user functions of your theme pluggable — that is, replaceable by a child theme— by declaring them conditionally. See WordPress Codex.
  • When you need to include files that reside within your child theme’s directory structure, you will use get_stylesheet_directory(). See WordPress Codex.
  • To support RTL languages, add rtl.css file to your child theme using the @import tag.
  • WordPress templates are modified by replacing the file with a copy of it inside the child theme’s folder. The theme’s original file is then ignored and the new one is used instead.

Start Using a Child Theme

WordPress is a great platform to build dynamic sites. With a lot of users trying to make their site looks good by customizing the stylesheet, the child theme is the best way to go.

If you are not comfortable doing all these stuffs you might want to try the One Click Child Theme Plugin which will create a child theme for you with the click of a button.

If you have any questions or ideas about the topic, or would like further explanation, please feel free to drop a line in the comments section.

50 Written ArticlesGoogle+

is a web designer and a front web developer with over 2 years of experience in the industry. Have a passion for designing detailed, creative and modern websites & graphics. He spend most of his time practically every day, experimenting with HTML, CSS and Wordpress.

Join Discussion Now!

2 Comments
  • Mike

    Thursday, August 28th, 2014 09:40

    1

    May I know why there’s a on your stylesheet? And what kind of plugin you are using to display the codes?

    0 Reply
    • Allie

      Wednesday, September 17th, 2014 02:27

      2

      Looks like the code is displayed in notepad++ to me.

      0 Reply
  • Mike

    Thursday, August 28th, 2014 09:40

    1

    May I know why there’s a on your stylesheet? And what kind of plugin you are using to display the codes?

    0 Reply
    • Allie

      Wednesday, September 17th, 2014 02:27

      2

      Looks like the code is displayed in notepad++ to me.

      0 Reply
54.234.0.85 - unknown - unknown - US