Creating A Child Theme for WordPress

Last modified by Belgiun Bryan Madriaga on 2015/04/14 13:12

What is a Child Theme and Why Should You Use It?

A Child Theme allows you to set up a standalone directory in which you can create copies of a theme's files (called the Parent Theme) and edit it, without the fear of your work being overwritten in future updates.


How Do You Create a Child Theme?

Create Your Child Theme's Folder

Navigate to /wp-content/themes. This directory may contain one or more folders, each of which represents a theme installed on your website. In this directory, create a new folder, a name it as nameofparenttheme-child, where parenttheme is the name of your active theme.

1Childtheme-folder.png

Create Your Child Theme's style.css

The only file that is required to create a valid child theme is a style sheet. Create a style.css file inside your child theme folder. Open up your favorite text editor and paste the following into the blank file:


/*
Theme Name: My Child Theme
Theme URL: http://mysite.com
Description: This is a custom child theme for my parent theme.
Author: My Name
Author URI: http://mysite.com
Template: parenttheme's name
Version: 1
*/

@import url ("../parenttheme/style.css");


You may change the information above to suit your needs. However, the Template variable should match the folder name of your active theme, as with the link to your active theme's style sheet.

Save your new style.css file to your child theme's folder. When you child theme is activated, WordPress will know to import all of the CSS from your parent theme's style sheet before executing any CSS storied in the child theme's style sheet. Because the CSS contained in your child theme's style sheet will be the last thing WordPress will execute, it will take precedence over any preceding CSS.

Activating Your Child Theme

In your WordPress admin area, navigate to Appearance > Themes. At the top of the screen, you will see that your parent theme is active, but you should also see your new child theme listed below. The information you included in your child theme's style sheet will be displayed here.

2Childtheme-themes.png

Click on Activate and you child theme will be shown as the active theme.

Modifying Your Child Theme's CSS

To modify your theme's CSS, you can add any changes to your child theme's CSS file below the @import</code line. For example,


<code> /*
Theme Name: My Child Theme
Theme URL: http://mysite.com
Description: This is a custom child theme for my parent theme.
Author: My Name
Author URI: http://mysite.com
Template: parenttheme's name
Version: 1
*/

@import url ("../parenttheme/style.css");
/* Theme customization starts here */
body { color: #222222; }

Editing the functions.php File

Functions.php is where a theme's main functions are typically stored. If you need to add more custom functions to your theme, then you can do so by creating a new functions.php file within your child theme's folder. The new functions will be loaded right before the parent theme's functions. Your functions.php file should start with a PHP opening tag and end with a PHP closing tag.


<?php
 Your php code goes here
 ?>

Editing Other Template Files

You can also make structural changes to your theme by adjusting the PHP template files. Unlike editing the functions.php where the original theme's functions are imported automatically, template files should be replaced entirely by a new one. To do this, simple replicate the parent theme's files and paste it on your child theme's folder, ensuring that the file name and location is exactly the same.

Open the file and make the necessary changes.


Further Readings

http://codex.wordpress.org/Child_Themes
https://managewp.com/how-to-create-a-child-theme
https://managewp.com/css-for-beginners
http://www.elegantthemes.com/blog/resources/wordpress-child-theme-tutorial
http://themify.me/docs/child-themes
http://premium.wpmudev.org/blog/create-wordpress-child-theme/

Tags:
Created by Wiki Master on 2015/04/02 13:26