child theming: an introduction to wordpress theme development with wordpress child themes
DESCRIPTION
This presentation slide I made in order to fulfill my obligation as a speaker of Jerbee's Friday IT.TRANSCRIPT
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