Twenty Thirteen and Child Themes

Preview of the upcoming default theme for WordPress and how to make modifications using Child Themes. I also show you how to add additional widget areas and menus to your child theme via the functions.php file.

Transcript

1. Customizing Twenty Thirteen and Using Child Themes Suzette Franck 2013 Miami WordCamp April 6, 2013 Media Temple // 8520 National Blvd. Culver City, CA 90232 / 877-578-4000 / mediatemple.net / @mt_Suzette © 2013 (mt) Media Temple
2. • Suzette Franck • WordPress Evangelist Lead at Media Temple • 18+ Years Web Development & Coding • Twitter: @mt_Suzette • Slides: https://speakerdeck.com/suzettefranck Media Temple // 8520 National Blvd. Culver City, CA 90232 / 877-578-4000 / mediatemple.net / @mt_Suzette © 2013 (mt) Media Temple Who Am I?
3. Media Temple // 8520 National Blvd. Culver City, CA 90232 / 877-578-4000 / mediatemple.net / @mt_Suzette © 2013 (mt) Media Temple What We Will Cover ★Twenty Thirteen Overview ★Twenty Thirteen Demo ★Theme Basics ★Modifying Twenty Thirteen ★Child Theme ★Fun with functions.php ★Theme Development Resources
4. Media Temple // 8520 National Blvd. Culver City, CA 90232 / 877-578-4000 / mediatemple.net / @mt_Suzette © 2013 (mt) Media Temple Twenty Thirteen ★Beautiful Implementation of Post Formats ★“Back to the blog” ★WordPress 3.6 Needed ★Takes advantage of Google web fonts ★End of April Release with WordPress 3.6
5. Media Temple // 8520 National Blvd. Culver City, CA 90232 / 877-578-4000 / mediatemple.net / @mt_Suzette © 2013 (mt) Media Temple Twenty Thirteen Post Formats ★Standard ★Image ★Gallery ★Link ★Video ★Audio ★Chat ★Status ★Quote ★Aside
6. Media Temple // 8520 National Blvd. Culver City, CA 90232 / 877-578-4000 / mediatemple.net / @mt_Suzette © 2013 (mt) Media Temple Why Default Themes Rock ★Latest and greatest coding ★Community tested ★Designed to run fast ★Best compatibility with plugins ★Responsive, looks good on mobile
7. Media Temple // 8520 National Blvd. Culver City, CA 90232 / 877-578-4000 / mediatemple.net / @mt_Suzette © 2013 (mt) Media Temple Twenty Thirteen Team ★Directed by Matt Mullenweg ★Designed by Joen Asmussen ★Theme Wrangler Konstantin Obenland ★Project Lead Lance Willett
8. Media Temple // 8520 National Blvd. Culver City, CA 90232 / 877-578-4000 / mediatemple.net / @mt_Suzette © 2013 (mt) Media Temple Twenty Thirteen Team ★Directed by Matt Mullenweg ★Designed by Joen Asmussen ★Theme Wrangler Konstantin Obenland ★Project Lead Lance Willett
9. Media Temple // 8520 National Blvd. Culver City, CA 90232 / 877-578-4000 / mediatemple.net / @mt_Suzette © 2013 (mt) Media Temple Twenty Thirteen Preview ★http://twentythirteendemo.wordpress.com/
10. Media Temple // 8520 National Blvd. Culver City, CA 90232 / 877-578-4000 / mediatemple.net / @mt_Suzette © 2013 (mt) Media Temple Twenty Thirteen Girlie Child Theme ★https://github.com/mtsuzette/
11. Media Temple // 8520 National Blvd. Culver City, CA 90232 / 877-578-4000 / mediatemple.net / @mt_Suzette © 2013 (mt) Media Temple Theme Basics
12. Media Temple // 8520 National Blvd. Culver City, CA 90232 / 877-578-4000 / mediatemple.net / @mt_Suzette © 2013 (mt) Media Temple Theme Directory Structure
13. Media Temple // 8520 National Blvd. Culver City, CA 90232 / 877-578-4000 / mediatemple.net / @mt_Suzette © 2013 (mt) Media Temple Twenty Thirteen Anatomy
14. Media Temple // 8520 National Blvd. Culver City, CA 90232 / 877-578-4000 / mediatemple.net / @mt_Suzette © 2013 (mt) Media Temple style.css (required) ★Defines CSS declarations for theme ★Contains required header comment
15. Media Temple // 8520 National Blvd. Culver City, CA 90232 / 877-578-4000 / mediatemple.net / @mt_Suzette © 2013 (mt) Media Temple functions.php (optional) ★Add functions to theme using PHP
16. Media Temple // 8520 National Blvd. Culver City, CA 90232 / 877-578-4000 / mediatemple.net / @mt_Suzette © 2013 (mt) Media Temple Template files (optional) ★Displays content according to template hierarchy ★Contains HTML & PHP
17. Media Temple // 8520 National Blvd. Culver City, CA 90232 / 877-578-4000 / mediatemple.net / @mt_Suzette © 2013 (mt) Media Temple Template Hierarchy ★http://wp.tutsplus.com/articles/wordpress-cheat-sheets-template-heirarchy-map/ Also see: http://codex.wordpress.org/Template_Hierarchy
18. Media Temple // 8520 National Blvd. Culver City, CA 90232 / 877-578-4000 / mediatemple.net / @mt_Suzette © 2013 (mt) Media Temple Modifying Twenty Thirteen
19. Media Temple // 8520 National Blvd. Culver City, CA 90232 / 877-578-4000 / mediatemple.net / @mt_Suzette © 2013 (mt) Media Temple Twenty Thirteen Modifications ★Upload new header 1600x230 pixels ★Customize header link color ★Main widget area (footer) ★Secondary widget area (sidebar) ★No background customization ★Use Custom CSS feature in Jetpack ★Create a Child Theme
20. Media Temple // 8520 National Blvd. Culver City, CA 90232 / 877-578-4000 / mediatemple.net / @mt_Suzette © 2013 (mt) Media Temple Jetpack Edit CSS
21. Media Temple // 8520 National Blvd. Culver City, CA 90232 / 877-578-4000 / mediatemple.net / @mt_Suzette © 2013 (mt) Media Temple Child Themes ★http://codex.wordpress.org/Child_Themes
22. Media Temple // 8520 National Blvd. Culver City, CA 90232 / 877-578-4000 / mediatemple.net / @mt_Suzette © 2013 (mt) Media Temple What Is A Child Theme? ★Safely make modifications to parent theme ★Preserves upgradability of parent theme
23. Media Temple // 8520 National Blvd. Culver City, CA 90232 / 877-578-4000 / mediatemple.net / @mt_Suzette © 2013 (mt) Media Temple 5 Steps to Create A Child Theme ★In Filezilla, create new folder under wp-content/themes/ ★Name should be parent name-child: wp-content/themes/twentythirteen-child/ ★Create plain text file with required header named: style.css ★Create an empty plain text file named: functions.php ★Optional: 600x450 screenshot.png
24. Media Temple // 8520 National Blvd. Culver City, CA 90232 / 877-578-4000 / mediatemple.net / @mt_Suzette © 2013 (mt) Media Temple style.css Required Header ★Replaces style.css of parent theme ★import parent theme style.css or not
25. Media Temple // 8520 National Blvd. Culver City, CA 90232 / 877-578-4000 / mediatemple.net / @mt_Suzette © 2013 (mt) Media Temple functions.php for Child Themes ★Appends functions.php to parent theme ★Loaded before parent’s functions.php
26. Media Temple // 8520 National Blvd. Culver City, CA 90232 / 877-578-4000 / mediatemple.net / @mt_Suzette © 2013 (mt) Media Temple Template files for Child Themes ★replaces parent theme file of same name
27. Media Temple // 8520 National Blvd. Culver City, CA 90232 / 877-578-4000 / mediatemple.net / @mt_Suzette © 2013 (mt) Media Temple Lazy Way to Create a Child Theme http://wordpress.org/extend/plugins/one-click-child-theme/
28. Media Temple // 8520 National Blvd. Culver City, CA 90232 / 877-578-4000 / mediatemple.net / @mt_Suzette © 2013 (mt) Media Temple Fun With functions.php ★Add widget areas ★Add more menus
29. Media Temple // 8520 National Blvd. Culver City, CA 90232 / 877-578-4000 / mediatemple.net / @mt_Suzette © 2013 (mt) Media Temple Adding More Widget Areas ★Register sidebar in functions.php and add action
30. Media Temple // 8520 National Blvd. Culver City, CA 90232 / 877-578-4000 / mediatemple.net / @mt_Suzette © 2013 (mt) Media Temple Adding More Widget Areas
31. Media Temple // 8520 National Blvd. Culver City, CA 90232 / 877-578-4000 / mediatemple.net / @mt_Suzette © 2013 (mt) Media Temple Add Code To Template File Retrieves sidebar-header.php
32. Media Temple // 8520 National Blvd. Culver City, CA 90232 / 877-578-4000 / mediatemple.net / @mt_Suzette © 2013 (mt) Media Temple Create sidebar-header.php Copy sidebar.php from parent theme
33. Media Temple // 8520 National Blvd. Culver City, CA 90232 / 877-578-4000 / mediatemple.net / @mt_Suzette © 2013 (mt) Media Temple Add Social Media Widget Social Media Widget by Blink Web Effects http://wordpress.org/extend/plugins/social-media-widget/
34. Media Temple // 8520 National Blvd. Culver City, CA 90232 / 877-578-4000 / mediatemple.net / @mt_Suzette © 2013 (mt) Media Temple Examine CSS
35. Media Temple // 8520 National Blvd. Culver City, CA 90232 / 877-578-4000 / mediatemple.net / @mt_Suzette © 2013 (mt) Media Temple Add Some Style
36. Media Temple // 8520 National Blvd. Culver City, CA 90232 / 877-578-4000 / mediatemple.net / @mt_Suzette © 2013 (mt) Media Temple Adding More Menu Areas ★Register New Menus in functions.php
37. Media Temple // 8520 National Blvd. Culver City, CA 90232 / 877-578-4000 / mediatemple.net / @mt_Suzette © 2013 (mt) Media Temple Appearance > Menus ★Create a new menu and specify theme location
38. Media Temple // 8520 National Blvd. Culver City, CA 90232 / 877-578-4000 / mediatemple.net / @mt_Suzette © 2013 (mt) Media Temple Add Menu to Template ★Add code to desired Template (header.php or footer.php)
39. Media Temple // 8520 National Blvd. Culver City, CA 90232 / 877-578-4000 / mediatemple.net / @mt_Suzette © 2013 (mt) Media Temple Add Some Style ★Add styles for the bottom menu
40. Media Temple // 8520 National Blvd. Culver City, CA 90232 / 877-578-4000 / mediatemple.net / @mt_Suzette © 2013 (mt) Media Temple Inspect Output and CSS
41. Media Temple // 8520 National Blvd. Culver City, CA 90232 / 877-578-4000 / mediatemple.net / @mt_Suzette © 2013 (mt) Media Temple Theme Development Resources ★Cris Coyier: CSS-tricks.com ★Michelle Langston: ThemeShaper ★Jake Rocheleau: Honkiat.com ★Codex: Child Themes & Theme Development ★Starter Theme: Underscores ★Default Theme History: wplift ★Theme Development Tutorials: wptuts
42. http://suzettefranck.com/css3-for-beginners/ Media Temple // 8520 National Blvd. Culver City, CA 90232 / 877-578-4000 / mediatemple.net / @mt_Suzette © 2013 (mt) Media Temple Bonus! CSS3 Slides and Demo! Click the Magical WordPress Unicorn
43. Media Temple // 8520 National Blvd. Culver City, CA 90232 / 877-578-4000 / mediatemple.net / @mt_Suzette © 2013 (mt) Media Temple Questions? Suzette Franck sfranck@mediatemple.net @mt_Suzette https://speakerdeck.com/suzettefranck