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

Image courtesy of beginnerbaby.com

Mohamad Agus Sya’banCode Name: Aban Nesta

Front-end Web Designer at PT. Jerbee IndonesiaWeblog – http://www.aban.web.id

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?

Imag

e co

urte

sy o

f sxc

.hu

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 tomake changes and customizations to anyWordPress parent theme without altering theparent theme’s coding.

First, let’s take a tour…

http://www.psdthemes.comDesign by: PSD ThemesParent theme: Thematic

http://www.wpcharity.comDesign by: M.Zamroni

Parent theme: Twentyten

http://thesisthemehq.com Design by: Thesis Them HQ

Parent theme: Thesis

Find it useful?

TwentytenThematic

Thesis,SandboxArthemia

etc.

Well, you have to first find a Mate.

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)

Image courtesy of sxc.hu

Now what?

You will need wedding rings, right? Or someflowers is way better. In this case, few things youneed to make a child theme…

Image courtesy of sxc.hu

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) child theme(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 Stylesheet styles.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 NameTheme URI: http://your-theme-download.comDescription: Child theme for the Twenty Ten themeVersion: 1.0Author: Your name here Author URI: http://your-url.comTemplate: 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, itwill be invalidated and the stylesheet of theparent will not be imported.

And also…

If there are two declarations conflict, while theyare equal in everything, they are different inthis: The parent’s comes from an importedstylesheet, while the child’s is in the stylesheetitself.

So, The child wins!

Image courtesy themommytimes.com

Goodies

Resources:

Codex: Child Themeshttp://codex.wordpress.org/Child_Themes

How To Modify WordPress Themes The Smart Wayhttp://themeshaper.com/modify-wordpress-themes/

How to make a child theme for WordPress: A pictorial introduction for beginnershttp://op111.net/53/

You really made it all the way down here?

Image courtesy christopher-scott.com

Let’s practice…

Image courtesy accenture.com