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
  2. Theming 101 ★ What is a theme? ★ How do

    I make a theme? ★ How do I make an awesome theme?
  3. What is a Theme?

  4. None
  5. None
  6. None
  7. None
  8. None
  9. None
  10. None
  11. None
  12. None
  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
  14. What is a Theme? ★ A directory/folder of files in

    wp-content/themes
  15. None
  16. None
  17. None
  18. None
  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
  20. OK, How Do I Make a Theme?

  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 */
  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 */
  23. style.css /* Theme Name: Your Awesome Theme Name */ /*

    Actual CSS for your theme goes below */
  24. index.php <?php get_header(); ?> <div id="primary" class="content-area"> <div id="content" class="site-content"

    role="main"> <?php if ( have_posts() ) : ?> <?php /* The loop */ ?> <?php while ( have_posts() ) : the_post(); ?> <?php get_template_part( 'content', get_post_format() ); ?> <?php endwhile; ?> <?php twentythirteen_paging_nav(); ?> <?php else : ?> <?php get_template_part( 'content', 'none' ); ?> <?php endif; ?> </div><!-- #content --> </div><!-- #primary --> <?php get_sidebar(); ?> <?php get_footer(); ?>
  25. index.php <?php get_header(); ?> <div id="primary" class="content-area"> <div id="content" class="site-content"

    role="main"> <?php if ( have_posts() ) : ?> <?php /* The loop */ ?> <?php while ( have_posts() ) : the_post(); ?> <?php get_template_part( 'content', get_post_format() ); ?> <?php endwhile; ?> <?php twentythirteen_paging_nav(); ?> <?php else : ?> <?php get_template_part( 'content', 'none' ); ?> <?php endif; ?> </div><!-- #content --> </div><!-- #primary --> <?php get_sidebar(); ?> <?php get_footer(); ?>
  26. The Loop <?php while ( have_posts() ) : the_post(); ?>

    <?php // print out a post's HTML ?> <?php endwhile; ?>
  27. The Loop <?php while ( have_posts() ) : the_post(); ?>

    <article> <h1><?php the_title(); ?></h1> <div><?php the_content(); ?></div> </article> <?php endwhile; ?>
  28. None
  29. None
  30. None
  31. None
  32. index.php <?php get_header(); // loads header.php ?> <?php while (

    have_posts() ) : the_post(); ?> <article> <h1><?php the_title(); ?></h1> <div><?php the_content(); ?></div> </article> <?php endwhile; ?> <?php get_footer(); // loads footer.php ?>
  33. header.php <!DOCTYPE html> <html> <head> <meta charset="<?php bloginfo( 'charset' );

    ?>" /> <?php wp_head(); ?> </head> <body>
  34. footer.php <?php wp_footer(); ?> </body> </html>

  35. STILL UGLY

  36. header.php <!DOCTYPE html> <html> <head> <meta charset="<?php bloginfo( 'charset' );

    ?>" /> <link href="<?php bloginfo( 'stylesheet_url' ) ?>" rel="stylesheet" /> <?php wp_head(); ?> </head> <body>
  37. style.css /* Theme Name: WordCamp Winnipeg */ body { background-color:

    #333; color: #ddd; font-family: sans-serif; margin: 2em; line-height: 1.6; }
  38. LESS UGLY

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

  40. None
  41. None
  42. None
  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
  44. </basics> <lessbasic>

  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
  46. functions.php ★ add_theme_support() ★ post formats, background, header ★ http://codex.wordpress.org/add_theme_support

  47. functions.php ★ register_sidebar() ★ Should be register_widget_area() since not all

    widgets go in actual sidebars ★ As many as you want
  48. functions.php <?php register_sidebar( array( 'name' => 'Main Widget Area', 'id'

    => 'sidebar-1' ) );
  49. index.php <?php get_header(); // loads header.php ?> <?php while (

    have_posts() ) : the_post(); ?> <h1><?php the_title(); ?></h1> <article><?php the_content(); ?></article> <?php endwhile; ?> <?php dynamic_sidebar( 'sidebar-1' ); ?> <?php get_footer(); // loads footer.php ?>
  50. None
  51. functions.php <?php register_nav_menu( 'menu', 'Top Navigation Menu' );

  52. header.php <!DOCTYPE html> <html> <head> <?php wp_head(); ?> </head> <body>

    <?php wp_nav_menu( 'theme_location=menu' ); ?>
  53. None
  54. OK, That's Still Really Ugly

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

  56. How Can I Make an Awesome WordPress Theme?

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

    from Automattic
  58. None
  59. Learn From the Best ★ _s → A starter theme

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

    from Automattic ★ Embedded best practices ★ http://underscores.me/
  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
  62. Learn From the Best ★ Learn how some of the

    intro stuff I just taught you was lacking or just plain bad!
  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/
  64. Thanks! Matt Wiebe @mattwiebe wp.mattwie.be Design Engineer Automattic / WordPress.com