Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Twenty Thirteen and Child Themes

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.

6224f65dc0d9288ca4c9817d993d8ca4?s=128

Suzette Franck

April 06, 2013
Tweet

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