How to Get Your First Child Theme Off The Ground

Click here to load reader

  • date post

  • Category


  • view

  • download


Embed Size (px)


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

Transcript of How to Get Your First Child Theme Off The Ground

  • 1. @rhyswynne - @winwaruk #wcmcr How To Get Your First Child Theme Off The Ground WordCamp Manchester 2014 #wcmcr

2. @rhyswynne - @winwaruk #wcmcr Hello! Im Rhys 3. @rhyswynne - @winwaruk #wcmcr 4. @rhyswynne - @winwaruk #wcmcr 5. @rhyswynne - @winwaruk #wcmcr 6. @rhyswynne - @winwaruk #wcmcr A WordPress child theme is a theme that inherits the functionality of another (parent) theme (source: 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. @rhyswynne - @winwaruk #wcmcr Child Themes look the same as the parent! 9. @rhyswynne - @winwaruk #wcmcr 10. @rhyswynne - @winwaruk #wcmcr Other Minor Issues Because youre 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. @rhyswynne - @winwaruk #wcmcr How? 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. @rhyswynne - @winwaruk #wcmcr Add style.css Within your new folder (in our example twentythirteen-child add a file entitled style.css) 14. @rhyswynne - @winwaruk #wcmcr Style.css Contents 15. @rhyswynne - @winwaruk #wcmcr On wp-admin. 16. @rhyswynne - @winwaruk #wcmcr Butnothings changed! 17. @rhyswynne - @winwaruk #wcmcr Make Changes to style.css 18. @rhyswynne - @winwaruk #wcmcr Red Text! 19. @rhyswynne - @winwaruk #wcmcr Changing template files Copy the page.php file from twentythirteen folder to twentythirteen-child. 20. @rhyswynne - @winwaruk #wcmcr On page.php Make changes to the file so you know its different. 21. @rhyswynne - @winwaruk #wcmcr Going to a page. 22. @rhyswynne - @winwaruk #wcmcr Functions.php The child themes functions.php is loaded as well as the parent functions.php. Name functions with a prefix i.e. twentythirteen_child_function() 23. @rhyswynne - @winwaruk #wcmcr Actions/Filters Use the after_setup_theme action to remove actions/filters from the parent theme. 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) - Thematic - Paid (Good for those familiar with HTML & CSS) Genesis - Peadig - 25. @rhyswynne - @winwaruk #wcmcr Thank You! My Site Twitter Facebook These Slides & Notes Questions?