WordPress Theme Files When you're first getting started with a WordPress theme there really are only six files that you need. With only these six files you can create a blog that has a consistent header and footer, has a dynamic (widgetized) sidebar, displays an index page, displays single pages/posts and even displays categories, archives and searches.

Yes, most themes consist of more than just these basic six WordPress theme templates but ultimately these extra templates are just the result of customization.

While we will eventually get into creating more customized template files this post, and most of this series, are based on the creation of a basic WordPress Theme. In fact - using just these six basic files we can create a fully functioning theme in a matter of just a few short hours.

The six basic files:

  1. header.php: your blog's header
  2. style.css: your blog's style sheet
  3. index.php: connects your header, sidebar and footer plus displays your posts
  4. sidebar.php: your blog's sidebar
  5. footer.php: your blog's footer
  6. functions.php: special php that works within your theme

A lot of people will tell you that functions.php isn't a necessary file for a theme but in general I prefer to add it just to make sure a theme is "widget ready." In this series we really won't go much farther than that but in later posts we'll use this file to do some pretty incredible stuff.

For now, though, we're concentrating on basics. In this post we're going to create three of the six basic WordPress theme templates. We'll create a basic stylesheet, a header and a footer for our theme. This post and the next lay the groundwork for our theme and are incredibly important.

To get started browse to your newly installed local copy of WordPress (covered in this post) and find the wp-content directory. Create a new folder titled "newTheme" and 6 blank files named header.php, style.css, index.php, sidebar.php, footer.php and finally functions.php.

If you're feeling lazy you can download a zip file here that already has the blank files put together.

Now let's create our first WordPress theme.

Creating style.css for WordPress

Once you've got the blank files stored open up style.css in your text editor (I really, highly, vehemently recommend using NotePad++).

As a general rule every WordPress style.css file requires a small snippet of code right off the bat. This code tells WordPress the name of the theme, it's author's information and a few other details about both. Take a peak below for what you should be entering:
/*
Theme Name: THE THEME'S NAME
Theme URI: THE URI YOU OFFER FOR DOWNLOADING YOUR THEME
Description: THEME DESCRIPTION
Version: alpha
Author: YOUR NAME
Author URI: YOUR HOMEPAGE
*/

It's pretty self explanatory but we've added some hints (in CAPS) just in case.

With the exception of the version number you can add all the information as it pertains to your blog. I'm not a professional programmer but I like to stick with a few basic rules when creating a new theme. Since this is an early, not-fully implemented, WordPress Theme I'm sticking with "alpha" for our version number.

That will change as we progress though but it's helpful for keeping things in perspective.

Once you're done here you can close style.css and open header.php.

Creating Your WordPress header.php File

Loosely speaking it helps to think of the HTML framework when putting together your template files.

  • In the header you'll include everything leading up to, and including, the <body> tag.
  • In the main part of the template, index.php, you'll put almost everything that rests within the <body> tags.
  • In the footer you'll close the <body> and <html> tags and everything's done.

As we kick off our new theme we'll stick to these rules but when we start creating a true header and footer we'll break from them slightly.

To get started with our header.php file we'll do what we normally would for any HTML file's header.
<html>
<head>
</head>
<body>
These are just the basics so we'll have to take it a few extra steps to get things just right for WordPress. This starts with taking our HTML base and making it XHTML.

To start we have to declare a DOCTYPE and add some special rules to the opening <html> tag.

Declaring a Proper DOCTYPE for WordPress

To start with we need to set a DOCTYPE. To be honest the nature of DOCTYPEs and the reasons for choosing one over another is a bit to heady for this discussion. Let me just say that generally speaking WordPress blogs are better off running Transition DOCTYPEs because they are much less strict and don't prevent you from using existing pieces of the WordPress architecture. The DOCTYPE basically declares what version of HTML or XHTML you're using - in our case we'll use the following:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
The Transitional DOCTYPE, as mentioned before, is much more forgiving that a Strict one would be. It allows us to use the <strike> tags and it also makes posting dynamic content like YouTube videos much easier. If you're interested in learning more about DOCTYPEs I recommend heading over to the HTML DOCTYPE TAG entry at W3Schools.

Setting the Right XMLNS and Language

After our DOCTYPE is declared we'll also want to set our xmlns (this is something that's required by XHTML) in the <head> tag as well as the language properties for the blog. We do that with the following code:
<html xmlns="http://www.w3.org/1999/xhtml" <?php language_attributes(); ?>>
The second part, the language_attributes(), is a WordPress tag that will handle declaring everything for us.

Now onto adding the style sheet.

Adding a Style Sheet to the WordPress Header

To include the style sheet we need some HTML and some PHP. The basic code looks like this:
<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" media="screen" />
You should be able to recognize the PHP pretty quickly - it's enclosed in <?php ... ?>.

Because a lot of the links in a WordPress theme have to be dynamic we rely on the style sheet as a basis for targeting certain things (you'll see this later when we talk about using images in our themes.) We're specifically looking for the style sheet so we use the bloginfo() tag and the 'stylesheet_url' parameter.

When this portion of the code is interpreted by WordPress it will return a clean URL that points directly to the style sheet.

Adding the Proper Title and Bringing it All Together

Last but not least let's add the blog's title. We do this using the same Template Tag we used for grabbing the style sheet we just need a different parameter - this time it's 'name.' You're title tag should look like this:
<title><?php bloginfo('name'); ?></title>
At this point your header.php file should look like this:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" <?php language_attributes(); ?>>
<head>
<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" media="screen" />
<title><?php bloginfo('name');?></title>
</head>
<body>

Setting up the footer.php

For the footer we don't need to get too fancy. Eventually we'll end up adding some extra code but for now we just need to close up the tags that are currently open. We do this by simply closing the <body> and <html> tags.

Your footer.php should look like this:
</body>
</html>

Pretty easy right?

Time for a Break

At this point we've created three of the six basic WordPress Theme files but there's still more work to be done before we can test out our theme.

In our next post we'll create put some code in sidebar.php, index.php, and functions.php that will finalize our barebones theme. Once we get through part two we'll be able to load up our theme and see it in action.

After that we'll be ready to start styling things and giving our blog a clean look and feel.

If you're in no hurry grab a cold soda, or beer. When you get back we'll get started with Part Two of Creating a Basic WordPress Theme.