theming 101
DESCRIPTION
The slides from Matt Wiebe's Wordcamp presentation on Theming 101TRANSCRIPT
Theming 101Matt Wiebe
@mattwiebewp.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 underlying unifying design for a weblog. These files are called template files.
— http://codex.wordpress.org/Themes
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 rest make sense as you go
OK, How Do I Make a Theme?
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*/
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*/
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"> <?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(); ?>
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(); ?>
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(); ?></div> </article><?php endwhile; ?>
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 ?>
header.php<!DOCTYPE html><html><head> <meta charset="<?php bloginfo( 'charset' ); ?>" /> <?php wp_head(); ?></head>
<body>
footer.php <?php wp_footer(); ?></body></html>
STILL UGLY
header.php<!DOCTYPE html><html><head><meta charset="<?php bloginfo( 'charset' ); ?>" /><link href="<?php bloginfo( 'stylesheet_url' ) ?>" rel="stylesheet" /><?php wp_head(); ?></head>
<body>
style.css/*Theme Name: WordCamp Winnipeg*/
body { background-color: #333; color: #ddd; font-family: sans-serif; margin: 2em; line-height: 1.6;}
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
★ page.php → Static page
★ category.php → Category archive
★ http://codex.wordpress.org/Template_Hierarchy
</basics><lessbasic>
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
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 many as you want
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(); ?></h1> <article><?php the_content(); ?></article><?php endwhile; ?><?php dynamic_sidebar( 'sidebar-1' ); ?><?php get_footer(); // loads footer.php ?>
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 good for this
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://codex.wordpress.org/Template_Tags
★ http://codex.wordpress.org/Theme_Review
★ http://codepoet.com/
★ http://themeshaper.com/
Thanks!Matt Wiebe
@mattwiebewp.mattwie.be
Design Engineer Automattic / WordPress.com