How to create Child Theme in WP

It is a must to have a Child Theme for our all customized website themes. When we’re doing customization to our theme’s it is a best practice to do in the child theme why because if you are editing the CSS or PHP files directly in the original theme all your changes will be wiped when you update the theme. So the changes in your child theme untouched by the new updates thus save your precious time and effort make peace of mind.

So in this tutorial I am going to explain by step by step how to create child theme in very simple method.

1. The first thing we need to do is create a new folder in our themes directory to hold the child theme. You can do with using cPanel or via FTP. The themes directory is wp-content/themes.

It’s important to name the folder without any space in the name, and it’s common practive to use the name of the parent theme folder with “-child” added on the end.

So for this example, we’ll be calling our folder “twentythirteen-child”.

 child-theme-folder

2. In the child theme folder, create a file called style.css. This is the only file required to make a child theme.

The style sheet must start with the following lines:

1
2
3
4
5
6
7
8
9
10
11
12
/*
Theme Name: Twenty Thirteen Child
Theme URI: http://wordpress.org/themes/twentythirteen
Description: Twenty Thirteen Child Theme
Author: WPMU
Author URI: http://wpmu.com
Template: twentythirteen
Version: 1.0.0
*/
@import url("../twentythirteen/style.css");
/* =Theme customization starts here
-------------------------------------------------------------- */

You can change each of the lines to suit your theme, but you must keep Theme Name and Template lines as well as the @import section. The template is the folder name of the parent theme, in this case twentythirteen.

3. Now we need to activate the child theme. Login to your WordPress site and go to Appearances > Themes. Find your child theme in the list of available themes and click “Activate”.

4. Your child theme should now be the active theme.

child-theme

Modifying Your Theme’s CSS

Our child theme works a treat and looks just like the parent theme because we’ve imported its CSS file.

If you want to modify the theme’s CSS, you can add any changes to the child theme’s CSS file below the @import line. All new CSS information is applied to your site after the original theme’s CSS is loaded, overwriting it.

Say we want to change the text in our theme so it is bubblegum pink. All we need to do is add a line to the child theme’s CSS file:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
/*
Theme Name: Twenty Thirteen Child
Theme URI: http://wordpress.org/themes/twentythirteen
Description: Twenty Thirteen Child Theme
Author: WPMU
Author URI: http://wpmu.com
Template: twentythirteen
Version: 1.0.0
*/
@import url("../twentythirteen/style.css");
/* =Theme customization starts here
-------------------------------------------------------------- */

p { color: #FFDFDD;}

This change to the child theme’s CSS overwrites the original CSS for the parent theme.

Now our site looks like this:

twenty-thirteen

Editing the functions.php File

The functions.php file is where a theme’s main functions are usually kept. If you need to add custom functions to your theme, you can do so by creating a new functions.php file within your child theme folder.

Unlike style.css, the functions.php file in a child theme does not override its counterpart from the parent. Instead, it is loaded in addition to – and right before – the parent theme’s functions.php.

You child theme’s functions.php file should start with a php opening tag and end with a php closing tag. You can add your functions in between.

1
2
3
4
5
<?php

// Stick your php code in here

?>

Editing Other Theme Files

Unlike the functions.php file, the functions for your theme’s other PHP files aren’t imported automatically. Other PHP files are edited by replacing the file with a copy. The theme’s original file is then ignored and the new one is used instead.

For example, if you’re planning to make changes to Twenty Thirteen’s 404.php file, you would need to first make a copy of the old file and paste it into the child theme.

Once the file has been copied into the child theme, you can make any changes you like, safe in the knowledge you can revert back to the parent theme any time you want.

Categories


TOP