Your browser doesn't support the features required by impress.js, so you are presented with a simplified version of this presentation.

For the best experience please use the latest Chrome, Safari or Firefox browser.

Use a spacebar or arrow keys to navigate

WDN109 WordPress II

Session 2: Intro to Theme Structure

Erick Hitter

cdia@ethitter.com

What is a theme?

 

The visual representation of information stored in WordPress.

 

In other words, the code that controls how posts and pages are shown to visitors.

Why a theme?

 

Keeps data separate from its display, so the presentation can change independent of the content.

 

Allows a different layout to be shown to desktop, tablet, and mobile visitors.

 

Also lets users change their themes at will—to suit their moods, the seasons, or whathaveyou.

Examples

Examples

What constitutes a theme?

 

For WordPress to recognize a theme as valid, it must comprise at least two files:

 

Most themes contain many more files than this, owing to the WordPress Template Hierarchy.

Recommended Template Files

 

The other files included in a theme are largely dictated by the theme's design.

style.css

For WordPress to recognize a theme as valid, style.css must start with a comment block containing some information about your theme.

 

/*
Theme Name: Twenty Thirteen
Theme URI: http://wordpress.org/extend/themes/twentythirteen
Author: the WordPress team
Author URI: http://wordpress.org/
Description: The 2013 theme for WordPress takes us back to the blog, featuring a full range of post formats, each displayed beautifully in their own unique way. Design details abound, starting with a gorgeous color scheme and matching header images, optional display fonts for beautiful typography, and a wide layout that looks great on large screens yet remains device-agnostic and is readable on any device.
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, orange, tan, white, light, one-column, two-columns, right-sidebar, flexible-width, custom-header, custom-menu, editor-style, featured-images, microformats, post-formats, rtl-language-support, sticky-post, translation-ready
Text Domain: twentythirteen

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned with others.
*/

Making A Theme

 

  1. Start with a static HTML file.
  2. Identify common, or repeated, elements in the theme: header, footer, sidebar, and so on.
  3. Break static HTML file into pieces based on repetition.
  4. Replace static bits in template files with WordPress Template Tags.

Start with a static HTML file

 

You should have static files from WDN108.

I'll be using Konstantin Kovshenin's Publish theme.

 

The stripped-down version of Publish I'll be working from is at:

http://cdia.ethitter.com/WDN109/assets/publish/index.html

Identify common elements in the theme

<html lang="en">
	<head>
		…
		<title>ethitter on WordPress.com</title>
		<link rel="stylesheet" href="style.css">
	</head>

	<body class="home blog typekit-enabled highlander-enabled highlander-light">
		<div id="page" class="hfeed site">
			<header id="masthead" class="site-header" role="banner">
				<a class="site-logo" href="http://ethitter.wordpress.com/" title="ethitter on WordPress.com" rel="home"><img class="no-grav" src="http://gravatar.com/avatar/fcf17d516139b240f405706d6fc8fc10/?s=100&d=identicon" height="100" width="100" alt="ethitter on WordPress.com"></a>

				<hgroup>
					<h1 class="site-title"><a href="http://ethitter.wordpress.com/" title="ethitter on WordPress.com" rel="home">ethitter on WordPress.com</a></h1>
					<h2 class="site-description">Eating my own dogfood</h2>
				</hgroup>

				<nav role="navigation" class="site-navigation main-navigation">
					<h1 class="assistive-text">Menu</h1>
					<div class="assistive-text skip-link"><a href="#content" title="Skip to content">Skip to content</a></div>

					<div class="menu">
						…
					</div><!-- .menu -->
				</nav><!-- .site-navigation .main-navigation -->
			</header><!-- #masthead .site-header -->

			<div id="main" class="site-main">

Identify common elements in the theme

			</div><!-- #main .site-main -->

			<footer id="colophon" class="site-footer" role="contentinfo">
				<div class="site-info">
					<a href="http://wordpress.com/?ref=footer" rel="generator">Blog at WordPress.com</a>. Theme: <a href="http://theme.wordpress.com/credits/ethitter.wordpress.com/" title="Learn more about how this site is customized with the Custom Design upgrade">Customized Publish</a> by <a href="http://kovshenin.com/" rel="designer">Konstantin Kovshenin</a>.
				</div><!-- .site-info -->
			</footer><!-- #colophon .site-footer -->
		</div><!-- #page .hfeed .site -->

	</body>
</html>

Identify common elements in the theme

<div id="secondary" class="widget-area" role="complementary">
	<aside id="search-2" class="widget widget_search">
		<form method="get" id="searchform" action="http://ethitter.wordpress.com/" role="search">
			<label for="s" class="assistive-text">Search</label>
			<input type="text" class="field" name="s" value="" id="s" placeholder="Search …">
			<input type="submit" class="submit" name="submit" id="searchsubmit" value="Search">
		</form>
	</aside>
	<aside id="author_grid" class="widget widget_author_grid">
		<h1 class="widget-title">Authors</h1>
			<ul>
				<li>
					<a href="http://ethitter.wordpress.com/author/ethitter/">
						<img alt="" src="http://0.gravatar.com/avatar/38e526b811ef688a32d86f85871353eb?s=32&d=identicon&r=G" class="avatar avatar-32" height="32" width="32">
					</a>
				</li>
			</ul>
	</aside>
</div><!-- #secondary .widget-area -->

Break static HTML file into pieces

 

The three preceding slides could easily become:

 

And, of course, index.php.

Break static HTML file into pieces

 

Let's look at some code!

Break static HTML file into pieces

 

Now that we've broken the index.html file up, we need to link them back together.

 

Replace static bits with Template Tags

 

Two Aspects:

 

  1. The Loop – takes content from the database and makes it available to display in your theme.
  2. A pile of Template Tags – displays the content made available by The Loop.

The Loop

 

<?php
	if ( have_posts() ) {
		while ( have_posts() ) {
			the_post();
		}
	}
?>

The Loop

 

<?php
	if ( have_posts() ) {
		while ( have_posts() ) {
			the_post();
		}
	}
?>

 

Do we have posts to display?

The Loop

 

<?php
	if ( have_posts() ) {
		while ( have_posts() ) {
			the_post();
		}
	}
?>

 

If we have posts, let's loop through them.

The Loop

 

<?php
	if ( have_posts() ) {
		while ( have_posts() ) {
			the_post();
		}
	}
?>

 

As we loop through each post, make the post available to the Template Tags.

 

It isn't important why, but this must be the first function called inside of the while statement.

We Have A Loop, Now What?

Template Tags!

 

These get content from WordPress and display it in your templates.

 

They must be used within The Loop.

Again, using Template Tags outside of The Loop will have unexpected and unpredictable results.

Common Template Tags

A Note About Template Tags

 

Template tags (functions starting with the_) always echo their information.

 

<h1><?php the_title(); ?></h1>

<h1><?php echo the_title(); ?></h1>

Let's Make Some Themes!