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 2012Joe Querin
 
Harness the power of wordpress
Harness the power of wordpressHarness the power of wordpress
Harness the power of wordpressJustin Ferrell
 
WordPress best practices by billrice
WordPress best practices by billriceWordPress best practices by billrice
WordPress best practices by billriceRiceDesign
 
Blogging Presentation
Blogging PresentationBlogging Presentation
Blogging Presentationajaymehta
 
WordPress Child Themes
WordPress Child ThemesWordPress Child Themes
WordPress Child Themesopenchamp
 
WordPress Themes - From Designer’s Perspective
WordPress Themes - From Designer’s PerspectiveWordPress Themes - From Designer’s Perspective
WordPress Themes - From Designer’s PerspectiveKanchha kaji Prajapati
 
Adding Content to your WordPress Website
Adding Content to your WordPress WebsiteAdding Content to your WordPress Website
Adding Content to your WordPress WebsiteRiceDesign
 
Customizing WordPress Themes
Customizing WordPress ThemesCustomizing WordPress Themes
Customizing WordPress ThemesLaura Hartwig
 
Child Themes in WordPress
Child Themes in WordPressChild Themes in WordPress
Child Themes in WordPressJeff Cohan
 
Building the basics (WordPress Ottawa 2014)
Building the basics (WordPress Ottawa 2014)Building the basics (WordPress Ottawa 2014)
Building the basics (WordPress Ottawa 2014)christopherfross
 
Getting Started with Wordpress
Getting Started with WordpressGetting Started with Wordpress
Getting Started with WordpressTom Semmes
 
Why Blogs Are Better
Why Blogs Are BetterWhy Blogs Are Better
Why Blogs Are BetterTris Hussey
 
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 2015BobWP.com
 
Intro to StudioPress child themes
Intro to StudioPress child themesIntro to StudioPress child themes
Intro to StudioPress child themesvegasgeek
 
Week 9 - Introduction to Child Themes
Week 9  - Introduction to Child ThemesWeek 9  - Introduction to Child Themes
Week 9 - Introduction to Child Themeshenri_makembe
 
WordPress Themes Demystified
WordPress Themes DemystifiedWordPress Themes Demystified
WordPress Themes DemystifiedChris Burgess
 
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, 2015Michelle Castillo
 
WordPress Developers Israel Meetup #1
WordPress Developers Israel Meetup #1WordPress Developers Israel Meetup #1
WordPress Developers Israel Meetup #1Yoav 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

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 2013Evan Mullins
 
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-ThemesLightSpeed
 
Meetup child-themes
Meetup child-themesMeetup child-themes
Meetup child-themesDaisyOlsen
 
WordPress Child Themes
WordPress Child ThemesWordPress Child Themes
WordPress Child Themesrfair404
 
Responsive Theme Workshop - WordCamp Columbus 2015
Responsive Theme Workshop - WordCamp Columbus 2015Responsive Theme Workshop - WordCamp Columbus 2015
Responsive Theme Workshop - WordCamp Columbus 2015Joe Querin
 
Intro to WordPress Child Themes
Intro to WordPress Child ThemesIntro to WordPress Child Themes
Intro to WordPress Child Themesvegasgeek
 
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 notesDamien Carbery
 
Introduction to WordPress Child Themes
Introduction to WordPress Child ThemesIntroduction to WordPress Child Themes
Introduction to WordPress Child Themesoneilldec
 
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 ...LinnAlexandra
 
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 FrameworkEast Bay WordPress Meetup
 
Theme Wrangling 101
Theme Wrangling 101Theme Wrangling 101
Theme Wrangling 101mikeyarce
 
How To Choose A Theme
How To Choose A ThemeHow To Choose A Theme
How To Choose A ThemeNicky Pink
 
Child Themes and CSS in WordPress
Child Themes and CSS in WordPressChild Themes and CSS in WordPress
Child Themes and CSS in WordPressMatthew Vaccaro
 
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 CorneliusWPJoburg
 
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 WorkshopBrendan Sera-Shriar
 
Wordpress For Begineer
Wordpress For BegineerWordpress For Begineer
Wordpress For BegineerBinita Neupane
 
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 25New Tricks
 

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

"ML in Production",Oleksandr Bagan
"ML in Production",Oleksandr Bagan"ML in Production",Oleksandr Bagan
"ML in Production",Oleksandr BaganFwdays
 
DevEX - reference for building teams, processes, and platforms
DevEX - reference for building teams, processes, and platformsDevEX - reference for building teams, processes, and platforms
DevEX - reference for building teams, processes, and platformsSergiu Bodiu
 
Ensuring Technical Readiness For Copilot in Microsoft 365
Ensuring Technical Readiness For Copilot in Microsoft 365Ensuring Technical Readiness For Copilot in Microsoft 365
Ensuring Technical Readiness For Copilot in Microsoft 3652toLead Limited
 
Connect Wave/ connectwave Pitch Deck Presentation
Connect Wave/ connectwave Pitch Deck PresentationConnect Wave/ connectwave Pitch Deck Presentation
Connect Wave/ connectwave Pitch Deck PresentationSlibray Presentation
 
Search Engine Optimization SEO PDF for 2024.pdf
Search Engine Optimization SEO PDF for 2024.pdfSearch Engine Optimization SEO PDF for 2024.pdf
Search Engine Optimization SEO PDF for 2024.pdfRankYa
 
Vertex AI Gemini Prompt Engineering Tips
Vertex AI Gemini Prompt Engineering TipsVertex AI Gemini Prompt Engineering Tips
Vertex AI Gemini Prompt Engineering TipsMiki Katsuragi
 
CloudStudio User manual (basic edition):
CloudStudio User manual (basic edition):CloudStudio User manual (basic edition):
CloudStudio User manual (basic edition):comworks
 
Streamlining Python Development: A Guide to a Modern Project Setup
Streamlining Python Development: A Guide to a Modern Project SetupStreamlining Python Development: A Guide to a Modern Project Setup
Streamlining Python Development: A Guide to a Modern Project SetupFlorian Wilhelm
 
DevoxxFR 2024 Reproducible Builds with Apache Maven
DevoxxFR 2024 Reproducible Builds with Apache MavenDevoxxFR 2024 Reproducible Builds with Apache Maven
DevoxxFR 2024 Reproducible Builds with Apache MavenHervé Boutemy
 
AI as an Interface for Commercial Buildings
AI as an Interface for Commercial BuildingsAI as an Interface for Commercial Buildings
AI as an Interface for Commercial BuildingsMemoori
 
Powerpoint exploring the locations used in television show Time Clash
Powerpoint exploring the locations used in television show Time ClashPowerpoint exploring the locations used in television show Time Clash
Powerpoint exploring the locations used in television show Time Clashcharlottematthew16
 
Vector Databases 101 - An introduction to the world of Vector Databases
Vector Databases 101 - An introduction to the world of Vector DatabasesVector Databases 101 - An introduction to the world of Vector Databases
Vector Databases 101 - An introduction to the world of Vector DatabasesZilliz
 
"Debugging python applications inside k8s environment", Andrii Soldatenko
"Debugging python applications inside k8s environment", Andrii Soldatenko"Debugging python applications inside k8s environment", Andrii Soldatenko
"Debugging python applications inside k8s environment", Andrii SoldatenkoFwdays
 
Human Factors of XR: Using Human Factors to Design XR Systems
Human Factors of XR: Using Human Factors to Design XR SystemsHuman Factors of XR: Using Human Factors to Design XR Systems
Human Factors of XR: Using Human Factors to Design XR SystemsMark Billinghurst
 
My Hashitalk Indonesia April 2024 Presentation
My Hashitalk Indonesia April 2024 PresentationMy Hashitalk Indonesia April 2024 Presentation
My Hashitalk Indonesia April 2024 PresentationRidwan Fadjar
 
Commit 2024 - Secret Management made easy
Commit 2024 - Secret Management made easyCommit 2024 - Secret Management made easy
Commit 2024 - Secret Management made easyAlfredo García Lavilla
 
Story boards and shot lists for my a level piece
Story boards and shot lists for my a level pieceStory boards and shot lists for my a level piece
Story boards and shot lists for my a level piececharlottematthew16
 
SAP Build Work Zone - Overview L2-L3.pptx
SAP Build Work Zone - Overview L2-L3.pptxSAP Build Work Zone - Overview L2-L3.pptx
SAP Build Work Zone - Overview L2-L3.pptxNavinnSomaal
 
WordPress Websites for Engineers: Elevate Your Brand
WordPress Websites for Engineers: Elevate Your BrandWordPress Websites for Engineers: Elevate Your Brand
WordPress Websites for Engineers: Elevate Your Brandgvaughan
 
Beyond Boundaries: Leveraging No-Code Solutions for Industry Innovation
Beyond Boundaries: Leveraging No-Code Solutions for Industry InnovationBeyond Boundaries: Leveraging No-Code Solutions for Industry Innovation
Beyond Boundaries: Leveraging No-Code Solutions for Industry InnovationSafe Software
 

Recently uploaded (20)

"ML in Production",Oleksandr Bagan
"ML in Production",Oleksandr Bagan"ML in Production",Oleksandr Bagan
"ML in Production",Oleksandr Bagan
 
DevEX - reference for building teams, processes, and platforms
DevEX - reference for building teams, processes, and platformsDevEX - reference for building teams, processes, and platforms
DevEX - reference for building teams, processes, and platforms
 
Ensuring Technical Readiness For Copilot in Microsoft 365
Ensuring Technical Readiness For Copilot in Microsoft 365Ensuring Technical Readiness For Copilot in Microsoft 365
Ensuring Technical Readiness For Copilot in Microsoft 365
 
Connect Wave/ connectwave Pitch Deck Presentation
Connect Wave/ connectwave Pitch Deck PresentationConnect Wave/ connectwave Pitch Deck Presentation
Connect Wave/ connectwave Pitch Deck Presentation
 
Search Engine Optimization SEO PDF for 2024.pdf
Search Engine Optimization SEO PDF for 2024.pdfSearch Engine Optimization SEO PDF for 2024.pdf
Search Engine Optimization SEO PDF for 2024.pdf
 
Vertex AI Gemini Prompt Engineering Tips
Vertex AI Gemini Prompt Engineering TipsVertex AI Gemini Prompt Engineering Tips
Vertex AI Gemini Prompt Engineering Tips
 
CloudStudio User manual (basic edition):
CloudStudio User manual (basic edition):CloudStudio User manual (basic edition):
CloudStudio User manual (basic edition):
 
Streamlining Python Development: A Guide to a Modern Project Setup
Streamlining Python Development: A Guide to a Modern Project SetupStreamlining Python Development: A Guide to a Modern Project Setup
Streamlining Python Development: A Guide to a Modern Project Setup
 
DevoxxFR 2024 Reproducible Builds with Apache Maven
DevoxxFR 2024 Reproducible Builds with Apache MavenDevoxxFR 2024 Reproducible Builds with Apache Maven
DevoxxFR 2024 Reproducible Builds with Apache Maven
 
AI as an Interface for Commercial Buildings
AI as an Interface for Commercial BuildingsAI as an Interface for Commercial Buildings
AI as an Interface for Commercial Buildings
 
Powerpoint exploring the locations used in television show Time Clash
Powerpoint exploring the locations used in television show Time ClashPowerpoint exploring the locations used in television show Time Clash
Powerpoint exploring the locations used in television show Time Clash
 
Vector Databases 101 - An introduction to the world of Vector Databases
Vector Databases 101 - An introduction to the world of Vector DatabasesVector Databases 101 - An introduction to the world of Vector Databases
Vector Databases 101 - An introduction to the world of Vector Databases
 
"Debugging python applications inside k8s environment", Andrii Soldatenko
"Debugging python applications inside k8s environment", Andrii Soldatenko"Debugging python applications inside k8s environment", Andrii Soldatenko
"Debugging python applications inside k8s environment", Andrii Soldatenko
 
Human Factors of XR: Using Human Factors to Design XR Systems
Human Factors of XR: Using Human Factors to Design XR SystemsHuman Factors of XR: Using Human Factors to Design XR Systems
Human Factors of XR: Using Human Factors to Design XR Systems
 
My Hashitalk Indonesia April 2024 Presentation
My Hashitalk Indonesia April 2024 PresentationMy Hashitalk Indonesia April 2024 Presentation
My Hashitalk Indonesia April 2024 Presentation
 
Commit 2024 - Secret Management made easy
Commit 2024 - Secret Management made easyCommit 2024 - Secret Management made easy
Commit 2024 - Secret Management made easy
 
Story boards and shot lists for my a level piece
Story boards and shot lists for my a level pieceStory boards and shot lists for my a level piece
Story boards and shot lists for my a level piece
 
SAP Build Work Zone - Overview L2-L3.pptx
SAP Build Work Zone - Overview L2-L3.pptxSAP Build Work Zone - Overview L2-L3.pptx
SAP Build Work Zone - Overview L2-L3.pptx
 
WordPress Websites for Engineers: Elevate Your Brand
WordPress Websites for Engineers: Elevate Your BrandWordPress Websites for Engineers: Elevate Your Brand
WordPress Websites for Engineers: Elevate Your Brand
 
Beyond Boundaries: Leveraging No-Code Solutions for Industry Innovation
Beyond Boundaries: Leveraging No-Code Solutions for Industry InnovationBeyond Boundaries: Leveraging No-Code Solutions for Industry Innovation
Beyond Boundaries: Leveraging No-Code Solutions for Industry Innovation
 

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