SlideShare a Scribd company logo
1 of 21
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? Image courtesy of 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 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) Image courtesy of sxc.hu
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… 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)  				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

More Related Content

What's hot

Theme development essentials columbus oh word camp 2012
Theme development essentials   columbus oh word camp 2012Theme development essentials   columbus oh word camp 2012
Theme development essentials columbus oh word camp 2012
Joe Querin
 
Harness the power of wordpress
Harness the power of wordpressHarness the power of wordpress
Harness the power of wordpress
Justin Ferrell
 
Blogging Presentation
Blogging PresentationBlogging Presentation
Blogging Presentation
ajaymehta
 
WordPress Child Themes
WordPress Child ThemesWordPress Child Themes
WordPress Child Themes
openchamp
 
Week 9 - Introduction to Child Themes
Week 9  - Introduction to Child ThemesWeek 9  - Introduction to Child Themes
Week 9 - Introduction to Child Themes
henri_makembe
 
WordPressInsider Meetup - Introduction to WordPress Meeting, June 8, 2015
WordPressInsider Meetup - Introduction to WordPress Meeting, June 8, 2015WordPressInsider Meetup - Introduction to WordPress Meeting, June 8, 2015
WordPressInsider Meetup - Introduction to WordPress Meeting, June 8, 2015
Michelle Castillo
 
WordPress Developers Israel Meetup #1
WordPress Developers Israel Meetup #1WordPress Developers Israel Meetup #1
WordPress Developers Israel Meetup #1
Yoav Farhi
 

What's hot (20)

Theme development essentials columbus oh word camp 2012
Theme development essentials   columbus oh word camp 2012Theme development essentials   columbus oh word camp 2012
Theme development essentials columbus oh word camp 2012
 
Harness the power of wordpress
Harness the power of wordpressHarness the power of wordpress
Harness the power of wordpress
 
WordPress best practices by billrice
WordPress best practices by billriceWordPress best practices by billrice
WordPress best practices by billrice
 
Blogging Presentation
Blogging PresentationBlogging Presentation
Blogging Presentation
 
WordPress Child Themes
WordPress Child ThemesWordPress Child Themes
WordPress Child Themes
 
WordPress Themes - From Designer’s Perspective
WordPress Themes - From Designer’s PerspectiveWordPress Themes - From Designer’s Perspective
WordPress Themes - From Designer’s Perspective
 
Adding Content to your WordPress Website
Adding Content to your WordPress WebsiteAdding Content to your WordPress Website
Adding Content to your WordPress Website
 
Customizing WordPress Themes
Customizing WordPress ThemesCustomizing WordPress Themes
Customizing WordPress Themes
 
What is (not) WordPress
What is (not) WordPressWhat is (not) WordPress
What is (not) WordPress
 
Child Themes in WordPress
Child Themes in WordPressChild Themes in WordPress
Child Themes in WordPress
 
Building the basics (WordPress Ottawa 2014)
Building the basics (WordPress Ottawa 2014)Building the basics (WordPress Ottawa 2014)
Building the basics (WordPress Ottawa 2014)
 
Getting Started with Wordpress
Getting Started with WordpressGetting Started with Wordpress
Getting Started with Wordpress
 
Why Blogs Are Better
Why Blogs Are BetterWhy Blogs Are Better
Why Blogs Are Better
 
What Is WordPress and Why Should I Use It? - Workshop April 2015
What Is WordPress and Why Should I Use It? - Workshop April 2015What Is WordPress and Why Should I Use It? - Workshop April 2015
What Is WordPress and Why Should I Use It? - Workshop April 2015
 
Intro to StudioPress child themes
Intro to StudioPress child themesIntro to StudioPress child themes
Intro to StudioPress child themes
 
Week 9 - Introduction to Child Themes
Week 9  - Introduction to Child ThemesWeek 9  - Introduction to Child Themes
Week 9 - Introduction to Child Themes
 
WordPress Themes Demystified
WordPress Themes DemystifiedWordPress Themes Demystified
WordPress Themes Demystified
 
WordPressInsider Meetup - Introduction to WordPress Meeting, June 8, 2015
WordPressInsider Meetup - Introduction to WordPress Meeting, June 8, 2015WordPressInsider Meetup - Introduction to WordPress Meeting, June 8, 2015
WordPressInsider Meetup - Introduction to WordPress Meeting, June 8, 2015
 
Introduction to WordPress
Introduction to WordPressIntroduction to WordPress
Introduction to WordPress
 
WordPress Developers Israel Meetup #1
WordPress Developers Israel Meetup #1WordPress Developers Israel Meetup #1
WordPress Developers Israel Meetup #1
 

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

2009-08-28-WordPress-Parent-Child-Themes
2009-08-28-WordPress-Parent-Child-Themes2009-08-28-WordPress-Parent-Child-Themes
2009-08-28-WordPress-Parent-Child-Themes
LightSpeed
 
Meetup child-themes
Meetup child-themesMeetup child-themes
Meetup child-themes
DaisyOlsen
 
WordPress Child Themes
WordPress Child ThemesWordPress Child Themes
WordPress Child Themes
rfair404
 
Intro to WordPress Child Themes
Intro to WordPress Child ThemesIntro to WordPress Child Themes
Intro to WordPress Child Themes
vegasgeek
 

Similar to Child Theming: An Introduction to Wordpress Theme Development with Wordpress Child Themes (20)

HTML/CSS for WordPress
HTML/CSS for WordPressHTML/CSS for WordPress
HTML/CSS for WordPress
 
Firstborn child theme word camp presentation - atlanta 2013
Firstborn child theme   word camp presentation - atlanta 2013Firstborn child theme   word camp presentation - atlanta 2013
Firstborn child theme word camp presentation - atlanta 2013
 
W pthemes
W pthemesW pthemes
W pthemes
 
2009-08-28-WordPress-Parent-Child-Themes
2009-08-28-WordPress-Parent-Child-Themes2009-08-28-WordPress-Parent-Child-Themes
2009-08-28-WordPress-Parent-Child-Themes
 
Meetup child-themes
Meetup child-themesMeetup child-themes
Meetup child-themes
 
WordPress Child Themes
WordPress Child ThemesWordPress Child Themes
WordPress Child Themes
 
Responsive Theme Workshop - WordCamp Columbus 2015
Responsive Theme Workshop - WordCamp Columbus 2015Responsive Theme Workshop - WordCamp Columbus 2015
Responsive Theme Workshop - WordCamp Columbus 2015
 
Intro to WordPress Child Themes
Intro to WordPress Child ThemesIntro to WordPress Child Themes
Intro to WordPress Child Themes
 
Wordpress podcamp2011
Wordpress podcamp2011Wordpress podcamp2011
Wordpress podcamp2011
 
Child Themes (WordCamp Dublin 2017) with notes
Child Themes (WordCamp Dublin 2017) with notesChild Themes (WordCamp Dublin 2017) with notes
Child Themes (WordCamp Dublin 2017) with notes
 
Introduction to WordPress Child Themes
Introduction to WordPress Child ThemesIntroduction to WordPress Child Themes
Introduction to WordPress Child Themes
 
Don't Fear the Custom Theme: How to build a custom WordPress theme with only ...
Don't Fear the Custom Theme: How to build a custom WordPress theme with only ...Don't Fear the Custom Theme: How to build a custom WordPress theme with only ...
Don't Fear the Custom Theme: How to build a custom WordPress theme with only ...
 
Getting the Most out of the Genesis Theme Framework
Getting the Most out of the Genesis Theme FrameworkGetting the Most out of the Genesis Theme Framework
Getting the Most out of the Genesis Theme Framework
 
Theme Wrangling 101
Theme Wrangling 101Theme Wrangling 101
Theme Wrangling 101
 
How To Choose A Theme
How To Choose A ThemeHow To Choose A Theme
How To Choose A Theme
 
Child Themes and CSS in WordPress
Child Themes and CSS in WordPressChild Themes and CSS in WordPress
Child Themes and CSS in WordPress
 
WP Joburg Meetup 10: Genesis Framework by Trish Cornelius
WP Joburg Meetup 10: Genesis Framework by Trish CorneliusWP Joburg Meetup 10: Genesis Framework by Trish Cornelius
WP Joburg Meetup 10: Genesis Framework by Trish Cornelius
 
WordPress Theme Design - Rich Media Institute Workshop
WordPress Theme Design - Rich Media Institute WorkshopWordPress Theme Design - Rich Media Institute Workshop
WordPress Theme Design - Rich Media Institute Workshop
 
Wordpress For Begineer
Wordpress For BegineerWordpress For Begineer
Wordpress For Begineer
 
Newbies guide to customizing word press themes 25
Newbies guide to customizing word press themes 25Newbies guide to customizing word press themes 25
Newbies guide to customizing word press themes 25
 

Recently uploaded

+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
?#DUbAI#??##{{(☎️+971_581248768%)**%*]'#abortion pills for sale in dubai@
 

Recently uploaded (20)

FWD Group - Insurer Innovation Award 2024
FWD Group - Insurer Innovation Award 2024FWD Group - Insurer Innovation Award 2024
FWD Group - Insurer Innovation Award 2024
 
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemkeProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke
 
Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...
Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...
Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...
 
How to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected WorkerHow to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected Worker
 
+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
 
Emergent Methods: Multi-lingual narrative tracking in the news - real-time ex...
Emergent Methods: Multi-lingual narrative tracking in the news - real-time ex...Emergent Methods: Multi-lingual narrative tracking in the news - real-time ex...
Emergent Methods: Multi-lingual narrative tracking in the news - real-time ex...
 
Axa Assurance Maroc - Insurer Innovation Award 2024
Axa Assurance Maroc - Insurer Innovation Award 2024Axa Assurance Maroc - Insurer Innovation Award 2024
Axa Assurance Maroc - Insurer Innovation Award 2024
 
Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...
Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...
Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...
 
Apidays New York 2024 - The value of a flexible API Management solution for O...
Apidays New York 2024 - The value of a flexible API Management solution for O...Apidays New York 2024 - The value of a flexible API Management solution for O...
Apidays New York 2024 - The value of a flexible API Management solution for O...
 
2024: Domino Containers - The Next Step. News from the Domino Container commu...
2024: Domino Containers - The Next Step. News from the Domino Container commu...2024: Domino Containers - The Next Step. News from the Domino Container commu...
2024: Domino Containers - The Next Step. News from the Domino Container commu...
 
Boost Fertility New Invention Ups Success Rates.pdf
Boost Fertility New Invention Ups Success Rates.pdfBoost Fertility New Invention Ups Success Rates.pdf
Boost Fertility New Invention Ups Success Rates.pdf
 
Apidays New York 2024 - Accelerating FinTech Innovation by Vasa Krishnan, Fin...
Apidays New York 2024 - Accelerating FinTech Innovation by Vasa Krishnan, Fin...Apidays New York 2024 - Accelerating FinTech Innovation by Vasa Krishnan, Fin...
Apidays New York 2024 - Accelerating FinTech Innovation by Vasa Krishnan, Fin...
 
Apidays Singapore 2024 - Scalable LLM APIs for AI and Generative AI Applicati...
Apidays Singapore 2024 - Scalable LLM APIs for AI and Generative AI Applicati...Apidays Singapore 2024 - Scalable LLM APIs for AI and Generative AI Applicati...
Apidays Singapore 2024 - Scalable LLM APIs for AI and Generative AI Applicati...
 
Corporate and higher education May webinar.pptx
Corporate and higher education May webinar.pptxCorporate and higher education May webinar.pptx
Corporate and higher education May webinar.pptx
 
TrustArc Webinar - Stay Ahead of US State Data Privacy Law Developments
TrustArc Webinar - Stay Ahead of US State Data Privacy Law DevelopmentsTrustArc Webinar - Stay Ahead of US State Data Privacy Law Developments
TrustArc Webinar - Stay Ahead of US State Data Privacy Law Developments
 
Artificial Intelligence Chap.5 : Uncertainty
Artificial Intelligence Chap.5 : UncertaintyArtificial Intelligence Chap.5 : Uncertainty
Artificial Intelligence Chap.5 : Uncertainty
 
Connector Corner: Accelerate revenue generation using UiPath API-centric busi...
Connector Corner: Accelerate revenue generation using UiPath API-centric busi...Connector Corner: Accelerate revenue generation using UiPath API-centric busi...
Connector Corner: Accelerate revenue generation using UiPath API-centric busi...
 
Repurposing LNG terminals for Hydrogen Ammonia: Feasibility and Cost Saving
Repurposing LNG terminals for Hydrogen Ammonia: Feasibility and Cost SavingRepurposing LNG terminals for Hydrogen Ammonia: Feasibility and Cost Saving
Repurposing LNG terminals for Hydrogen Ammonia: Feasibility and Cost Saving
 
Automating Google Workspace (GWS) & more with Apps Script
Automating Google Workspace (GWS) & more with Apps ScriptAutomating Google Workspace (GWS) & more with Apps Script
Automating Google Workspace (GWS) & more with Apps Script
 
Manulife - Insurer Transformation Award 2024
Manulife - Insurer Transformation Award 2024Manulife - Insurer Transformation Award 2024
Manulife - Insurer Transformation Award 2024
 

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

  • 1. 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
  • 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 problems Image 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? :p Image courtesy of chickenstrip.wordpress.com
  • 7. So, you need something that could help you to develop sites faster, has strong foundation and scalable Image courtesy of internetrentalmachines.com
  • 8. Let’s do “Child-theming”! The smart way to modify wordpress themes Image courtesy of best-family-photography-tips.com
  • 9. 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.
  • 10. 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
  • 11. Find it useful? Well, you have to first find a Mate. Twentyten Thematic Thesis, Sandbox Arthemia etc. Image courtesy of cecep.web.id
  • 12. 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
  • 13. 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… Image courtesy of sxc.hu
  • 14. 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.
  • 15. 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
  • 16. 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
  • 17. 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
  • 18. 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.
  • 19. 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
  • 20. 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
  • 21. Let’s practice… Image courtesy accenture.com