Create a simple WordPress Child Theme

Why You Need to Create a Child Theme?

Child themes are considered the best way to customize your WordPress themes. A child theme inherits all the features and appearance of its parent theme. You can customize it without affecting the parent theme. This allows you to easily update parent theme without worrying about losing your changes.

 

Requirements

A basic understanding of CSS/HTML is required, so that you can make your own changes. Some knowledge of PHP would certainly help. If you are good at copying and pasting code snippets from other sources, then that would work too.

We recommend you to practice on your local development environment.

You can move a live WordPress site to local server  or create an additional installation of wordpress in your web hosting, for testing purposes or use dummy content for theme development.

 

We do not recommend making experimental changes or modifications in real time in an active website

Getting Started

Any good WordPress theme can be used as a parent theme. However, there are many different kind of themes and some may not be the easiest to work with. For the sake of this tutorial, we will be using Twenty Thirteen, which is one of the default WordPress themes.

 

Creating Your First Child Theme

First you need to open /wp-content/themes/ in your WordPress installation folder and create a new folder for your child thme. You can name this folder anything you want. For this tutorial we will be naming it antarctica demo.

wp-child-theme-folders

new-theme

 

Open a text editor like Notepad and paste this code:

 

 

Now save this file as style.css in the child theme folder you just created.

Most of that stuff in this file is self explanatory. What you really want to pay attention to is the Template: twentythirteen.

wp-child-theme-folders 2

 

This tells WordPress that our theme is a child theme and that our parent theme directory name is twentythirteen. The parent folder name is case-sensitive. If we provide WordPress with Template: TwentyThirteen, then it will not work.

The last line in this code imports our parent theme’s stylesheet to the child theme.

This is the minimum requirement for creating a child theme. You can now go to Appearance » Themes where you will see Antarctica Child Theme. You need to click on activate button to start using the child theme on your site.

 

childtheme-ready

 

Since you haven’t changed anything in your child theme yet, your site will use all functionality and appearance of its parent theme.

 

Customizing Your Child Theme

Each WordPress theme has a style.css file in their main directory. Mostly this is your theme’s main stylesheet where all the CSS goes. However, some themes may only have theme’s header information in it. Such themes usually have CSS files located in a separate directory.

For this section you’ll need a bit of CSS know-how.

Google Chrome and Firefox come with built-in inspector tools. These tools allow you to look at the HTML and CSS behind any element of a web page.

If you want to see the CSS used for navigation menu, then simply take your mouse over to the navigation menu and right-click to select Inspect Element.

using-inspect-element

 

This will split your browser screen in two parts. In the bottom part of the screen, you will see the HTML and CSS for the page.

playing-with-css

 

As you move your mouse on different HTML lines, Chrome inspector will highlight them in the upper window. As you can see that we have navigation menu selected in the screenshot above.

It will also show you the CSS rules related to the highlighted element in the window on the right.

You can try editing the CSS right there to see how it would look. Let’s try changing the background-color of .navbar to #e8e5ce.

editing-css

You will see that the background color of navigation bar will change. If you like this, then you can copy this CSS rule and paste in your Child Theme’s style.css file.

 

 

Save the changes you made to style.css file and then preview your site.

Repeat the process for anything that you would want to change in your theme’s stylesheet. Here is the complete stylesheet that we have created for the child theme. Feel free to experiment and modify it.

 

 

 

Editing The Template Files

ttlayout

 

Each WordPress theme has a different layout. Let’s look at the layout of the Twenty Thirteen theme. You have header, navigation menus, content loop, footer widget area, secondary widget area, and footer.

Each of these section is handled by different files in the twentythirteen folder. These files are called templates.

Most of the time these templates are named after the area they are used for. For example, footer section is usually handled by footer.php file, header and navigation areas are handled by header.php file. Some areas, like the content area are handled by multiple files called content templates.

First you need to do is select the theme file you want to modify and then copy it into your child theme.

For example, you want to remove ‘powered by WordPress’ link from the footer area and add a copyright notice there. Simply copy the footer.php file in your child theme and then open it in a plain text editor like notepad. Find out the lines you want to remove and replace them with your own. Like this:

 

 

In this code, we have replaced Twenty Thirteen credits with a copyright notice.

Troubleshooting is a lot easier when creating child themes. For example if you accidentally deleted something that your parent theme required, then you can simply delete the file from your child theme and start over.

 

Adding New Functionality to Child Theme

You will find many WordPress tutorials asking you to copy and paste code snippet in your theme’s functions.php file.

Adding code snippets into a parent theme’s functions.php file means that your changes will be overwritten whenever there is a new update for the parent theme. This is why it is always recommended to use a child theme and add all your custom code snippets into child theme’s functions.php file.

Lets create a new file in your child theme’s folder and name it functions.php. In this example we are going to add a little code snippet which will change the default header image into our own custom made image.

We have already created a header image and a thumbnail by editing Twenty Thirteen’s default header image. Next, we uploaded it to our child theme inside /images/headers/ folder.

After that we need to tell WordPress to use this image as the default header image for our theme. We can do that by adding this code snippet into our child theme’s functions.php file:

 

 

Now if you visit Appearance » Header, you will be able to see the image we added as the default image.

 

themeheader

 

Final Result

wpbchildtheme

 

 

Other Child Themes Based on Twenty Thirteen

Here are some other WordPress child themes based on Twenty Thirteen. Take a look at them and see how these theme developers customized Twenty Thirteen.

Holi

holi

Cherry Blossom

cherryblossom

 

 

We hope this article helped you learn how to create a WordPress child theme. Remember there is plenty of support available for those who need it.

 

Leave a Reply

Your email address will not be published. Required fields are marked *
You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">