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.

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
   

   View Slide

2. Media Temple // 8520 National Blvd. Culver City, CA 90232 / 877-578-4000 / mediatemple.net / @mt_Suzette © 2013 (mt) Media Temple
   Who Am I?
   

   View Slide

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
   

   View Slide

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
   

   View Slide

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

   View Slide

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
   

   View Slide

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
   

   View Slide

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
   

   View Slide

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
   

   View Slide

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/
    

    View Slide

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/
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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

    View Slide

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
    

    View Slide

21. Media Temple // 8520 National Blvd. Culver City, CA 90232 / 877-578-4000 / mediatemple.net / @mt_Suzette © 2013 (mt) Media Temple
    Jetpack Edit CSS
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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/
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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/
    

    View Slide

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
    

    View Slide

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

    View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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)
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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

    View Slide

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
    

    View Slide

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
    

    View Slide

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/
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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/
    

    View Slide

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/
    

    View Slide

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
    

    View Slide

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!
    

    View Slide

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
    

    View Slide

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
    

    View Slide