WordCamp LAX 2013: Child Themes

Learn how to customize an existing theme using a few documents, some CSS, and maybe a little PHP to create a custom-looking website without having to start from scratch. This session is aimed at advanced beginner to intermediate users: people who use CSS but don’t code (or don’t do a lot of coding but know the basics).

Transcript

1. WHAT IS A CHILD THEME & how / why should I use one? Sunday, September 22, 13
2. HI, I’M SARAH WEFALD • Front end web developer / digital marketing specialist. I’m a geek who works with musicians, and a musician who geeks. • 10 years in the music industry, using WordPress since 2007. • @sarahwefald, meetup.com/ocwpwd • Loves books, unicorns. Sunday, September 22, 13
3. WHAT IS A THEME? A collection of files that controls what your WordPress website will look like. Sunday, September 22, 13
4. WHAT IS A CHILD THEME? A theme that takes the functionality of another theme while allowing you to make changes. When the parent theme is updated, your changes are preserved. Sunday, September 22, 13
5. THINGS YOU WILL NEED • A parent theme • Twenty Twelve, Twenty Thirteen, etc. • WooThemes, Genesis, something from a marketplace like Themeforest • Working knowledge of CSS and some bonus PHP Sunday, September 22, 13
6. WHY USE A CHILD THEME? Security Sunday, September 22, 13
7. WHY USE A CHILD THEME? Updates and development time Sunday, September 22, 13
8. WHY USE A CHILD THEME? Training wheels Sunday, September 22, 13
9. IS IT HARD TO MAKE A CHILD THEME? • If you’re not code-minded, it might be tricky. However, because it’s a best practice of WordPress development, the process is extremely well documented in the codex • codex.wordpress.org/ Child_Themes Sunday, September 22, 13
10. DOWNSIDES OF CHILD THEMES • It can take some trial-and- error to get the results you want until you get to know the parent theme • In case of CSS issues, review this article on CSS specificity: http://css- tricks.com/specifics-on-css- specificity/ Sunday, September 22, 13
11. HOW TO MAKE ONE Some technical stuff required Sunday, September 22, 13
12. FUNCTIONS.PHP A bit more technical Sunday, September 22, 13
13. FUNCTIONS • A child theme’s functions.php file is loaded before the parent theme’s functions.php • This allows you to modify functions in the parent theme by defining them in the child theme functions.php Sunday, September 22, 13
14. EXAMPLE: FUNCTION IN CHILD THEME FUNCTION.PHP Sunday, September 22, 13
15. BEFORE & AFTER Parent theme default Child theme modification Sunday, September 22, 13
16. CUSTOMIZE YOUR WEBSITE WITH TEMPLATES Sunday, September 22, 13
17. PAGE TEMPLATES • Templates are PHP files that define what information displays on your site and where • They call theme and WordPress core functions to do things • Use them to add widgeted areas, sidebars, and other modifications to the parent theme Sunday, September 22, 13
18. HOW TO CREATE A PAGE TEMPLATE • Create a PHP file with a Template Name. This name will appear in the drop-down list to select a page template when creating or editing a page in the WordPress dashboard • Include PHP and HTML as needed • Templates in the child theme override templates in the parent Sunday, September 22, 13
19. A PRACTICAL EXAMPLE I’m not sayin’, I’m just sayin’ Sunday, September 22, 13
20. OH, $&#% “How f&$%ed am I?” Sunday, September 22, 13
21. “But will I lose my customizations?” THEME UPGRADE TIME Sunday, September 22, 13
22. WITH CUSTOMIZATIONS Sunday, September 22, 13
23. WITHOUT CUSTOMIZATIONS Sunday, September 22, 13
24. Sunday, September 22, 13
25. Sunday, September 22, 13