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

Twenty Thirteen and Child Themes

Twenty Thirteen and Child Themes

If you are new to theme development and want to learn more, this session is for you. This session will cover how to properly customize the default WordPress theme, Twenty Thirteen, or any parent theme, by creating a child theme. I will also cover utilizing Post Formats and show you how to add new widget areas and menus by modifying the functions.php file.

6224f65dc0d9288ca4c9817d993d8ca4?s=128

Suzette Franck

April 27, 2013
Tweet

Transcript

  1. Twenty Thirteen and Modifying with Child Themes Suzette Franck 2013

    Reno WordCamp April 27, 2013 Media Temple // 8520 National Blvd. Culver City, CA 90232 / 877-578-4000 / mediatemple.net / @mt_Suzette © 2013 (mt) Media Temple
  2. 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 Suzette Franck ★(mt) Media Temple WordPress Evangelist ★18+ Years Coding & Web Development ★Regular Speaker: WordCamps & Meetups ★Reg. Contributor on WPwatercooler.com ★Blog frequently at: suzettefranck.com ★Twitter: @mt_Suzette ★Slides: speakerdeck.com/suzettefranck
  4. 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 ★Theme Basics ★Modifying Themes w/Child Themes ★Fun with functions.php ★Theme Development Resources
  5. Media Temple // 8520 National Blvd. Culver City, CA 90232

    / 877-578-4000 / mediatemple.net / @mt_Suzette © 2013 (mt) Media Temple Twenty Thirteen
  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 ★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 ★Available now on WordPress.com
  9. 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
  10. 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/
  11. 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/
  12. Media Temple // 8520 National Blvd. Culver City, CA 90232

    / 877-578-4000 / mediatemple.net / @mt_Suzette © 2013 (mt) Media Temple Theme Basics
  13. Media Temple // 8520 National Blvd. Culver City, CA 90232

    / 877-578-4000 / mediatemple.net / @mt_Suzette © 2013 (mt) Media Temple Theme Directory Structure
  14. Media Temple // 8520 National Blvd. Culver City, CA 90232

    / 877-578-4000 / mediatemple.net / @mt_Suzette © 2013 (mt) Media Temple Twenty Thirteen Anatomy
  15. 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
  16. 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
  17. 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
  18. 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
  19. Media Temple // 8520 National Blvd. Culver City, CA 90232

    / 877-578-4000 / mediatemple.net / @mt_Suzette © 2013 (mt) Media Temple Modifying Themes
  20. 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
  21. Media Temple // 8520 National Blvd. Culver City, CA 90232

    / 877-578-4000 / mediatemple.net / @mt_Suzette © 2013 (mt) Media Temple Jetpack Edit CSS
  22. 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
  23. 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
  24. 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
  25. 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
  26. 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
  27. 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
  28. 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/
  29. Media Temple // 8520 National Blvd. Culver City, CA 90232

    / 877-578-4000 / mediatemple.net / @mt_Suzette © 2013 (mt) Media Temple Fun With functions.php
  30. Media Temple // 8520 National Blvd. Culver City, CA 90232

    / 877-578-4000 / mediatemple.net / @mt_Suzette © 2013 (mt) Media Temple functions.php ★Set defaults for featured images ★Explains theme specific functions ★Add widget areas ★Add more menus
  31. 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
  32. Media Temple // 8520 National Blvd. Culver City, CA 90232

    / 877-578-4000 / mediatemple.net / @mt_Suzette © 2013 (mt) Media Temple Adding More Widget Areas
  33. 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 header.php
  34. 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, rename
  35. Media Temple // 8520 National Blvd. Culver City, CA 90232

    / 877-578-4000 / mediatemple.net / @mt_Suzette © 2013 (mt) Media Temple Add Social Web Links Widget Social Web Links by Nischal Maniar http://wordpress.org/extend/plugins/social-web-links/ More: http://webtrainingwheels.com/alternatives-social-media-widget-plugin/
  36. Media Temple // 8520 National Blvd. Culver City, CA 90232

    / 877-578-4000 / mediatemple.net / @mt_Suzette © 2013 (mt) Media Temple Inspect Output and CSS Point to area to examine CSS
  37. Media Temple // 8520 National Blvd. Culver City, CA 90232

    / 877-578-4000 / mediatemple.net / @mt_Suzette © 2013 (mt) Media Temple Add Some Style
  38. Media Temple // 8520 National Blvd. Culver City, CA 90232

    / 877-578-4000 / mediatemple.net / @mt_Suzette © 2013 (mt) Media Temple View page, make further tweaks to CSS
  39. Media Temple // 8520 National Blvd. Culver City, CA 90232

    / 877-578-4000 / mediatemple.net / @mt_Suzette © 2013 (mt) Media Temple Adding More Menu Areas
  40. Media Temple // 8520 National Blvd. Culver City, CA 90232

    / 877-578-4000 / mediatemple.net / @mt_Suzette © 2013 (mt) Media Temple Register New Menu ★Add to bottom of functions.php
  41. 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
  42. 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 (Usually: page.php, header.php or footer.php)
  43. Media Temple // 8520 National Blvd. Culver City, CA 90232

    / 877-578-4000 / mediatemple.net / @mt_Suzette © 2013 (mt) Media Temple Inspect Output and CSS
  44. 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
  45. Media Temple // 8520 National Blvd. Culver City, CA 90232

    / 877-578-4000 / mediatemple.net / @mt_Suzette © 2013 (mt) Media Temple Inspect Output and CSS
  46. Media Temple // 8520 National Blvd. Culver City, CA 90232

    / 877-578-4000 / mediatemple.net / @mt_Suzette © 2013 (mt) Media Temple Menu and Sidebar Review ★ 1) Add code to functions.php to create menu or sidebar ★ 2) Add menu or widget in WordPress Admin area ★ 3) Add code to display in template file ★ 4) Inspect output and examine CSS ★ 5) Add some style
  47. Media Temple // 8520 National Blvd. Culver City, CA 90232

    / 877-578-4000 / mediatemple.net / @mt_Suzette © 2013 (mt) Media Temple Theme Development Resources
  48. 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 Article ★Starter Theme: Underscores ★Default Theme History: wplift ★Theme Development Tutorials: wptuts ★Theme Articles: Smashing Magazine ★Codex: Child Themes & Theme Development
  49. Media Temple // 8520 National Blvd. Culver City, CA 90232

    / 877-578-4000 / mediatemple.net / @mt_Suzette © 2013 (mt) Media Temple CSS-Tricks.com by Chris Coyier http://css-tricks.com
  50. Media Temple // 8520 National Blvd. Culver City, CA 90232

    / 877-578-4000 / mediatemple.net / @mt_Suzette © 2013 (mt) Media Temple ThemeShaper Article by Michelle Langston http://themeshaper.com/2012/10/22/the-themeshaper-wordpress-theme-tutorial-2nd-edition/
  51. Media Temple // 8520 National Blvd. Culver City, CA 90232

    / 877-578-4000 / mediatemple.net / @mt_Suzette © 2013 (mt) Media Temple Underscores or _s http://underscores.me
  52. Media Temple // 8520 National Blvd. Culver City, CA 90232

    / 877-578-4000 / mediatemple.net / @mt_Suzette © 2013 (mt) Media Temple History of Default WordPress Themes http://wplift.com/a-history-of-default-wordpress-themes
  53. Media Temple // 8520 National Blvd. Culver City, CA 90232

    / 877-578-4000 / mediatemple.net / @mt_Suzette © 2013 (mt) Media Temple wptuts - WordPress Theme Development http://wp.tutsplus.com/tutorials/wordpress-theme-development-training-wheels-day-one/
  54. Media Temple // 8520 National Blvd. Culver City, CA 90232

    / 877-578-4000 / mediatemple.net / @mt_Suzette © 2013 (mt) Media Temple Smashing Magazine http://wp.smashingmagazine.com/tag/themes/
  55. Media Temple // 8520 National Blvd. Culver City, CA 90232

    / 877-578-4000 / mediatemple.net / @mt_Suzette © 2013 (mt) Media Temple WordPress Codex http://codex.wordpress.org/Theme_Development
  56. Media Temple // 8520 National Blvd. Culver City, CA 90232

    / 877-578-4000 / mediatemple.net / @mt_Suzette © 2013 (mt) Media Temple Thank you for being here!
  57. 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 https://speakerdeck.com/suzettefranck @mt_Suzette
  58. 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