$30 off During Our Annual Pro Sale. View Details »

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.

Suzette Franck

April 06, 2013
Tweet

More Decks by Suzette Franck

Other Decks in Technology

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

    View Slide

  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?

    View Slide

  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

    View Slide

  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

    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 Post Formats
    ★Standard
    ★Image
    ★Gallery
    ★Link
    ★Video
    ★Audio
    ★Chat
    ★Status
    ★Quote
    ★Aside

    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 Team
    ★Directed by Matt Mullenweg
    ★Designed by Joen Asmussen
    ★Theme Wrangler Konstantin Obenland
    ★Project Lead Lance Willett

    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 Preview
    ★http://twentythirteendemo.wordpress.com/

    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 Girlie Child Theme
    ★https://github.com/mtsuzette/

    View Slide

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

    View Slide

  12. 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

  13. 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

  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

    View Slide

  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

    View Slide

  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

    View Slide

  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

    View Slide

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

    View Slide

  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

    View Slide

  20. 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

  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

    View Slide

  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

    View Slide

  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

    View Slide

  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

    View Slide

  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

    View Slide

  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

    View Slide

  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/

    View Slide

  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

    View Slide

  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

    View Slide

  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

    View Slide

  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

    View Slide

  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

    View Slide

  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/

    View Slide

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

    View Slide

  35. 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

  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

    View Slide

  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

    View Slide

  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)

    View Slide

  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

    View Slide

  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

    View Slide

  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

    View Slide

  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

    View Slide

  43. Media Temple // 8520 National Blvd. Culver City, CA 90232 / 877-578-4000 / mediatemple.net / @mt_Suzette © 2013 (mt) Media Temple
    Questions?
    Suzette Franck
    [email protected]
    @mt_Suzette
    https://speakerdeck.com/suzettefranck

    View Slide