Theming 101

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 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 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 */

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

from Automattic ★ Embedded best practices

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 stuﬀ 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 @mattwiebe wp.mattwie.be Design Engineer Automattic / WordPress.com

Theming 101

Theming 101

More Decks by Matt Wiebe

Other Decks in Technology

Featured

Transcript