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

Theming 101

Theming 101

An introduction to WordPress theming for complete beginners. Talk given at WordCamp Winnipeg on June 1, 2013.

Matt Wiebe

June 01, 2013
Tweet

More Decks by Matt Wiebe

Other Decks in Technology

Transcript

  1. Theming 101
    Matt Wiebe
    @mattwiebe
    wp.mattwie.be
    Design Engineer
    Automattic / WordPress.com

    View Slide

  2. Theming 101
    ★ What is a theme?
    ★ How do I make a theme?
    ★ How do I make an awesome theme?

    View Slide

  3. What is a Theme?

    View Slide

  4. View Slide

  5. View Slide

  6. View Slide

  7. View Slide

  8. View Slide

  9. View Slide

  10. View Slide

  11. View Slide

  12. View Slide

  13. What is a Theme?
    A WordPress Theme is a collection of files
    that work together to produce a
    graphical interface with an underlying
    unifying design for a weblog. These files
    are called template files.
    — http://codex.wordpress.org/Themes

    View Slide

  14. What is a Theme?
    ★ A directory/folder of files in wp-content/themes

    View Slide

  15. View Slide

  16. View Slide

  17. View Slide

  18. View Slide

  19. What is a Theme?
    ★ A directory/folder of files in wp-content/themes
    ★ Two necessary files
    ★ style.css
    ★ index.php
    ★ the rest make sense as you go

    View Slide

  20. OK, How Do I
    Make a Theme?

    View Slide

  21. style.css
    /*
    Theme Name: Twenty Thirteen
    Theme URI: http://wordpress.org/themes/twentythirteen
    Author: the WordPress team
    Author URI: http://wordpress.org/
    Description: Much longer than this ;)
    Version: 0.1
    License: GNU General Public License v2 or later
    License URI: http://www.gnu.org/licenses/gpl-2.0.html
    Tags: black, brown, ETC
    Text Domain: twentythirteen
    */

    View Slide

  22. style.css
    /*
    Theme Name: Twenty Thirteen
    Theme URI: http://wordpress.org/themes/twentythirteen
    Author: the WordPress team
    Author URI: http://wordpress.org/
    Description: Much longer than this ;)
    Version: 0.1
    License: GNU General Public License v2 or later
    License URI: http://www.gnu.org/licenses/gpl-2.0.html
    Tags: black, brown, ETC
    Text Domain: twentythirteen
    */

    View Slide

  23. style.css
    /*
    Theme Name: Your Awesome Theme Name
    */
    /* Actual CSS for your theme goes below */

    View Slide

  24. index.php
















    View Slide

  25. index.php
















    View Slide

  26. The Loop



    View Slide

  27. The Loop






    View Slide

  28. View Slide

  29. View Slide

  30. View Slide

  31. View Slide

  32. index.php








    View Slide

  33. header.php







    View Slide

  34. footer.php

    View Slide

  35. STILL UGLY

    View Slide

  36. header.php








    View Slide

  37. style.css
    /*
    Theme Name: WordCamp Winnipeg
    */
    body {
    background-color: #333;
    color: #ddd;
    font-family: sans-serif;
    margin: 2em;
    line-height: 1.6;
    }

    View Slide

  38. LESS UGLY

    View Slide

  39. OK, Let's Use
    Those Other Files
    AKA the Template Hierarchy

    View Slide

  40. View Slide

  41. View Slide

  42. View Slide

  43. Template Hierarchy
    ★ Everything falls back to index.php eventually
    ★ Mostly easy to follow
    ★ single.php → Single post
    ★ page.php → Static page
    ★ category.php → Category archive
    ★ http://codex.wordpress.org/Template_Hierarchy

    View Slide



  44. View Slide

  45. functions.php
    ★ Tiny, theme-specific plugin
    ★ Should only have things that are theme-specific
    ★ Telling WordPress what features you support and
    how you support them

    View Slide

  46. functions.php
    ★ add_theme_support()
    ★ post formats, background, header
    ★ http://codex.wordpress.org/add_theme_support

    View Slide

  47. functions.php
    ★ register_sidebar()
    ★ Should be register_widget_area() since not all
    widgets go in actual sidebars
    ★ As many as you want

    View Slide

  48. functions.php
    register_sidebar( array(
    'name' => 'Main Widget Area',
    'id' => 'sidebar-1'
    ) );

    View Slide

  49. index.php







    View Slide

  50. View Slide

  51. functions.php
    register_nav_menu( 'menu', 'Top Navigation Menu' );

    View Slide

  52. header.php







    View Slide

  53. View Slide

  54. OK, That's Still
    Really Ugly

    View Slide

  55. OK, That's Still
    Really Ugly
    Yes, it is.

    View Slide

  56. How Can I Make
    an Awesome
    WordPress Theme?

    View Slide

  57. Learn From the Best
    ★ _s → A starter theme from Automattic

    View Slide

  58. View Slide

  59. Learn From the Best
    ★ _s → A starter theme from Automattic
    ★ Embedded best practices

    View Slide

  60. Learn From the Best
    ★ _s → A starter theme from Automattic
    ★ Embedded best practices
    ★ http://underscores.me/

    View Slide

  61. Learn From the Best
    ★ Make a child theme
    ★ Build on a solid base without starting from scratch
    ★ The Twenty * themes are good for this

    View Slide

  62. Learn From the Best
    ★ Learn how some of the intro stuff I just taught you
    was lacking or just plain bad!

    View Slide

  63. Learn From the Best
    ★ http://codex.wordpress.org/Theme_Development
    ★ http://codex.wordpress.org/Template_Hierarchy
    ★ http://codex.wordpress.org/Template_Tags
    ★ http://codex.wordpress.org/Theme_Review
    ★ http://codepoet.com/
    ★ http://themeshaper.com/

    View Slide

  64. Thanks!
    Matt Wiebe
    @mattwiebe
    wp.mattwie.be
    Design Engineer
    Automattic / WordPress.com

    View Slide