Theming 101
Upcoming SlideShare
Loading in...5
×

Like this? Share it with your network

Share

Theming 101

  • 2,894 views
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,894
On Slideshare
2,486
From Embeds
408
Number of Embeds
9

Actions

Shares
Downloads
21
Comments
0
Likes
2

Embeds 408

http://wpdaily.co 158
http://cloud.feedly.com 96
http://torquemag.io 88
http://wpplus.me 51
http://digg.com 6
http://feedproxy.google.com 5
http://www.newsblur.com 2
http://feeds.feedburner.com 1
http://newsblur.com 1

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