How to Get Your First Child Theme Off The Ground

Click here to load reader

  • date post

    27-Jan-2015
  • Category

    Technology

  • view

    113
  • download

    3

Embed Size (px)

description

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: http://codex.wordpress.org/Child_Themes) 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 http://bit.ly/wcmcr1 15. @rhyswynne - @winwaruk #wcmcr On wp-admin. 16. @rhyswynne - @winwaruk #wcmcr Butnothings changed! 17. @rhyswynne - @winwaruk #wcmcr Make Changes to style.css http://bit.ly/wcmcr20142 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. http://bit.ly/wcmcr20143 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. http://bit.ly/wcmcrfun 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. http://bit.ly/wcmcrfun 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. @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?