JoomlaTemplates.me by HostMonster Reviews

Wordpress Tutorial: how to create a child theme

Published: Thursday, 09 October 2014

In this tutorial, we are going to create a child theme for twenty-ten, activate the child theme and change the background color of the entire theme to confirm our child theme is working.

According to wordpress:

A child theme is a theme that inherits the functionality of another theme, called the parent theme. Child themes allow you to modify, or add to the functionality of that parent theme. A child theme is the best, safest, and easiest way to modify an existing theme, whether you want to make a few tiny changes or extensive changes. Instead of modifying the theme files directly, you can create a child theme and override within. "
source: http://codex.wordpress.org/Child_Themes

Let's go:

1) Locate your wordpress installation folder

2) Goto the directory: wp-content >> themes

3) Create a folder(inside 'themes' directory) called 'twentyten-child'...without the quotes.....

4) Create a file (inside the folder 'twentyten-child') with name: style.css. Open to edit it, paste the following:

/*
Theme Name: Twenty Ten Child
Theme URI: http://example.com/twenty-ten-child/
Description: Twenty Ten Child Theme
Author: Tokunbo Ajewole (your author-name)
Author URI: http://example.com
Template: twentyten
Version: 1.0.0
Tags: light, dark, two-columns, right-sidebar, responsive-layout, accessibility-ready
Text Domain: twenty-ten-child
*/

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

/* =Theme customization starts here
-------------------------------------------------------------- */

Very important details in the above:

  • Theme name: the name for the new theme
  • Template: "twentyten".....this refers to the parent-themes' 'twentyten' folder-name.
  • @import url("../twentyten/style.css"); ...refers to the location of 'style.css' file in the parent theme's folder

Fig-1: Sample folder structure:

wpdir

Note: in the above, my wordpress installation is in a folder with name: wp3

5) Goto your Dashboard >> Appearance >> Themes and you would see your new child theme listed.

Activate it and go to your Website's front-page. There should be no changes as before

Fig-2: Active child theme in Dashboard >> Appearance >> Themes

wpfig1

Fig-3: Front page view:

wp-grey

6) To confirm our child theme is working, we want to change the background color of our theme from its greyish'ness to black.

Add the following to the Twenty Ten Child's css file: style.css

body {
background: #000000;
}

Save the file and refresh your front page.

Fig-4: Front page view after background-color change in child theme:

wp-front

Add comment


Security code
Refresh