How to Get Your First Child Theme Off The Ground

1,400 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,400
On SlideShare
0
From Embeds
0
Number of Embeds
295
Actions
Shares
0
Downloads
6
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?

×