@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...
@rhyswynne - @winwaruk #wcmcr
Why Use A Child Theme?
• Safe: Make changes to themes without
having changes overwritten.
• ...
@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 ...
@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 ...
@rhyswynne - @winwaruk #wcmcr
Add style.css
• Within your new folder (in our example –
twentythirteen-child – add a file
e...
@rhyswynne - @winwaruk #wcmcr
Style.css Contents
http://bit.ly/wcmcr1
@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
twentythirtee...
@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.ph...
@rhyswynne - @winwaruk #wcmcr
Actions/Filters
• Use the after_setup_theme action to
remove actions/filters from the parent...
@rhyswynne - @winwaruk #wcmcr
Good Themes To Use as Parent
Themes
Free (Good for Beginners)
• Twenty Eleven, Twenty Twelve...
@rhyswynne - @winwaruk #wcmcr
Thank You!
My Site
http://winwar.co.uk/
Twitter
http://twitter.com/rhyswynne
http://twitter....
Upcoming SlideShare
Loading in …5
×

How to Get Your First Child Theme Off The Ground

1,319 views

Published on

A guide on how to get your first Child Theme off the Ground from WordCamp Manchester (#wcmcr) 2014.

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

  • Be the first to like this

No Downloads
Views
Total views
1,319
On SlideShare
0
From Embeds
0
Number of Embeds
256
Actions
Shares
0
Downloads
5
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

How to Get Your First Child Theme Off The Ground

  1. 1. @rhyswynne - @winwaruk #wcmcr How To Get Your First Child Theme Off The Ground WordCamp Manchester 2014 #wcmcr
  2. 2. @rhyswynne - @winwaruk #wcmcr Hello! I’m Rhys
  3. 3. @rhyswynne - @winwaruk #wcmcr
  4. 4. @rhyswynne - @winwaruk #wcmcr
  5. 5. @rhyswynne - @winwaruk #wcmcr
  6. 6. @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)
  7. 7. @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.
  8. 8. @rhyswynne - @winwaruk #wcmcr “Child Themes look the same as the parent!”
  9. 9. @rhyswynne - @winwaruk #wcmcr
  10. 10. @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.
  11. 11. @rhyswynne - @winwaruk #wcmcr How?
  12. 12. @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 you name the theme with the suffix “-child”, of the parent theme.
  13. 13. @rhyswynne - @winwaruk #wcmcr Add style.css • Within your new folder (in our example – twentythirteen-child – add a file entitled style.css)
  14. 14. @rhyswynne - @winwaruk #wcmcr Style.css Contents http://bit.ly/wcmcr1
  15. 15. @rhyswynne - @winwaruk #wcmcr On wp-admin….
  16. 16. @rhyswynne - @winwaruk #wcmcr But…nothing’s changed!
  17. 17. @rhyswynne - @winwaruk #wcmcr Make Changes to style.css http://bit.ly/wcmcr20142
  18. 18. @rhyswynne - @winwaruk #wcmcr Red Text!
  19. 19. @rhyswynne - @winwaruk #wcmcr Changing template files • Copy the page.php file from twentythirteen folder to twentythirteen-child.
  20. 20. @rhyswynne - @winwaruk #wcmcr On page.php • Make changes to the file so you know it’s different…. http://bit.ly/wcmcr20143
  21. 21. @rhyswynne - @winwaruk #wcmcr Going to a page….
  22. 22. @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()
  23. 23. @rhyswynne - @winwaruk #wcmcr Actions/Filters • Use the after_setup_theme action to remove actions/filters from the parent theme. http://bit.ly/wcmcrfun
  24. 24. @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/
  25. 25. @rhyswynne - @winwaruk #wcmcr Thank You! My Site http://winwar.co.uk/ Twitter http://twitter.com/rhyswynne http://twitter.com/winwaruk Facebook http://facebook.com/winwaruk These Slides & Notes http://bit.ly/wcmcrtalk1 Questions?

×