Making a WordPress Theme

Okay so you just got WordPress but you have no idea how to make your own theme. This tutorial is going to show you how to. I will try to keep it detailed and easy.  Okay there are a few files that you will need:

  • comments.php
  • footer.php
  • header.php
  • index.php
  • page.php
  • sidebar.php

Alright let’s get started. Make sure to read everything carefully and do not try to skip anything.

The first thing you want to do is make a folder, name it whatever you want your theme to be called. Now inside that folder, you should have all the files listed above. We will be starting with:

Header.php

Your header contains your DTD, <html> <head> and <body> and others. The basic code in your header, looks a little something 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" xml:lang="en" lang="en">
<head>
<title><?php bloginfo(’name’); ?></title>
<?php wp_head(); ?>
<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" media="screen" />
<link rel="alternate" type="application/rss+xml" title="RSS 2.0" href="<?php bloginfo('rss2_url'); ?>" />
<link rel="alternate" type="text/xml" title="RSS .92" href="<?php bloginfo('rss_url'); ?>" />
<link rel="alternate" type="application/atom+xml" title="Atom 0.3" href="<?php bloginfo('atom_url'); ?>" />
<link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" />
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
</head>
<body>
<div id="header"></div>
<div id="container">
<?php get_sidebar(); ?>
<div id="content">

Footer.php

You footer is the bottom part of your website that has things like: Valid CSS & XHTML or Theme made by: Your name here. You can add whatever you want there as long as it’s not too crowded. The code that goes into that file are: </div> <!-- closes content div -->
<div id="footer">
This is your footer. &copy; Your site 2009 &middot; WordPress Theme By <a href="http://yoursite.com">Your site name</a><br />
Valid <a href="http://validator.w3.org/check?uri=referer">XHTML</a> &amp; <a href="http://jigsaw.w3.org/css-validator/check/referer">CSS 2.1</a>
</div>
</div> <!-- closes container div -->
<br />
</body>
</html>

Sidebar.php

Your sidebar is well, your sidebar. You can add your sidebar to your header.php but give it its on file makes it more organized. <div id="sidebar">
<h2>Sidebar</h2>
This is your sidebar, you can add whatever you like to it. For example, site statistics, affiliates, layout information, and so on.
<h2>Sidebar</h2>
This is your sidebar, you can add whatever you like to it. For example, site statistics, affiliates, layout information, and so on.
<h2>Sidebar</h2>
This is your sidebar, you can add whatever you like to it. For example, site statistics, affiliates, layout information, and so on.
</div> <!-- closes sidebar div -->

Style.css

Your CSS is coded the same way that you code your normal layouts. The main codes that you should have in there are: body, html {
padding : 0;
margin : 0;
}
body {
background: #F7F7F4 url() repeat-x;
text-align: justify;
margin: 0;
padding: 0;
color: #0A0A0A;
font-family: Tahoma;
font-size: 8pt;
line-height: 15pt;
margin-bottom: 5px;
margin-top: 0px;
}
#container {
margin : 0 auto;
text-align : left;
width: 900px;
margin-top: 0px;
background : #F2F1EA;
border-top:1px solid #E7E7E7;
border-left:1px solid #E7E7E7;
border-right:1px solid #E7E7E7;
}
#header {
height:212px;
width: 960px;
background: url(img/header.png) no-repeat center top;
text-align:center;
margin : 0 auto;
}
#sidebar {
width: 250px;
float: right;
margin-bottom: 20px;
padding: 10px;
}
#content {
width: 600px;
padding: 10px;
margin-bottom: 20px;
float: left;
}
#footer {
clear:both;
text-align:center;
background:#C8E7E4;
padding:10px;
height:40px;
border-bottom:1px solid #E7E7E7;
border-top:1px solid #E7E7E7;
} Those codes are on the files you just made so you must have them on your CSS. Feel free to edit the way you want.

Comments.php

There are so many different way to customize this. It all depends all they way you want it to be. <?php // Do not delete these lines
if ('comments.php' == basename($_SERVER['SCRIPT_FILENAME']))
die ('Please do not load this page directly. Thanks!');
if (!empty($post->post_password)) { // if there's a password
if ($_COOKIE['wp-postpass_' . COOKIEHASH] != $post->post_password) { // and it doesn't match the cookie
?>
<p><?php _e("This post is password protected. Enter the password to view comments."); ?><p>
<?php
return;
}
}
/* This variable is for alternating comment background, thanks Kubrick */
$oddcomment = 'alt';
?>
<!-- You can start editing here. -->
<?php if ($comments) : ?>
<?php foreach ($comments as $comment) : ?>
Thank You <a href="<?php comment_author_url(); ?>"> <?php comment_author(); ?></a>
<?php comment_text() ?>
<em>Commented On <?php comment_date('F jS, Y') ?> @ <?php comment_time() ?></a></em>
<br /><br />
</li>
<?php
if ('alt' == $oddcomment) $oddcomment = '';
else $oddcomment = 'alt';
?>
<?php endforeach; /* end for each comment */ ?>
</ol>
<br /> <br />
<?php else : // this is displayed if there are no comments so far ?>
<?php if ('open' == $post-> comment_status) : ?>
<?php /* No comments yet */ ?>
<?php else : // comments are closed ?>
<?php /* Comments are closed */ ?>
<p><?php _e('Comments are closed.'); ?></p>
<?php endif; ?>
<?php endif; ?>
<?php if ('open' == $post-> comment_status) : ?>
<?php if ( get_option('comment_registration') && !$user_ID ) : ?>
<p><?php _e('You must be'); ?> <a href="<?php echo get_option('siteurl'); ?>/wp-login.php?redirect_to=<?php the_permalink(); ?>"><?php _e('logged in'); ?></a> <?php _e('to post a comment.'); ?></p>
<?php else : ?>
<form action="<?php echo get_option('siteurl'); ?>/wp-comments-post.php" method="post" id="commentform">
<?php if ( $user_ID ) : ?>
<p><?php _e('Logged in as'); ?> <a href="<?php echo get_option('siteurl'); ?>/wp-admin/profile.php"><?php echo $user_identity; ?></a>. <a href="<?php echo get_option('siteurl'); ?>/wp-login.php?action=logout" title="<?php _e('Log out of this account') ?>"><?php _e('Logout'); ?> &raquo;</a></p>
<?php else : ?>
<p>
<input type="text" class="input" name="author" id="author" value="<?php echo $comment_author; ?>" size="30" tabindex="1" />
<label for="author"><?php _e('Name'); ?> <?php if ($req) _e('(required)'); ?></label>
</p>
<p>
<input type="text" class="input" name="email" id="email" value="<?php echo $comment_author_email; ?>" size="30" tabindex="2" />
<label for="email"><?php _e('E-mail'); ?> <?php if ($req) _e('(required)'); ?></label>
</p>
<p>
<input type="text" class="input" name="url" id="url" value="<?php echo $comment_author_url; ?>" size="30" tabindex="3" />
<label for="url">Website</label>
</p>
<?php endif; ?>
<textarea name="comment" class="textarea" id="comment" cols="45" rows="5" tabindex="4"></textarea>
</p>
<p>
<input class="button" name="submit" type="submit" id="submit" tabindex="5" value="<?php _e('Submit Comment'); ?>" />
<input type="hidden" name="comment_post_ID" value="<?php echo $id; ?>" />
</p>
<?php do_action('comment_form', $post->ID); ?>
</form>
</p>
<?php endif; // If registration required and not logged in ?>
<?php endif; // if you delete this the sky will fall on your head ?>

That code basically shows the way your comment form, and comment page will look like once you or a visitor clicks “comment” on your blog.

Index.php

This is the most important page you will need. Without this page, everything falls apart. You cannot a website without an index. The index has your blog, it determines what your blog will look like.

<?php get_header(); ?>
<?php if (have_posts()) : ?>
<?php $post = $posts[0]; // Thanks Kubrick for this code ?>
<?php if (is_category()) { ?>
<h3><?php _e(‘Archive for ‘); echo single_cat_title(); ?></h3>
<?php } elseif (is_day()) { ?>
<h3><?php _e(‘Archive for ‘); the_time(‘F j, Y’); ?></h3>
<?php } elseif (is_month()) { ?>
<h3><?php _e(‘Archive for ‘); the_time(‘F, Y’); ?></h3>
<?php } elseif (is_year()) { ?>
<h2><?php _e(‘Archive for ‘); the_time(‘Y’); ?></h2>
<?php } elseif (is_author()) { ?>
<h3><?php _e(‘Author Archive’); ?></h3>
<?php } elseif (is_search()) { ?>
<h3><?php _e(‘Search Results’); ?></h3>
<?php } ?>
<?php while (have_posts()) : the_post(); ?>
<?php get_header(); ?>
<?php if (have_posts()) : ?> <?php $post = $posts[0]; // Thanks Kubrick for this code ?> <?php if (is_category()) { ?> <h3><?php _e(‘Archive for ‘); echo single_cat_title(); ?></h3> <?php } elseif (is_day()) { ?><h3><?php _e(‘Archive for ‘); the_time(‘F j, Y’); ?></h3> <?php } elseif (is_month()) { ?><h3><?php _e(‘Archive for ‘); the_time(‘F, Y’); ?></h3>
<?php } elseif (is_year()) { ?><h2><?php _e(‘Archive for ‘); the_time(‘Y’); ?></h2>
<?php } elseif (is_author()) { ?><h3><?php _e(‘Author Archive’); ?></h3>
<?php } elseif (is_search()) { ?><h3><?php _e(‘Search Results’); ?></h3><?php } ?><?php while (have_posts()) : the_post(); ?>
<h1><?php the_title(); ?></h1>
<h4><?php the_time(’F j, Y’) ?> at <?php the_time() ?> · Filed Under <?php the_category(’, ‘) ?> · <?php comments_popup_link(__(’Comment?’), __(’1 Comment’), __(’% Comments’), ‘commentslink’, __(’sorry, Comments off for this post.’)); ?></h4></div>
<?php the_content(’Read the rest of this entry…’); ?>
<?php comments_template(); // Get wp-comments.php template ?>
<?php endwhile; ?>
<?php else : ?>
<div align=”center”>Not Found</div>
<?php _e(”Sorry, but you are looking for something that isn’t here.”); ?>
<?php include (TEMPLATEPATH . “/searchform.php”); ?>
<?php endif; ?>
<?php get_footer(); ?>

Page.php

This files shows how the pages on your site will look.

<?php
/**
* @package WordPress
* @subpackage Default_Theme
*/
get_header(); ?>
<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
<div class="post" id="post-<?php the_ID(); ?>">
<h1><?php the_title(); ?></h1>
<div class="entry">
<?php the_content('Read the rest of this page &raquo;'); ?>
<?php wp_link_pages(array('before' => '<strong>Pages:</strong> ', 'after' => '', 'next_or_number' => 'number')); ?>
</div>
<?php endwhile; endif; ?>
</div>
<?php get_footer(); ?>

Post to Twitter