Theming 101

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

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