Theming 101

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?

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

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> </div> <?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> </div> <?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; ?>

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

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 ?>

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' ); ?>

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

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 stuﬀ 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

Theming 101

Theming 101

Recommended

More Related Content

What's hot

What's hot(20)

Viewers also liked

Viewers also liked(6)

Similar to Theming 101

Similar to Theming 101(20)

Recently uploaded

Recently uploaded(20)

Theming 101