how to get your first child theme off the ground
DESCRIPTION
A guide on how to get your first Child Theme off the Ground from WordCamp Manchester (#wcmcr) 2014.TRANSCRIPT
@rhyswynne - @winwaruk #wcmcr
How To Get Your First Child Theme Off The Ground
WordCamp Manchester 2014 #wcmcr
@rhyswynne - @winwaruk #wcmcr
Hello! I’m Rhys
@rhyswynne - @winwaruk #wcmcr
@rhyswynne - @winwaruk #wcmcr
@rhyswynne - @winwaruk #wcmcr
@rhyswynne - @winwaruk #wcmcr
A WordPress child theme is a theme that inherits the functionality of
another (parent) theme(source: http://codex.wordpress.org/Child_Themes)
@rhyswynne - @winwaruk #wcmcr
Why Use A Child Theme?
• Safe: Make changes to themes without having changes overwritten.
• Quick: Speeds up developmental time – functionality has already been written.
• Easy: If you are new to development, this is a great way to learn.
@rhyswynne - @winwaruk #wcmcr
“Child Themes look the same as the parent!”
@rhyswynne - @winwaruk #wcmcr
@rhyswynne - @winwaruk #wcmcr
Other Minor Issues
• Because you’re loading 2 themes instead of one, you can have an impact on performance.– Very minimal in most cases, and caching can
stop these issues.
• Can increase complexity if parent theme is complex.– Good examples of good starting parent themes
are given at the end of the presentation.
@rhyswynne - @winwaruk #wcmcr
How?
@rhyswynne - @winwaruk #wcmcr
Create Folder For Your Theme
In the wp-contents/theme folder, add a new folder with name of your theme:-
Good practice states that youname the theme with the suffix“-child”, of the parent theme.
@rhyswynne - @winwaruk #wcmcr
Add style.css
• Within your new folder (in our example – twentythirteen-child – add a file entitled style.css)
@rhyswynne - @winwaruk #wcmcr
On wp-admin….
@rhyswynne - @winwaruk #wcmcr
But…nothing’s changed!
@rhyswynne - @winwaruk #wcmcr
Make Changes to style.css
http://bit.ly/wcmcr20142
@rhyswynne - @winwaruk #wcmcr
Red Text!
@rhyswynne - @winwaruk #wcmcr
Changing template files
• Copy the page.php file from twentythirteen folder to twentythirteen-child.
@rhyswynne - @winwaruk #wcmcr
On page.php
• Make changes to the file so you know it’s different….
http://bit.ly/wcmcr20143
@rhyswynne - @winwaruk #wcmcr
Going to a page….
@rhyswynne - @winwaruk #wcmcr
Functions.php
• The child theme’s functions.php is loaded as well as the parent functions.php.
http://bit.ly/wcmcrfun
• Name functions with a prefix i.e. twentythirteen_child_function()
@rhyswynne - @winwaruk #wcmcr
Actions/Filters
• Use the after_setup_theme action to remove actions/filters from the parent theme.
http://bit.ly/wcmcrfun
@rhyswynne - @winwaruk #wcmcr
Good Themes To Use as Parent Themes
Free (Good for Beginners)• Twenty Eleven, Twenty Twelve, Twenty Thirteen (included in
WordPress)• Underscores (_s) - http://underscores.me/ • Thematic - http://themeshaper.com/thematic/
Paid (Good for those familiar with HTML & CSS)• Genesis - http://www.studiopress.com/• Peadig - http://peadig.com/
@rhyswynne - @winwaruk #wcmcr
Thank You!My Sitehttp://winwar.co.uk/
Twitterhttp://twitter.com/rhyswynnehttp://twitter.com/winwaruk
Facebookhttp://facebook.com/winwaruk
These Slides & Noteshttp://bit.ly/wcmcrtalk1
Questions?