WordPress Theme Template & Directory Structure

Update: We’ve created a second edition of this article, with updated code samples and coverage of the latest theme development techniques. Check it out at WordPress Theme Template & Directory Structure. It’s part of The ThemeShaper WordPress Theme Tutorial: 2nd Edition.

While the most minimal of WordPress Themes really only needs an index.php Template and a style.css file (or just the style file if it’s a Child Theme) most WordPress Themes need something a little more solid.

Our new minimal will include 6 files. Make a folder in wp-content/themes/ for your theme—for this tutorial I’ll be using “your-theme” but it can be whatever you want—and create the following files in that new folder (don’t worry, they’ll be blank until the next few steps).

index.php
header.php
sidebar.php
footer.php
functions.php
style.css
Now let’s open up the last file we created, style.css, in a text editor. The first thing we need to do is add a section at the top of this file bracketed by what are called CSS “comments” (these guys: /* and */). It’s here that we need to put the info that tells WordPress about your theme. Without it, your theme won’t show up in the themes panel.

/*
Theme Name: Your Theme
Theme URI: http://example.com/example/
Description: A search engine optimized website framework for WordPress.
Author: You
Author URI: http://example.com/
Version: 1.0
Tags: Comma-separated tags that describe your theme
.
Your theme can be your copyrighted work.
Like WordPress, this work is released under GNU General Public License, version 2 (GPL).
http://www.gnu.org/licenses/old-licenses/gpl-2.0.html
.
*/

Something to note: a lot of this is optional. Really, you just need the Theme Name. But if you ever plan on releasing your theme, or if you’re making a custom theme for someone, you’ll want to start out including most, if not all, of the rest. At the very least, I want you to feel free to mess around with it.

Once you’ve got that done you can activate your theme and navigate to your test site. We’ve made the ultimate blank theme! Things should start to get interesting right about now.

Building In Your HTML Structure

Now we get to use our HTML structure from the previous lesson. But first a mini-lesson about WordPress and Templates.

WordPress really only needs 1 template file, index.php. We can, and will be adding a series of template files that can be used instead of index.php for certain situations (single posts, category pages, etc.), but at the very beginning, index.php is all we’ll need.

Now, index.php and all it’s related brothers and sisters (which we’ll get to) make the web pages we see in our browser. They’re files with some HTML and HTML-outputting-PHP but in the end they make web pages.

Let’s think of web pages like stories, something with a beginning, a middle, and an end. Well, when we write out our index.php file (and later our single.php, category.php, etc.) we’re going to concentrate only on the middle bit. But! We’re going to call in the beginning bit and the end bit. We may have to always be redoing our middles but we’re only going to do the beginning and end of each web page once.

Header.php and Footer.php

Get the HTML structure we worked on in the previous lesson and copy everything up to and including

into header.php and save it. It should look like this:

<html>
<head>
</head>
<body>
<div id="wrapper" class="hfeed">
	<div id="header">
		<div id="masthead">

			<div id="branding">
			</div><!-- #branding -->

			<div id="access">
			</div><!-- #access -->

		</div><!-- #masthead -->
	</div><!-- #header -->

	<div id="main">

Now, copy everything after, and including,

into footer.php. It should look like this:

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

	<div id="footer">
		<div id="colophon">

			<div id="site-info">
			</div><!-- #site-info -->

		</div><!-- #colophon -->
	</div><!-- #footer -->
</div><!-- #wrapper -->
</body>
</html>

Index.php

I bet you can guess what we have to do now. Copy everything from our HTML structure inside the #main div into index.php. It should look like this:

		<div id="container">

			<div id="content">
			</div><!-- #content -->

		</div><!-- #container -->

		<div id="primary" class="widget-area">
		</div><!-- #primary .widget-area -->

		<div id="secondary" class="widget-area">
		</div><!-- #secondary -->

With only two small additions we’ll have a perfectly invalid WordPress Theme but we’ll be on the right track. We need to call in the header and footer to your theme.

At the top of index.php, before anything else, add the following template tag.

<?php get_header(); ?>

I think it’s pretty obvious what this tag does. It gets the header. But while we’re here, take a good look at this template tag if you’re new to PHP. I want you to notice a few things. First, our PHP function call—get_header()—begins with . Secondly, while our call is only 1 line long it ends with a semi-colon. Small, but important stuff.

Alright! Can you guess what function call we’re going to put at the bottom of index.php?

<?php get_footer(); ?>

Yep. Now we’ve got our main file that WordPress looks for, index.php. It has all the middle bits of our web page, but the top calls in the beginning bits, and the bottom calls in the ending bits.

Reload your page in the browser and check out the source code (View > Page Source, in Firefox). Look! It’s your code!

You’re on your way to making your first WordPress Theme.

How To Create a WordPress Theme

This post is part of a WordPress Themes Tutorial that will show you how to create a powerful WordPress Theme from scratch. Read it from the beginning and code yourself up something awesome.

WordPress Theme Tutorial Introduction
Theme Development Tools
Creating a Theme HTML Structure
Template and Directory Structure
The Header Template
The Index Template
The Single Post, Post Attachment, & 404 Templates
The Comments Template
The Search Template & The Page Template
The Archive, Author, Category & Tags Template
The Sidebar Template
Reset-Rebuild Theme CSS & Define Your Layouts

Creating a WordPress Theme HTML Structure

Update: We’ve created a second edition of this article, with updated code samples and coverage of the latest theme development techniques. Check it out at Creating a WordPress Theme HTML Structure. It’s part of The ThemeShaper WordPress Theme Tutorial: 2nd Edition.

Now we’re starting to get into the real meat of WordPress Theme development: coding the HTML structure.

The Goals of Any HTML Structure

When coding a web site you should have 2 goals in mind: lean code and meaningful code. That is, using as little markup (HTML tags) as possible and making sure that the markup is meaningful by using semantic class and ID names that refer to their content, not how they “look” (class=”widget-area” instead of class=”sidebar-left”).

Now, when coding a WordPress Theme (or any template for any Content Management System) a balance is going to have to be struck between lean markup, with very little structure, and what’s called Divitis; including too many unnecessary div elements in your code. In other words, too much meaningless structure.

You’ve probably seen the div tag before if you’ve looked at the code for a website or any WordPress Theme. Think of them as containers for HTML code—containers that are very handy for manipulating HTML code with CSS. Obviously we’re going to have some. But we don’t want too many or ones without meaning. And we want enough structure—using the div tag—that we can reuse our code for multiple blog and site layouts. We want to code something we can come back to and use again.

Continue reading “Creating a WordPress Theme HTML Structure”

WordPress Theme Development Tools

Update: We’ve created a second edition of this article, with updated code samples and coverage of the latest theme development techniques. Check it out at WordPress Theme Development Tools. It’s part of The ThemeShaper WordPress Theme Tutorial: 2nd Edition.

Before we get started building any WordPress Theme we’re going to need to get our development tools in place. In this post, we’ll run through the best of the best and build ourselves a cross-platform WordPress Theme test environment that would do a professional Theme developer proud.

A Local Test Server: XAMP or MAMP

The best place to develop your custom WordPress Theme is off the web, on your home computer. To do that though you’ll need to turn your computer into a “local server”, essentially approximating the program suite on a regular web server (Apache, MySQL and PHP). This means you can install WordPress on your home computer.

Installing these separate server programs can be technically challenging but luckily for us there are a couple of free programs that will install and manage all this for us.

If you’re on a Windows computer you’ll want to try out XAMP.

If you’re running a Mac you’ll want to download MAMP. It’s what I use and it does the trick.

Continue reading “WordPress Theme Development Tools”

How To Create a WordPress Theme: The Ultimate WordPress Theme Tutorial

Update: We’ve created a second edition of this popular tutorial! It contains updated code samples, coverage of the latest theme development techniques, and more. Check it out at The ThemeShaper WordPress Theme Tutorial: 2nd Edition.

In only 11 individual lessons this WordPress Theme Tutorial is going to show you how to build a powerful, up-to-date, WordPress Theme from scratch. As we go along I’ll explain what’s happening including (for better or worse) my thinking on certain techniques and why I’m choosing one path over another. Essentially, I’ll be teaching you everything you need to know about WordPress Theme development.

Skip to the Table of Contents.

tutorial-graphic-large

Continue reading “How To Create a WordPress Theme: The Ultimate WordPress Theme Tutorial”

Street: A Thematic Child Theme by CozmosLabs

Thematic expert, Cristi at CozmosLabs has released another excellent Thematic Child Theme. This one’s called Street.

The Street Theme

Here’s what Cristi had to say about it:

Street is something that was created from a spark of inspiration,
something that I felt should look like this. This wasn’t thought out
nor planed. It took only 4 days from the initial idea to the launch of
the theme.

Street Features:

  • It uses the beautiful Vegur Free Font for the headings and main menu, implemented by Cufon (text replacement technique).
  • Upload your own logo or header image from the “Street Theme Options”.
  • One Column page template that spans the width of the page

So You Want To Create WordPress Themes, Huh?

Update: It’s live! It’s happening! Go read How To Create a WordPress Theme and learn how to code up something awesome.


Does that title sound familiar? Over 2 years ago the now defunct WPDesigner.com published a series of posts under that banner, teaching beginners how to create WordPress Themes from scratch.

2 years ago is a long time online: Things have changed.

Starting next week, ThemeShaper will publish a series of daily lessons that will teach you how to create your very own modern WordPress Theme—from scratch—using the latest best practices.

And it won’t be just any old WordPress theme you’ll have in your hands. In a lot of ways it will surpass what’s been done with the popular Thematic Theme Framework. Except, it’ll be a little leaner, a little meaner, and it’ll be all yours.

Here’s the laundry list of features your finished theme will be able to boast of.

  • Search-engine optimization
  • Microformats
  • Localization support for translation
  • Robust dynamic body and post classes
  • Separated Comments and Trackbacks
  • Gravatar support
  • A valid, logical, semantic XHTML structure you can use to build ANY layout
  • Valid CSS
  • A strong typographical foundation
  • Smart default layouts (that we can adapt for later layout generation)
  • 2 widget areas, with NO hard-coded widgets, that “disappear” from the markup when they’re empty.
  • Styling for WordPress Image Classes
  • And pretty much all the typical WordPress stuff

When you’re done you’ll have a complete—and completely powerful—WordPress Theme that you can edit further or build on with a WordPress Child Theme. The choice is yours.

Are you ready?

Get Thematic Version 0.9.5

It’s here! Thematic 0.9.5. A huge refinement of the Thematic Theme Framework—so huge that it’s only caution keeping me from calling it version 1.0. Chris Gossmann and I spent a lot of time on this version chopping down our personal to-do lists. Chris especially, making sure brilliant themes like the Gallery Theme are even easier to make. That’s right, even easier.

Here’s the quick list of what we’ve done to make Thematic easier for you to use.

  • Want to quickly find out what you can hook into and where? Browse through the cleaned up and organized extension files in the library. They’re logically organized and better documented.
  • Every last default widget ready area is hookable. Before, after, and in between.
  • We’ve added a hook before and after the main loops. You’ll be seeing a lot more magazine Child Themes I think.
  • The older/newer and post navigation is filterable.
  • Don’t want the Secondary Aside? Pull all the widgets out. The default widgets are no longer hard-coded into the sidebar template files.
  • You can move the comments template by unhooking it and injecting it somewhere else. Adding even more layout possibilities for creative designers.
  • More new dynamic body classes enabling surgically precise CSS work.

What it boils down to is this: I want you to be able to quickly develop powerful, rock-solid WordPress Themes with the Thematic Theme Framework. This version of Thematic just makes it even easier.

Of course, there’s more. As always thank you to everyone who’s contributed to the Thematic Theme Framework and this release. I’m getting pretty excited about Thematic and what it’s leading to. I hope you are too.

Download the Thematic Theme Framework and read how to modify WordPress Themes the smart way. It’ll change how you think about WordPress and WordPress Themes.

Using Action Hooks in WordPress Child Themes

In this post we’ll review how to write a PHP function and go over the basic idea of how you can use Action Hooks in your WordPress Theme. We’ll take a look at a practical example of injecting a Welcome Blurb into your Theme without touching the existing code and we’ll also look at how to remove existing content being injected into Theme Hooks.

Packing Up A Function

Action hooks are in a lot of WordPress Themes nowadays. There’s a good reason for that but you’re probably wondering what the big deal is right? They’re such a big deal because firstly, they’re incredibly easy to use and secondly, because they’re extremely powerful.

If you want to get started with them we’re going to have to take a look at how to write a PHP function again. Don’t worry, we’ll keep it pretty simple.

Continue reading “Using Action Hooks in WordPress Child Themes”

The Audry Theme for Thematic

Design Notes has released a really striking looking Thematic Child Theme with tons of interesting texture called, Audry.

audry-screenshot

If you’re interested in learning how they made Audry, there’s also a two part tutorial on Thematic Child Theme Development at Design Notes. Make sure you check it out.

How To Design A Popular WordPress Theme: Chris Pearson’s Secret

Want to design a popular WordPress Theme? Then you better take a look at what Chris Pearson is doing. He knows the secret of designing a popular theme.

Chris is arguably the most popular and successful WordPress Theme designer in the short history of blogging. Press Row, Cutline, The Copyblogger Theme, Neo-Classical, and now Thesis, have all struck a resounding chord with the WordPress community. It’s impossible to find a blogger that hasn’t run across at least 1 of these 5 themes and admired them.

What’s his secret? Why are his simple-looking themes more successful than others? Can any theme designer duplicate his success?

Continue reading “How To Design A Popular WordPress Theme: Chris Pearson’s Secret”