際際滷

際際滷Share a Scribd company logo

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

Download as PPTX, PDF
Aban Nesta
Aban Nesta

This document provides an introduction to creating WordPress child themes. It explains that child themes allow developers to customize parent themes without modifying the original code. It outlines the necessary components for a child theme, including a style sheet, functions file, and directory structure within the themes folder. The document also provides tips on selecting a good parent theme and instructions for setting up the child theme stylesheet to import the parent's styles while allowing the child's CSS rules to override when in conflict.

1 of 21
Wordpress Child ThemingAn Introduction to Wordpress Theme Development with Wordpress Child ThemesMohamadAgusSyabanCode Name: AbanNestaFront-end Web Designer at PT. Jerbee IndonesiaWeblog http://www.aban.web.idImage 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 problemsImage courtesy of sxc.hu
How much time do you have?Image courtesy of gkjwpacitan.wordpress.com
How complex is your wordpress theme design?Image courtesy of sxc.hu
How bad is your boss? :pImage courtesy of chickenstrip.wordpress.com
So, you need something that could help you to develop sites faster, has strong foundation and scalableImage courtesy of internetrentalmachines.com
Lets do Child-theming!The smart way to modify wordpress themesImage 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 themes coding.
First, lets take a tourhttp://www.psdthemes.comDesign by: PSD ThemesParent theme: Thematichttp://www.wpcharity.comDesign by: M.ZamroniParent theme: Twentytenhttp://thesisthemehq.com Design by: Thesis Them HQParent theme: Thesis
Find it useful?Well, you have to first find a Mate.TwentytenThematicThesis,SandboxArthemiaetc.Image courtesy of cecep.web.id
How to pick a good Parent theme* Dont 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 themeImage courtesy of sxc.hu
NecessaryFTP access to your site (sites on wordpress.com dont offer this) and an FTP client.A text/code editor (like the Windows Notepad, but preferably better).Your chosen parent theme, ofc.
Directory Structurepublic_htmlwp-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
RequirementA Parent theme (your chosen theme).A Stylesheetstyles.cssAn 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: twentytenTags: 2 columns, fixed width, etc*/@import url(/slideshow/child-theming-an-introduction-to-wordpress-theme-development-with-wordpress-child-themes/7047141/"../twentyten/style.css"); /* Insert your custom css styles below */Image courtesy of laughingsquid.com
Note thatThere 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 alsoIf there are two declarations conflict, while theyare equal in everything, they are different inthis: The parents comes from an importedstylesheet, while the childs is in the stylesheetitself. So, The child wins!Image courtesy themommytimes.com
GoodiesYou really made it all the way down here? Resources:Codex: Child Themeshttp://codex.wordpress.org/Child_ThemesHow To Modify WordPress Themes The SmartWayhttp://themeshaper.com/modify-wordpress-themes/How to make a child theme for WordPress: A pictorial introduction for beginnershttp://op111.net/53/Image courtesy christopher-scott.com
Lets practiceImage courtesy accenture.com

More Related Content

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

  • 1. Wordpress Child ThemingAn Introduction to Wordpress Theme Development with Wordpress Child ThemesMohamadAgusSyabanCode Name: AbanNestaFront-end Web Designer at PT. Jerbee IndonesiaWeblog http://www.aban.web.idImage courtesy of beginnerbaby.com
  • 2. Are you a WordPress site developer wanting to significantly cut your development time by using your own WordPress Theme Framework?
  • 3. Technically, a Wordpress site developer has some common problemsImage courtesy of sxc.hu
  • 4. How much time do you have?Image courtesy of gkjwpacitan.wordpress.com
  • 5. How complex is your wordpress theme design?Image courtesy of sxc.hu
  • 6. How bad is your boss? :pImage courtesy of chickenstrip.wordpress.com
  • 7. So, you need something that could help you to develop sites faster, has strong foundation and scalableImage courtesy of internetrentalmachines.com
  • 8. Lets do Child-theming!The smart way to modify wordpress themesImage courtesy of best-family-photography-tips.com
  • 9. 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 themes coding.
  • 10. First, lets take a tourhttp://www.psdthemes.comDesign by: PSD ThemesParent theme: Thematichttp://www.wpcharity.comDesign by: M.ZamroniParent theme: Twentytenhttp://thesisthemehq.com Design by: Thesis Them HQParent theme: Thesis
  • 11. Find it useful?Well, you have to first find a Mate.TwentytenThematicThesis,SandboxArthemiaetc.Image courtesy of cecep.web.id
  • 12. How to pick a good Parent theme* Dont 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
  • 13. Now what?You will need wedding rings, right? Or someflowers is way better. In this case, few things youneed to make a child themeImage courtesy of sxc.hu
  • 14. NecessaryFTP access to your site (sites on wordpress.com dont offer this) and an FTP client.A text/code editor (like the Windows Notepad, but preferably better).Your chosen parent theme, ofc.
  • 15. Directory Structurepublic_htmlwp-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
  • 16. RequirementA Parent theme (your chosen theme).A Stylesheetstyles.cssAn images folder (images) *A Functions file functions.php *Re-Write templates header.php *A Screenshot screenshot.png ** Optional
  • 17. 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: twentytenTags: 2 columns, fixed width, etc*/@import url(/slideshow/child-theming-an-introduction-to-wordpress-theme-development-with-wordpress-child-themes/7047141/"../twentyten/style.css"); /* Insert your custom css styles below */Image courtesy of laughingsquid.com
  • 18. Note thatThere 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.
  • 19. And alsoIf there are two declarations conflict, while theyare equal in everything, they are different inthis: The parents comes from an importedstylesheet, while the childs is in the stylesheetitself. So, The child wins!Image courtesy themommytimes.com
  • 20. GoodiesYou really made it all the way down here? Resources:Codex: Child Themeshttp://codex.wordpress.org/Child_ThemesHow To Modify WordPress Themes The SmartWayhttp://themeshaper.com/modify-wordpress-themes/How to make a child theme for WordPress: A pictorial introduction for beginnershttp://op111.net/53/Image courtesy christopher-scott.com