theming 101

64
Theming 101 Matt Wiebe @mattwiebe wp.mattwie.be Design Engineer Automattic / WordPress.com

Upload: winnipegwordcamp

Post on 27-Jan-2015

123 views

Category:

Technology


0 download

DESCRIPTION

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

TRANSCRIPT

Page 1: Theming 101

Theming 101Matt Wiebe

@mattwiebewp.mattwie.be

Design Engineer Automattic / WordPress.com

Page 2: Theming 101

Theming 101★ What is a theme?

★ How do I make a theme?

★ How do I make an awesome theme?

Page 3: Theming 101

What is a Theme?

Page 4: Theming 101
Page 5: Theming 101
Page 6: Theming 101
Page 7: Theming 101
Page 8: Theming 101
Page 9: Theming 101
Page 10: Theming 101
Page 11: Theming 101
Page 12: Theming 101
Page 13: Theming 101

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

What is a Theme?★ A directory/folder of files in wp-content/themes

Page 15: Theming 101
Page 16: Theming 101
Page 17: Theming 101
Page 18: Theming 101
Page 19: Theming 101

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

OK, How Do I Make a Theme?

Page 21: Theming 101

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

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

style.css/*Theme Name: Your Awesome Theme Name*/

/* Actual CSS for your theme goes below */

Page 24: Theming 101

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

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

The Loop<?php while ( have_posts() ) : the_post(); ?> <?php // print out a post's HTML ?><?php endwhile; ?>

Page 27: Theming 101

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
Page 29: Theming 101
Page 30: Theming 101
Page 31: Theming 101
Page 32: Theming 101

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

header.php<!DOCTYPE html><html><head> <meta charset="<?php bloginfo( 'charset' ); ?>" /> <?php wp_head(); ?></head>

<body>

Page 34: Theming 101

footer.php <?php wp_footer(); ?></body></html>

Page 35: Theming 101

STILL UGLY

Page 36: Theming 101

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

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

LESS UGLY

Page 39: Theming 101

OK, Let's Use Those Other Files

AKA the Template Hierarchy

Page 40: Theming 101
Page 41: Theming 101
Page 42: Theming 101
Page 43: Theming 101

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

</basics><lessbasic>

Page 45: Theming 101

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

functions.php★ add_theme_support()

★ post formats, background, header

★ http://codex.wordpress.org/add_theme_support

Page 47: Theming 101

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

functions.php<?php

register_sidebar( array( 'name' => 'Main Widget Area', 'id' => 'sidebar-1') );

Page 49: Theming 101

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
Page 51: Theming 101

functions.php<?php

register_nav_menu( 'menu', 'Top Navigation Menu' );

Page 52: Theming 101

header.php<!DOCTYPE html><html><head> <?php wp_head(); ?></head>

<body><?php wp_nav_menu( 'theme_location=menu' ); ?>

Page 53: Theming 101
Page 54: Theming 101

OK, That's Still Really Ugly

Page 55: Theming 101

OK, That's Still Really Ugly

Yes, it is.

Page 56: Theming 101

How Can I Make an Awesome

WordPress Theme?

Page 57: Theming 101

Learn From the Best★ _s → A starter theme from Automattic

Page 58: Theming 101
Page 59: Theming 101

Learn From the Best★ _s → A starter theme from Automattic

★ Embedded best practices

Page 60: Theming 101

Learn From the Best★ _s → A starter theme from Automattic

★ Embedded best practices

★ http://underscores.me/

Page 61: Theming 101

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

Learn From the Best★ Learn how some of the intro stuff I just taught you

was lacking or just plain bad!

Page 64: Theming 101

Thanks!Matt Wiebe

@mattwiebewp.mattwie.be

Design Engineer Automattic / WordPress.com