0
Theming 101
Matt Wiebe
@mattwiebe
wp.mattwie.be
Design Engineer
Automattic / WordPress.com
Theming 101
★ What is a theme?
★ How do I make a theme?
★ How do I make an awesome theme?
What is a Theme?
What is a Theme?
A WordPress Theme is a collection of files
that work together to produce a
graphical interface with an un...
What is a Theme?
★ A directory/folder of files in wp-content/themes
What is a Theme?
★ A directory/folder of files in wp-content/themes
★ Two necessary files
★ style.css
★ index.php
★ the re...
OK, How Do I
Make a Theme?
style.css
/*
Theme Name: Twenty Thirteen
Theme URI: http://wordpress.org/themes/twentythirteen
Author: the WordPress team
...
style.css
/*
Theme Name: Twenty Thirteen
Theme URI: http://wordpress.org/themes/twentythirteen
Author: the WordPress team
...
style.css
/*
Theme Name: Your Awesome Theme Name
*/
/* Actual CSS for your theme goes below */
index.php
<?php get_header(); ?>
<div id="primary" class="content-area">
<div id="content" class="site-content" role="main...
index.php
<?php get_header(); ?>
<div id="primary" class="content-area">
<div id="content" class="site-content" role="main...
The Loop
<?php while ( have_posts() ) : the_post(); ?>
<?php // print out a post's HTML ?>
<?php endwhile; ?>
The Loop
<?php while ( have_posts() ) : the_post(); ?>
<article>
<h1><?php the_title(); ?></h1>
<div><?php the_content(); ...
index.php
<?php get_header(); // loads header.php ?>
<?php while ( have_posts() ) : the_post(); ?>
<article>
<h1><?php the...
header.php
<!DOCTYPE html>
<html>
<head>
<meta charset="<?php bloginfo( 'charset' ); ?>" />
<?php wp_head(); ?>
</head>
<b...
footer.php
<?php wp_footer(); ?>
</body>
</html>
STILL UGLY
header.php
<!DOCTYPE html>
<html>
<head>
<meta charset="<?php bloginfo( 'charset' ); ?>" />
<link href="<?php bloginfo( 's...
style.css
/*
Theme Name: WordCamp Winnipeg
*/
body {
background-color: #333;
color: #ddd;
font-family: sans-serif;
margin:...
LESS UGLY
OK, Let's Use
Those Other Files
AKA the Template Hierarchy
Template Hierarchy
★ Everything falls back to index.php eventually
★ Mostly easy to follow
★ single.php → Single post
★ pa...
</basics>
<lessbasic>
functions.php
★ Tiny, theme-specific plugin
★ Should only have things that are theme-specific
★ Telling WordPress what fea...
functions.php
★ add_theme_support()
★ post formats, background, header
★ http://codex.wordpress.org/add_theme_support
functions.php
★ register_sidebar()
★ Should be register_widget_area() since not all
widgets go in actual sidebars
★ As man...
functions.php
<?php
register_sidebar( array(
'name' => 'Main Widget Area',
'id' => 'sidebar-1'
) );
index.php
<?php get_header(); // loads header.php ?>
<?php while ( have_posts() ) : the_post(); ?>
<h1><?php the_title(); ...
functions.php
<?php
register_nav_menu( 'menu', 'Top Navigation Menu' );
header.php
<!DOCTYPE html>
<html>
<head>
<?php wp_head(); ?>
</head>
<body>
<?php wp_nav_menu( 'theme_location=menu' ); ?>
OK, That's Still
Really Ugly
OK, That's Still
Really Ugly
Yes, it is.
How Can I Make
an Awesome
WordPress Theme?
Learn From the Best
★ _s → A starter theme from Automattic
Learn From the Best
★ _s → A starter theme from Automattic
★ Embedded best practices
Learn From the Best
★ _s → A starter theme from Automattic
★ Embedded best practices
★ http://underscores.me/
Learn From the Best
★ Make a child theme
★ Build on a solid base without starting from scratch
★ The Twenty * themes are g...
Learn From the Best
★ Learn how some of the intro stuff I just taught you
was lacking or just plain bad!
Learn From the Best
★ http://codex.wordpress.org/Theme_Development
★ http://codex.wordpress.org/Template_Hierarchy
★ http:...
Thanks!
Matt Wiebe
@mattwiebe
wp.mattwie.be
Design Engineer
Automattic / WordPress.com
Theming 101
Theming 101
Theming 101
Theming 101
Theming 101
Theming 101
Theming 101
Theming 101
Theming 101
Theming 101
Theming 101
Theming 101
Theming 101
Theming 101
Theming 101
Theming 101
Theming 101
Theming 101
Theming 101
Theming 101
Theming 101
Theming 101
Theming 101
Upcoming SlideShare
Loading in...5
×

Theming 101

2,772

Published on

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

Published in: Technology, Business
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
2,772
On Slideshare
0
From Embeds
0
Number of Embeds
15
Actions
Shares
0
Downloads
22
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

Transcript of "Theming 101"

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

    Clipping is a handy way to collect important slides you want to go back to later.

×