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:
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
Fig-3: Front page view:
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:
