Uploaded on

The slides from Matt Wiebe's Wordcamp presentation on Theming 101

The slides from Matt Wiebe's Wordcamp presentation on Theming 101

More in: Technology , Business
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
2,598
On Slideshare
0
From Embeds
0
Number of Embeds
15

Actions

Shares
Downloads
21
Comments
0
Likes
2

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

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. 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
  • 5. What is a Theme? ★ A directory/folder of files in wp-content/themes
  • 6. 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
  • 7. OK, How Do I Make a Theme?
  • 8. 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 */
  • 9. 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 */
  • 10. style.css /* Theme Name: Your Awesome Theme Name */ /* Actual CSS for your theme goes below */
  • 11. 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(); ?>
  • 12. 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(); ?>
  • 13. The Loop <?php while ( have_posts() ) : the_post(); ?> <?php // print out a post's HTML ?> <?php endwhile; ?>
  • 14. The Loop <?php while ( have_posts() ) : the_post(); ?> <article> <h1><?php the_title(); ?></h1> <div><?php the_content(); ?></div> </article> <?php endwhile; ?>
  • 15. 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 ?>
  • 16. header.php <!DOCTYPE html> <html> <head> <meta charset="<?php bloginfo( 'charset' ); ?>" /> <?php wp_head(); ?> </head> <body>
  • 17. footer.php <?php wp_footer(); ?> </body> </html>
  • 18. STILL UGLY
  • 19. header.php <!DOCTYPE html> <html> <head> <meta charset="<?php bloginfo( 'charset' ); ?>" /> <link href="<?php bloginfo( 'stylesheet_url' ) ?>" rel="stylesheet" /> <?php wp_head(); ?> </head> <body>
  • 20. style.css /* Theme Name: WordCamp Winnipeg */ body { background-color: #333; color: #ddd; font-family: sans-serif; margin: 2em; line-height: 1.6; }
  • 21. LESS UGLY
  • 22. OK, Let's Use Those Other Files AKA the Template Hierarchy
  • 23. 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
  • 24. </basics> <lessbasic>
  • 25. 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
  • 26. functions.php ★ add_theme_support() ★ post formats, background, header ★ http://codex.wordpress.org/add_theme_support
  • 27. functions.php ★ register_sidebar() ★ Should be register_widget_area() since not all widgets go in actual sidebars ★ As many as you want
  • 28. functions.php <?php register_sidebar( array( 'name' => 'Main Widget Area', 'id' => 'sidebar-1' ) );
  • 29. 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 ?>
  • 30. functions.php <?php register_nav_menu( 'menu', 'Top Navigation Menu' );
  • 31. header.php <!DOCTYPE html> <html> <head> <?php wp_head(); ?> </head> <body> <?php wp_nav_menu( 'theme_location=menu' ); ?>
  • 32. OK, That's Still Really Ugly
  • 33. OK, That's Still Really Ugly Yes, it is.
  • 34. How Can I Make an Awesome WordPress Theme?
  • 35. Learn From the Best ★ _s → A starter theme from Automattic
  • 36. Learn From the Best ★ _s → A starter theme from Automattic ★ Embedded best practices
  • 37. Learn From the Best ★ _s → A starter theme from Automattic ★ Embedded best practices ★ http://underscores.me/
  • 38. Learn From the Best ★ Make a child theme ★ Build on a solid base without starting from scratch ★ The Twenty * themes are good for this
  • 39. Learn From the Best ★ Learn how some of the intro stuff I just taught you was lacking or just plain bad!
  • 40. 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/
  • 41. Thanks! Matt Wiebe @mattwiebe wp.mattwie.be Design Engineer Automattic / WordPress.com