WordPress Theme Design – Header and Footer

  • Posted On: May 8th, 2007
  • Filed Under: Web Design
  • Tagged As:

Today and tomorrow we'll take a closer look at building some template files for your first WordPress theme. The files we'll be constructing are the bare basics of your theme and can be recycled anytime you want to start something new. With an emphasis on the basics we'll look at the files suggested in our previous post on Getting Started with WordPress Theme Design and by tomorrow night (roughly 4 posts away) we'll have our first test theme ready.

In this post we'll work briefly with the header.php and footer.php files. We'll create some basic structures in the files and get them ready for when we really take on the brunt of actually designing the page.

Let's start with the Header.

Header.php and WordPress

For both the main portions of the header and footer we need look no further than the basic HTML document structure. While we will add a special tag to the Header 90% of what we need will be traditional HTML. If you've ever done HTML work before you'll see this is actually extremely easy.

When writing an HTML document standards dictate the existence of certain tags. The <html>, <head>, <title>, and <body> tag will play prominently in the header along with a quick call to our stylesheet - but we'll get to the stylesheet in a second.

To get started your basic header.php file should look like this:
<html>
<head>
<title> </title>
<link rel="stylesheet" href="*" type="text/css" media="screen" />
</head>
<body>
With the exception of the <link> tag you may be familiar with everything above. The link tag is simply used to call our stylesheet so that when we get around to styling the page we can jump right into the CSS - we'll get to that in a later post though.

Having WordPress grab the Stylesheet

As it stands above the header isn't yet grabbing the stylesheet. In order to accomplish this we need to use our first piece of WordPress specific code ... the 'bloginfo()' tag.

The bloginfo() tag is basically WordPress' built in 411 (information) directory. Using general information about your blog this tag can generate everything from your theme directory to the blogs title. For the purposes of this post we'll be using it to grab the URL of the stylesheet.

In the code provided above simply replace the asterisk with "<?php bloginfo('stylesheet_url'); ?>" and you're set. Once the basics of your theme are put together you'll see WordPress putting replace that tag with the stylesheet's URL and your theme will be able to correctly grab the CSS for your blog design.

footer.php and WordPress

The footer is going to be a lot easier. In your footer.php just close the body and html tags and you're set. Your footer.php file should look like this:
</body>
</html>
Simple right?

In our next post we'll deal with building the index.php file so that we can actually get our theme running in the sandbox.



Comments are closed.