How To Create WordPress Child Theme

Why Create Child Theme

Oftentimes, we need to customize bought theme to suit with our requirements. But with doing so, we won’t be able to update the theme to it’s latest version or else the changes we made will be overwritten.

The avoid this, instead of doing the changes to the theme, we will need to create a child theme. On the child theme, we can do any changes we desired. Changes does not limit to customizing the layout, but also to creating many complex functionality such as adding options page, custom meta types, etc.

  1. Install the parent theme to your wordpress site
  2. Go to the wp-content/themes folder
  3. Create the a new folder, and name it as you want
  4. Under the newly created folder, create the ff. file
    syle.css
    Open style.css and add the ff.

    /*
    Theme Name: Foxy Child Theme
    Theme URI:
    Description:
    Author:
    Author URI:
    Template: parent-theme-folder-name
    Version: 1.0.0
    */@import url("../parent-theme-folder-name/style.css");
    /* =Theme customization starts here------------------------------------------------------- */

    replace the red text with the correct data
  5. Open wordpress dashboard, then go to appearance ? themes.
  6. You can see your child and you can activate it.
  7. Since no customizations were done yet, your site will look exactly as if the parent theme is the active theme.

Customization

Style.css

You can add any css modifications into the style.css

Functions.css

If you want additional functionality to your child theme, such as custom post meta types, new settings page, you can do so by creating functions.php at the root of your child theme’s folder

Any codes on this file should be wrap with php tag, though end tag is optional.

<?php

// Your php code goes here

?> <!– optional ?

Note: The parents functions.php will be loaded first before the child themes’ function that php

Other Files

If you want to customize other files, such as header.php, footer.php, etc, you can do so.

First copy desired file name the parent theme to your child theme’s folder. You should follow the extract directly tree. So if the file is in the root of parent theme, the file should be copied to the root of the child theme. Edit the copied file as desired.

child-theme-wordress

Copied file is contributors.php

Note: Except style.css and functions.php of the parent theme, all other files that has counterpart on the child theme’s folder will never be executed.

Share on FacebookShare on Google+Tweet about this on TwitterShare on LinkedInPrint this pageEmail this to someone

Leave a Reply

Your email address will not be published. Required fields are marked *