Making a WordPress Theme
You are here: Home > Visitor > Tutorials > Making a WordPress Theme
WordPress is wonderful in that all you need to do is give it the pages and it does all the work for you. Isn’t technology great?
Terminology
First, I have one piece of terminology to explain to lessen confusion and frustration. I use the phrase, ‘WordPress Dashboard’ or I may just say ‘Dashboard.’ This is where you login into WordPress.
For a WordPress theme to work effectively you need these pages.
404.php
comments.php
footer.php
header.php
index.php
page.php
search.php
single.php
functions.php
style.css
This may all look intimadating but don’t worry I’ll walk you through it. You can get the same code that I’ll be showing you from the WordPress Default theme that should be in your program too.
Make a folder in Wordrpess>wp-content>themes
You can name it anything. Then create all the files I listed above. All you have to do is put the name and file extension in. You can even copy them from here and then paste them in.
Our layout will consist of four pages.
header.php
footer.php
sidebar.php
and then there will be a content.php but we will use multiples of these with different names for different WordPress jobs, which I’ll explain later.
Header.php
This is what you will be putting in the header document. You can just read through it first and then copy the code at the end.
This is your doctype delcaration which is very important if you want validated code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
These are your html and head beginning tags. The first time I saw the head and html tags like this I didn’t recognize them. I put another set of them in the code totally ruining the layout, so don’t worry this part of the layout it is here. 
:
<html xmlns="http://www.w3.org/1999/xhtml" <?php language_attributes(); ?>>
<head profile="http://gmpg.org/xfn/11">
This is where your character encoding info is. It is automatically generated by WordPress from information in your dashboard. You can change any part of this by clicking ‘Reading’ under ‘Settings’ in the dashboard. You also need this for validated code and to make sure your browser displays your text correctly:
<meta http-equiv="Content-Type" content="<?php bloginfo('html_type'); ?> charset=<?php bloginfo('charset'); ?>" />
This is one of your favorite lines of code in the header. This tells the browser to make your page title: “Page Name-Site Name”
This means that the current page being viewed’s name will appear in the browser title. It won’t remain a static site name:
<title><?php wp_title('«', true, 'right'); ?> <?php bloginfo('name'); ?></title>
Hopefully you use css. This automatically links your page to the css document that you will have in your theme folder. You can use internal style sheets but in my opinion external style sheets are a lot easier and WordPress makes it even easier to use. Usually the style sheets are named ‘style’ so it’s full name would be style.css
<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" media="screen" />
This enables pingback. In WordPress blogs if you link to another blog then WordPress will tell that blog owner. And/Or if someone linked your blog WordPress will let you know. This only works between people who have WordPress blogs. :
<link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" />
Now and finally the head is closed.
</head>
Moving to the next step for header.php: our structure!
This is how I usually structure my layouts. You don’t have to do the same.
<body>
<div id="header">
</div>
<div id="container">
I stopped. But that isn’t it, don’t worry. If you’ve worked with php includes you know the deal. But for you who haven’t, your layout as I have said is spread through 4 different pages so essentially the actual layout is in four different pages. The order of coding proceeds the same as if you had coded the layout to be on a single page.
When you view the source of your webpage you will be able to see all your code seemlesly. You won’t be able to tell you have four different pages.
One thing I suggest for layouts in php includes is, since many people use a container to get their sidebar and content divs right beside each other, to save necessary time changing something on every page it is a good idea for you to put the container and any other divs outside of the sidebar and content divs here in the header portion of the layout instead of in each individual ‘content’ page. We have several ‘content’ pages because we will have different types of content we will want to display. From search results to 404: not found. And if for some reason we change the structure of the layout it is easier to change those divs in one place than hopping from page to page.
Another thing to watch out for is your ending div tags. These need to be in the right place of course and ending tags need to be </div> not <div> or </div It is easy to make such a mistake but to make that mistake might be diastourous for your layout.
If you get confused just view your website in the browser and then view the source. Or you could also tell yourself which div you are ending by placing comment tags by the ending tags such as:
</div> <- -content- ->
The header.php is also a good place to put your site navigation.
Here is all the code you just learned. Now you can paste it in your header.php:
<!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 profile="http://gmpg.org/xfn/11">
<meta http-equiv="Content-Type" content="<?php bloginfo('html_type'); ?> charset=<?php bloginfo('charset'); ?>" />
<title><?php wp_title('«', true, 'right'); ?> <?php bloginfo('name'); ?></title>
<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" media="screen" />
<link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" />
</head>
<body>
<div id="header">
</div>
<div id="container">
Because I’ve taken so many words to explain this I’ll make a part 2. And don’t worry you’ve gotten through the hardest part. The rest is a breeze.
