Child Theming: An Introduction to Wordpress Theme Development with Wordpress Child Themes

Wordpress Child Theming
An Introduction to
Wordpress Theme Development
with Wordpress Child Themes
MohamadAgusSya’banCode Name: AbanNestaFront-end Web Designer at PT. Jerbee IndonesiaWeblog – http://www.aban.web.id
Image courtesy of beginnerbaby.com

Are you a WordPress site developer wanting to significantly cut your development time by using your own WordPress Theme Framework?

Technically, a Wordpress site developer has some common problems
Image courtesy of sxc.hu

How much time do you have?
Image courtesy of gkjwpacitan.wordpress.com

How complex is your wordpress theme design?

How bad is your boss? :p
Image courtesy of chickenstrip.wordpress.com

So, you need something that could help you to develop sites faster, has strong foundation and scalable
Image courtesy of internetrentalmachines.com

Let’s do “Child-theming”!
The smart way to modify wordpress themes
Image courtesy of best-family-photography-tips.com

What is Child Theme, anyway?
A small subset of template files that allow you to
make changes and customizations to any
WordPress parent theme without altering the
parent theme’s coding.

First, let’s take a tour…
http://www.psdthemes.com
Design by: PSD Themes
Parent theme: Thematic
http://www.wpcharity.com
Design by: M.Zamroni
Parent theme: Twentyten
http://thesisthemehq.com Design by: Thesis Them HQ
Parent theme: Thesis

Find it useful?
Well, you have to first find a Mate.
Twentyten
Thematic
Thesis,
Sandbox
Arthemia
etc.
Image courtesy of cecep.web.id

How to pick a good Parent theme*
• Don’t just look at the design.
• Check to see if the X-HTML & CSS mark-up
validates according to W3C standards.
• Is there a forum or structured system for support or bug
reporting?
• Make sure that you fully understand how a Parent
theme works before building a Child theme with it.
*Thx to Allan Cole (http://www.allancole.com)

Now what?
You will need wedding rings, right? Or some
flowers is way better. In this case, few things you
need to make a child theme…

Necessary
FTP access to your site (sites on wordpress.com don’t offer this) and an FTP client.
A text/code editor (like the Windows Notepad, but preferably better).
Your chosen parent theme, ofc.

Directory Structure
public_html
wp-content
themes (directory where all themes are)
parent theme (directory of our parent theme)
childtheme(directory of our child theme; can be named anything)
style.css (required file in a child theme; must be named style.css)
Image courtesy of diamond.ac.uk

Requirement
A Parent theme (your chosen theme).
A Stylesheetstyles.css
An images folder (images) *
A Functions file functions.php *
Re-Write templates header.php *
A Screenshot screenshot.png *
* Optional

Stylesheet Setting
/*
Theme Name: Child Theme Name
Theme URI: http://your-theme-download.com
Description: Child theme for the Twenty Ten theme
Version: 1.0
Author: Your name here
Author URI: http://your-url.com
Template: twentyten
Tags: 2 columns, fixed width, etc
*/
@import url("../twentyten/style.css");
/* Insert your custom css styles below */
Image courtesy of laughingsquid.com

Note that…
There must be no other CSS rules above the
@import rule. If you put other rules above it, it
will be invalidated and the stylesheet of the
parent will not be imported.

And also…
If there are two declarations conflict, while they
are equal in everything, they are different in
this: The parent’s comes from an imported
stylesheet, while the child’s is in the stylesheet
itself.
So, The child wins!
Image courtesy themommytimes.com

Goodies
You really made it all the way down here?
Resources:
Codex: Child Themes
http://codex.wordpress.org/Child_Themes
How To Modify WordPress Themes The Smart Way
http://themeshaper.com/modify-wordpress-themes/
How to make a child theme for WordPress: A pictorial introduction for beginners
http://op111.net/53/
Image courtesy christopher-scott.com

Let’s practice…
Image courtesy accenture.com

Child Theming: An Introduction to Wordpress Theme Development with Wordpress Child Themes

by Aban Nesta on Feb 24, 2011

Accessibility

Categories

Tags

Upload Details

Usage Rights

2 Embeds 182

Statistics

Child Theming: An Introduction to Wordpress Theme Development with Wordpress Child Themes — Presentation Transcript

http://www.aban.web.id	181
http://aban.web.id	1