theming 101
DESCRIPTION
The slides from Matt Wiebe's Wordcamp presentation on Theming 101TRANSCRIPT
![Page 1: Theming 101](https://reader034.vdocuments.mx/reader034/viewer/2022050816/54c73fc14a7959ae048b4580/html5/thumbnails/1.jpg)
Theming 101Matt Wiebe
@mattwiebewp.mattwie.be
Design Engineer Automattic / WordPress.com
![Page 2: Theming 101](https://reader034.vdocuments.mx/reader034/viewer/2022050816/54c73fc14a7959ae048b4580/html5/thumbnails/2.jpg)
Theming 101★ What is a theme?
★ How do I make a theme?
★ How do I make an awesome theme?
![Page 3: Theming 101](https://reader034.vdocuments.mx/reader034/viewer/2022050816/54c73fc14a7959ae048b4580/html5/thumbnails/3.jpg)
What is a Theme?
![Page 4: Theming 101](https://reader034.vdocuments.mx/reader034/viewer/2022050816/54c73fc14a7959ae048b4580/html5/thumbnails/4.jpg)
![Page 5: Theming 101](https://reader034.vdocuments.mx/reader034/viewer/2022050816/54c73fc14a7959ae048b4580/html5/thumbnails/5.jpg)
![Page 6: Theming 101](https://reader034.vdocuments.mx/reader034/viewer/2022050816/54c73fc14a7959ae048b4580/html5/thumbnails/6.jpg)
![Page 7: Theming 101](https://reader034.vdocuments.mx/reader034/viewer/2022050816/54c73fc14a7959ae048b4580/html5/thumbnails/7.jpg)
![Page 8: Theming 101](https://reader034.vdocuments.mx/reader034/viewer/2022050816/54c73fc14a7959ae048b4580/html5/thumbnails/8.jpg)
![Page 9: Theming 101](https://reader034.vdocuments.mx/reader034/viewer/2022050816/54c73fc14a7959ae048b4580/html5/thumbnails/9.jpg)
![Page 10: Theming 101](https://reader034.vdocuments.mx/reader034/viewer/2022050816/54c73fc14a7959ae048b4580/html5/thumbnails/10.jpg)
![Page 11: Theming 101](https://reader034.vdocuments.mx/reader034/viewer/2022050816/54c73fc14a7959ae048b4580/html5/thumbnails/11.jpg)
![Page 12: Theming 101](https://reader034.vdocuments.mx/reader034/viewer/2022050816/54c73fc14a7959ae048b4580/html5/thumbnails/12.jpg)
![Page 13: Theming 101](https://reader034.vdocuments.mx/reader034/viewer/2022050816/54c73fc14a7959ae048b4580/html5/thumbnails/13.jpg)
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
![Page 14: Theming 101](https://reader034.vdocuments.mx/reader034/viewer/2022050816/54c73fc14a7959ae048b4580/html5/thumbnails/14.jpg)
What is a Theme?★ A directory/folder of files in wp-content/themes
![Page 15: Theming 101](https://reader034.vdocuments.mx/reader034/viewer/2022050816/54c73fc14a7959ae048b4580/html5/thumbnails/15.jpg)
![Page 16: Theming 101](https://reader034.vdocuments.mx/reader034/viewer/2022050816/54c73fc14a7959ae048b4580/html5/thumbnails/16.jpg)
![Page 17: Theming 101](https://reader034.vdocuments.mx/reader034/viewer/2022050816/54c73fc14a7959ae048b4580/html5/thumbnails/17.jpg)
![Page 18: Theming 101](https://reader034.vdocuments.mx/reader034/viewer/2022050816/54c73fc14a7959ae048b4580/html5/thumbnails/18.jpg)
![Page 19: Theming 101](https://reader034.vdocuments.mx/reader034/viewer/2022050816/54c73fc14a7959ae048b4580/html5/thumbnails/19.jpg)
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
![Page 20: Theming 101](https://reader034.vdocuments.mx/reader034/viewer/2022050816/54c73fc14a7959ae048b4580/html5/thumbnails/20.jpg)
OK, How Do I Make a Theme?
![Page 21: Theming 101](https://reader034.vdocuments.mx/reader034/viewer/2022050816/54c73fc14a7959ae048b4580/html5/thumbnails/21.jpg)
style.css/*Theme Name: Twenty ThirteenTheme URI: http://wordpress.org/themes/twentythirteenAuthor: the WordPress teamAuthor URI: http://wordpress.org/Description: Much longer than this ;)Version: 0.1License: GNU General Public License v2 or laterLicense URI: http://www.gnu.org/licenses/gpl-2.0.htmlTags: black, brown, ETCText Domain: twentythirteen*/
![Page 22: Theming 101](https://reader034.vdocuments.mx/reader034/viewer/2022050816/54c73fc14a7959ae048b4580/html5/thumbnails/22.jpg)
style.css/*Theme Name: Twenty ThirteenTheme URI: http://wordpress.org/themes/twentythirteenAuthor: the WordPress teamAuthor URI: http://wordpress.org/Description: Much longer than this ;)Version: 0.1License: GNU General Public License v2 or laterLicense URI: http://www.gnu.org/licenses/gpl-2.0.htmlTags: black, brown, ETCText Domain: twentythirteen*/
![Page 23: Theming 101](https://reader034.vdocuments.mx/reader034/viewer/2022050816/54c73fc14a7959ae048b4580/html5/thumbnails/23.jpg)
style.css/*Theme Name: Your Awesome Theme Name*/
/* Actual CSS for your theme goes below */
![Page 24: Theming 101](https://reader034.vdocuments.mx/reader034/viewer/2022050816/54c73fc14a7959ae048b4580/html5/thumbnails/24.jpg)
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(); ?>
![Page 25: Theming 101](https://reader034.vdocuments.mx/reader034/viewer/2022050816/54c73fc14a7959ae048b4580/html5/thumbnails/25.jpg)
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(); ?>
![Page 26: Theming 101](https://reader034.vdocuments.mx/reader034/viewer/2022050816/54c73fc14a7959ae048b4580/html5/thumbnails/26.jpg)
The Loop<?php while ( have_posts() ) : the_post(); ?> <?php // print out a post's HTML ?><?php endwhile; ?>
![Page 27: Theming 101](https://reader034.vdocuments.mx/reader034/viewer/2022050816/54c73fc14a7959ae048b4580/html5/thumbnails/27.jpg)
The Loop<?php while ( have_posts() ) : the_post(); ?> <article> <h1><?php the_title(); ?></h1> <div><?php the_content(); ?></div> </article><?php endwhile; ?>
![Page 28: Theming 101](https://reader034.vdocuments.mx/reader034/viewer/2022050816/54c73fc14a7959ae048b4580/html5/thumbnails/28.jpg)
![Page 29: Theming 101](https://reader034.vdocuments.mx/reader034/viewer/2022050816/54c73fc14a7959ae048b4580/html5/thumbnails/29.jpg)
![Page 30: Theming 101](https://reader034.vdocuments.mx/reader034/viewer/2022050816/54c73fc14a7959ae048b4580/html5/thumbnails/30.jpg)
![Page 31: Theming 101](https://reader034.vdocuments.mx/reader034/viewer/2022050816/54c73fc14a7959ae048b4580/html5/thumbnails/31.jpg)
![Page 32: Theming 101](https://reader034.vdocuments.mx/reader034/viewer/2022050816/54c73fc14a7959ae048b4580/html5/thumbnails/32.jpg)
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 ?>
![Page 33: Theming 101](https://reader034.vdocuments.mx/reader034/viewer/2022050816/54c73fc14a7959ae048b4580/html5/thumbnails/33.jpg)
header.php<!DOCTYPE html><html><head> <meta charset="<?php bloginfo( 'charset' ); ?>" /> <?php wp_head(); ?></head>
<body>
![Page 34: Theming 101](https://reader034.vdocuments.mx/reader034/viewer/2022050816/54c73fc14a7959ae048b4580/html5/thumbnails/34.jpg)
footer.php <?php wp_footer(); ?></body></html>
![Page 35: Theming 101](https://reader034.vdocuments.mx/reader034/viewer/2022050816/54c73fc14a7959ae048b4580/html5/thumbnails/35.jpg)
STILL UGLY
![Page 36: Theming 101](https://reader034.vdocuments.mx/reader034/viewer/2022050816/54c73fc14a7959ae048b4580/html5/thumbnails/36.jpg)
header.php<!DOCTYPE html><html><head><meta charset="<?php bloginfo( 'charset' ); ?>" /><link href="<?php bloginfo( 'stylesheet_url' ) ?>" rel="stylesheet" /><?php wp_head(); ?></head>
<body>
![Page 37: Theming 101](https://reader034.vdocuments.mx/reader034/viewer/2022050816/54c73fc14a7959ae048b4580/html5/thumbnails/37.jpg)
style.css/*Theme Name: WordCamp Winnipeg*/
body { background-color: #333; color: #ddd; font-family: sans-serif; margin: 2em; line-height: 1.6;}
![Page 38: Theming 101](https://reader034.vdocuments.mx/reader034/viewer/2022050816/54c73fc14a7959ae048b4580/html5/thumbnails/38.jpg)
LESS UGLY
![Page 39: Theming 101](https://reader034.vdocuments.mx/reader034/viewer/2022050816/54c73fc14a7959ae048b4580/html5/thumbnails/39.jpg)
OK, Let's Use Those Other Files
AKA the Template Hierarchy
![Page 40: Theming 101](https://reader034.vdocuments.mx/reader034/viewer/2022050816/54c73fc14a7959ae048b4580/html5/thumbnails/40.jpg)
![Page 41: Theming 101](https://reader034.vdocuments.mx/reader034/viewer/2022050816/54c73fc14a7959ae048b4580/html5/thumbnails/41.jpg)
![Page 42: Theming 101](https://reader034.vdocuments.mx/reader034/viewer/2022050816/54c73fc14a7959ae048b4580/html5/thumbnails/42.jpg)
![Page 43: Theming 101](https://reader034.vdocuments.mx/reader034/viewer/2022050816/54c73fc14a7959ae048b4580/html5/thumbnails/43.jpg)
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
![Page 44: Theming 101](https://reader034.vdocuments.mx/reader034/viewer/2022050816/54c73fc14a7959ae048b4580/html5/thumbnails/44.jpg)
</basics><lessbasic>
![Page 45: Theming 101](https://reader034.vdocuments.mx/reader034/viewer/2022050816/54c73fc14a7959ae048b4580/html5/thumbnails/45.jpg)
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
![Page 46: Theming 101](https://reader034.vdocuments.mx/reader034/viewer/2022050816/54c73fc14a7959ae048b4580/html5/thumbnails/46.jpg)
functions.php★ add_theme_support()
★ post formats, background, header
★ http://codex.wordpress.org/add_theme_support
![Page 47: Theming 101](https://reader034.vdocuments.mx/reader034/viewer/2022050816/54c73fc14a7959ae048b4580/html5/thumbnails/47.jpg)
functions.php★ register_sidebar()
★ Should be register_widget_area() since not all widgets go in actual sidebars
★ As many as you want
![Page 48: Theming 101](https://reader034.vdocuments.mx/reader034/viewer/2022050816/54c73fc14a7959ae048b4580/html5/thumbnails/48.jpg)
functions.php<?php
register_sidebar( array( 'name' => 'Main Widget Area', 'id' => 'sidebar-1') );
![Page 49: Theming 101](https://reader034.vdocuments.mx/reader034/viewer/2022050816/54c73fc14a7959ae048b4580/html5/thumbnails/49.jpg)
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 ?>
![Page 50: Theming 101](https://reader034.vdocuments.mx/reader034/viewer/2022050816/54c73fc14a7959ae048b4580/html5/thumbnails/50.jpg)
![Page 51: Theming 101](https://reader034.vdocuments.mx/reader034/viewer/2022050816/54c73fc14a7959ae048b4580/html5/thumbnails/51.jpg)
functions.php<?php
register_nav_menu( 'menu', 'Top Navigation Menu' );
![Page 52: Theming 101](https://reader034.vdocuments.mx/reader034/viewer/2022050816/54c73fc14a7959ae048b4580/html5/thumbnails/52.jpg)
header.php<!DOCTYPE html><html><head> <?php wp_head(); ?></head>
<body><?php wp_nav_menu( 'theme_location=menu' ); ?>
![Page 53: Theming 101](https://reader034.vdocuments.mx/reader034/viewer/2022050816/54c73fc14a7959ae048b4580/html5/thumbnails/53.jpg)
![Page 54: Theming 101](https://reader034.vdocuments.mx/reader034/viewer/2022050816/54c73fc14a7959ae048b4580/html5/thumbnails/54.jpg)
OK, That's Still Really Ugly
![Page 55: Theming 101](https://reader034.vdocuments.mx/reader034/viewer/2022050816/54c73fc14a7959ae048b4580/html5/thumbnails/55.jpg)
OK, That's Still Really Ugly
Yes, it is.
![Page 56: Theming 101](https://reader034.vdocuments.mx/reader034/viewer/2022050816/54c73fc14a7959ae048b4580/html5/thumbnails/56.jpg)
How Can I Make an Awesome
WordPress Theme?
![Page 57: Theming 101](https://reader034.vdocuments.mx/reader034/viewer/2022050816/54c73fc14a7959ae048b4580/html5/thumbnails/57.jpg)
Learn From the Best★ _s → A starter theme from Automattic
![Page 58: Theming 101](https://reader034.vdocuments.mx/reader034/viewer/2022050816/54c73fc14a7959ae048b4580/html5/thumbnails/58.jpg)
![Page 59: Theming 101](https://reader034.vdocuments.mx/reader034/viewer/2022050816/54c73fc14a7959ae048b4580/html5/thumbnails/59.jpg)
Learn From the Best★ _s → A starter theme from Automattic
★ Embedded best practices
![Page 60: Theming 101](https://reader034.vdocuments.mx/reader034/viewer/2022050816/54c73fc14a7959ae048b4580/html5/thumbnails/60.jpg)
Learn From the Best★ _s → A starter theme from Automattic
★ Embedded best practices
★ http://underscores.me/
![Page 61: Theming 101](https://reader034.vdocuments.mx/reader034/viewer/2022050816/54c73fc14a7959ae048b4580/html5/thumbnails/61.jpg)
Learn From the Best★ Make a child theme
★ Build on a solid base without starting from scratch
★ The Twenty * themes are good for this
![Page 62: Theming 101](https://reader034.vdocuments.mx/reader034/viewer/2022050816/54c73fc14a7959ae048b4580/html5/thumbnails/62.jpg)
Learn From the Best★ Learn how some of the intro stuff I just taught you
was lacking or just plain bad!
![Page 63: Theming 101](https://reader034.vdocuments.mx/reader034/viewer/2022050816/54c73fc14a7959ae048b4580/html5/thumbnails/63.jpg)
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/
![Page 64: Theming 101](https://reader034.vdocuments.mx/reader034/viewer/2022050816/54c73fc14a7959ae048b4580/html5/thumbnails/64.jpg)
Thanks!Matt Wiebe
@mattwiebewp.mattwie.be
Design Engineer Automattic / WordPress.com