Your SlideShare is downloading. ×
0
Wordpress Child Theming<br />An Introduction to <br />Wordpress Theme Development <br />with Wordpress Child Themes<br />M...
Are you a WordPress site developer wanting to significantly cut your development time by using your own WordPress Theme Fr...
Technically, a Wordpress site developer has some common problems<br />Image courtesy of sxc.hu<br />
How much time do you have?<br />Image courtesy of gkjwpacitan.wordpress.com<br />
How complex is your wordpress theme design?<br />Image courtesy of sxc.hu<br />
How bad is your boss? :p<br />Image courtesy of chickenstrip.wordpress.com<br />
So, you need something that could help you  to develop sites faster, has strong foundation and scalable<br />Image courtes...
Let’s do “Child-theming”!<br />The smart way to modify wordpress themes<br />Image courtesy of best-family-photography-tip...
What is Child Theme, anyway?<br />A small subset of template files that allow you to<br />make changes and customizations ...
First, let’s take a tour…<br />http://www.psdthemes.com<br />Design by: PSD Themes<br />Parent theme: Thematic<br />http:/...
Find it useful?<br />Well, you have to first find a Mate.<br />Twentyten<br />Thematic<br />Thesis,<br />Sandbox<br />Arth...
How to pick a good Parent theme*<br />• Don’t just look at the design.<br />• Check to see if the X-HTML & CSS mark-up<br ...
Now what?<br />You will need wedding rings, right? Or some<br />flowers is way better. In this case, few things you<br />n...
Necessary<br />FTP access to your site (sites on wordpress.com don’t offer this) and an FTP client.<br />A text/code edito...
Directory Structure<br />public_html<br />wp-content<br />			themes (directory where all themes 		are) <br />				parent th...
Requirement<br />A Parent theme (your chosen theme).<br />A Stylesheetstyles.css<br />An images folder (images) *<br />A F...
Stylesheet Setting<br />/* <br />Theme Name: Child Theme Name<br />Theme URI: http://your-theme-download.com<br />Descript...
Note that…<br />There must be no other CSS rules above the<br />@import rule. If you put other rules above it, it<br />wil...
And also…<br />If there are two declarations conflict, while they<br />are equal in everything, they are different in<br /...
Goodies<br />You really made it all the way down here? <br />Resources:<br />Codex: Child Themes<br />http://codex.wordpre...
Let’s practice…<br />Image courtesy accenture.com<br />
Upcoming SlideShare
Loading in...5
×

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

2,436

Published on

This presentation slide I made in order to fulfill my obligation as a speaker of Jerbee's Friday IT.

Published in: Technology, Business
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
2,436
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
15
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Transcript of "Child Theming: An Introduction to Wordpress Theme Development with Wordpress Child Themes"

  1. 1. Wordpress Child Theming<br />An Introduction to <br />Wordpress Theme Development <br />with Wordpress Child Themes<br />MohamadAgusSya’banCode Name: AbanNestaFront-end Web Designer at PT. Jerbee IndonesiaWeblog – http://www.aban.web.id<br />Image courtesy of beginnerbaby.com<br />
  2. 2. Are you a WordPress site developer wanting to significantly cut your development time by using your own WordPress Theme Framework?<br />
  3. 3. Technically, a Wordpress site developer has some common problems<br />Image courtesy of sxc.hu<br />
  4. 4. How much time do you have?<br />Image courtesy of gkjwpacitan.wordpress.com<br />
  5. 5. How complex is your wordpress theme design?<br />Image courtesy of sxc.hu<br />
  6. 6. How bad is your boss? :p<br />Image courtesy of chickenstrip.wordpress.com<br />
  7. 7. So, you need something that could help you to develop sites faster, has strong foundation and scalable<br />Image courtesy of internetrentalmachines.com<br />
  8. 8. Let’s do “Child-theming”!<br />The smart way to modify wordpress themes<br />Image courtesy of best-family-photography-tips.com<br />
  9. 9. What is Child Theme, anyway?<br />A small subset of template files that allow you to<br />make changes and customizations to any<br />WordPress parent theme without altering the<br />parent theme’s coding.<br />
  10. 10. First, let’s take a tour…<br />http://www.psdthemes.com<br />Design by: PSD Themes<br />Parent theme: Thematic<br />http://www.wpcharity.com<br />Design by: M.Zamroni<br />Parent theme: Twentyten<br />http://thesisthemehq.com Design by: Thesis Them HQ<br />Parent theme: Thesis<br />
  11. 11. Find it useful?<br />Well, you have to first find a Mate.<br />Twentyten<br />Thematic<br />Thesis,<br />Sandbox<br />Arthemia<br />etc.<br />Image courtesy of cecep.web.id<br />
  12. 12. How to pick a good Parent theme*<br />• Don’t just look at the design.<br />• Check to see if the X-HTML & CSS mark-up<br /> validates according to W3C standards.<br />• Is there a forum or structured system for support or bug<br /> reporting?<br />• Make sure that you fully understand how a Parent<br /> theme works before building a Child theme with it.<br />*Thx to Allan Cole (http://www.allancole.com)<br />Image courtesy of sxc.hu<br />
  13. 13. Now what?<br />You will need wedding rings, right? Or some<br />flowers is way better. In this case, few things you<br />need to make a child theme…<br />Image courtesy of sxc.hu<br />
  14. 14. Necessary<br />FTP access to your site (sites on wordpress.com don’t offer this) and an FTP client.<br />A text/code editor (like the Windows Notepad, but preferably better).<br />Your chosen parent theme, ofc. <br />
  15. 15. Directory Structure<br />public_html<br />wp-content<br /> themes (directory where all themes are) <br /> parent theme (directory of our parent theme) <br /> childtheme(directory of our child theme; can be named anything) <br />style.css (required file in a child theme; must be named style.css) <br />Image courtesy of diamond.ac.uk<br />
  16. 16. Requirement<br />A Parent theme (your chosen theme).<br />A Stylesheetstyles.css<br />An images folder (images) *<br />A Functions file functions.php *<br />Re-Write templates header.php *<br />A Screenshot screenshot.png *<br />* Optional<br />
  17. 17. Stylesheet Setting<br />/* <br />Theme Name: Child Theme Name<br />Theme URI: http://your-theme-download.com<br />Description: Child theme for the Twenty Ten theme<br />Version: 1.0<br />Author: Your name here <br />Author URI: http://your-url.com<br />Template: twentyten<br />Tags: 2 columns, fixed width, etc<br />*/<br />@import url("../twentyten/style.css"); <br />/* Insert your custom css styles below */<br />Image courtesy of laughingsquid.com<br />
  18. 18. Note that…<br />There must be no other CSS rules above the<br />@import rule. If you put other rules above it, it<br />will be invalidated and the stylesheet of the<br />parent will not be imported.<br />
  19. 19. And also…<br />If there are two declarations conflict, while they<br />are equal in everything, they are different in<br />this: The parent’s comes from an imported<br />stylesheet, while the child’s is in the stylesheet<br />itself. <br />So, The child wins!<br />Image courtesy themommytimes.com<br />
  20. 20. Goodies<br />You really made it all the way down here? <br />Resources:<br />Codex: Child Themes<br />http://codex.wordpress.org/Child_Themes<br />How To Modify WordPress Themes The Smart Way<br />http://themeshaper.com/modify-wordpress-themes/<br />How to make a child theme for WordPress: A pictorial introduction for beginners<br />http://op111.net/53/<br />Image courtesy christopher-scott.com<br />
  21. 21. Let’s practice…<br />Image courtesy accenture.com<br />
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×