Make Your Own WordPress Theme

template wordpressWordPress has become the most successful and very powerful blogging platform. You can easily make fully loaded blog website using WordPress, or integrate WordPress blogging power into your existing website. There are thousands of free and paid themes for WordPress available online. But if you want to customize WordPress theme to your own design or integrate with the design of your existing website, you’ve come to the right tutorial. By understanding just a few steps below you’ll be able to create your very own WordPress theme.

This tutorial is for a WordPress 2.x theme design and requires basic understanding of HTML, CSS and PHP. (I’ll be posting another tutorial for WordPress 3.0 theme design soon so keep checking back.)

Pre-Requisites:

* The first step is to create a design for your template, the layout of how you want it to look. (In this tutorial I’m going to use my theme VeryBasic currently used on this website).

* Once you have your design convert it into and xHTML/CSS webpage, then divide it into different sections for your template e.g header (top portion of the website), content (where all the pages and posts display), sidebars for adding links, advertisements, although you can make a template without the widget support, it helps immensely if you add the widget support for sidebars.

* If you already have wordpress running and you have access to the wp-content folder you can skip to templating step, If you need to setup WordPress follow directions below.

* WordPress is PHP based system, so to set it up you need to have a server environment (Apache, IIS or Server that run PHP). Having a server configured on your local machine make things a lot faster and easier, if you don’t have a localhost on your local system you can set one up using XAMP or work on your online hosting account.

* After downloading WordPress from wordpress.org, extract all files in to your server root directory or the directory where you want to install your blog e.g http://localhost/wp/ or http://yourdomains.com/blog/.

* Create the database for your WordPress and using the database complete the wordpress installation process.

* After successful installation go to your WordPress directory and create a new folder in the wp-content/themes folder and give it the name you want to theme name (without space). This folder is where you’re going to place all your theme files.

Templating Steps

I’m including the code first and then explaining every step in the code to show how to use it in your theme.

* In your theme folder create the following files

header.php

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.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 bloginfo(‘name’); ?> <?php if ( is_single() ) { ?> &raquo; Blog Archive <?php } ?> <?php wp_title(); ?></title>

<link rel=”alternate” type=”application/rss+xml” title=”<?php bloginfo(‘name’); ?> RSS Feed” href=”<?php bloginfo(‘rss2_url’); ?>” />
<link rel=”pingback” href=”<?php bloginfo(‘pingback_url’); ?>” />
<link rel=”stylesheet” href=”<?php bloginfo(‘stylesheet_url’); ?>” type=”text/css” media=”screen” />
<!–[if IE]><link rel=”stylesheet” type=”text/css” href=”<?php bloginfo(‘stylesheet_directory’); ?>/ie.css” media=”screen” /><![endif]–>

<?php wp_head(); ?>
</head>

<body>

<div id=”container”>

<div id=”header”>

<div id=”title”><h1><a href=”<?php echo get_option(‘home’); ?>/”><?php bloginfo(‘name’); ?></a></h1>
<div id=”subtitle”><h2><?php bloginfo(‘description’); ?></h2></div></div>
<div id=”ad”><?php include ‘adsense/468×60.php’; ?></div>
</div>

<div id=”nav”>
<ul>
<li <?php if(!is_page()) echo ‘class=”current_page_item”‘; ?>></li>
<?php wp_list_pages(‘title_li=’); ?>
</ul>
<div id=”search”><?php get_search_form(); ?></div>
</div>

<div id=”wrapper”>

index.php

<?php get_header(); ?>

<div id=”content”>

<?php if (have_posts()) : ?>

<?php while (have_posts()) : the_post(); ?>

<div id=”post-<?php the_ID(); ?>”>
<h1><a href=”<?php the_permalink() ?>” rel=”bookmark” title=”Permanent Link to <?php the_title_attribute(); ?>”><?php the_title(); ?></a></h1>

<?php the_content(‘Read the rest of this entry &raquo;’); ?>

<div>
<?php the_time(‘F jS, Y’) ?> in
<?php the_category(‘, ‘); ?>
<?php the_tags(‘| tags: ‘, ‘, ‘, ”); ?> |
<?php comments_popup_link(‘<strong>No Comments</strong>’, ‘<strong>1 Comment</strong>’, ‘<strong>% Comments</strong>’); ?>
</div>
</div>

<?php comments_template(); ?>
<?php endwhile; ?>

<div id=”pages”>
<a href=”#”><?php next_posts_link(‘&larr;Older’) ?></a>&nbsp;&nbsp;&nbsp;<a href=”#”><?php previous_posts_link(‘Newer&rarr;’) ?></a>
</div>

<?php else : ?>

<h1>Not Found</h1>
<p>Sorry, but you are looking for something that isn’t here.</p>

<?php endif; ?>

</div>

<?php get_sidebar(); ?>
<?php get_footer(); ?>

sidebar.php

<div id=”sidebar”>
<?php if ( !function_exists(‘dynamic_sidebar’) || !dynamic_sidebar() ) : ?>

<div>
<h3>Categories</h3>
<ul>
<?php wp_list_categories(‘orderby=name&show_count=0&title_li=’); ?>
</ul>
</div>

<div>
<h3>Archive</h3>
<ul>
<?php wp_get_archives(‘type=monthly’); ?>
</ul>
</div>

<div>
<h3>Blogroll</h3>
<ul>
<?php wp_list_bookmarks(‘title_li=&categorize=0’); ?>
</ul>
</div>

<div>
<h3>Meta</h3>
<ul>
<?php wp_register(); ?>
<li><?php wp_loginout(); ?></li>
<li><a href=”http://validator.w3.org/check/referer” title=”This page validates as XHTML 1.0 Transitional”>Valid <abbr title=”eXtensible HyperText Markup Language”>XHTML</abbr></a></li>
<li><a href=”http://gmpg.org/xfn/”><abbr title=”XHTML Friends Network”>XFN</abbr></a></li>
<li><a href=”http://wordpress.org/” title=”Powered by WordPress, state-of-the-art semantic personal publishing platform.”>WordPress</a></li>
<?php wp_meta(); ?>
</ul>
</div>

<?php endif; ?>
</div>

footer.php

</div>
<div id=”footer”>
<p>Copyright &copy; All right reserved by <a href=”<?php bloginfo(‘home’); ?>”> <strong><?php bloginfo(‘name’);?></strong></a> Theme Design Copyright &copy; of <a href=”http://www.templatewordpress.com” title=”Theme Designed by TemplateWordpress.com”>TemplateWordpress.com</a></p>
<p> <a href=”http://www.adsenseaffiliate.com” title=”Adsense Affiliate – Let your website make money for you”>AdsenseAffiliate.com – Let your website make money for you</a> | Powered by <a href=”http://wordpress.org/”><strong>WordPress</strong></a> </p>

</div>
</div>
</body>
</html>

comments.php

<?php // Do not delete these lines
if (!empty($_SERVER[‘SCRIPT_FILENAME’]) && ‘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>This post is password protected. Enter the password to view comments.</p>

<?php
return;
}
}
?>

<?php if ($comments) : ?>

<h1><?php comments_number(‘0 Comments’, ‘1 Comment’, ‘% Comments’ );?></h1>

<div id=”comments”>

<?php foreach ($comments as $comment) : ?>
<div id=”comment-<?php comment_ID() ?>”>

<div>
<?php echo get_avatar( $comment, 50 ); ?>
</div>

<div>
<div><span><?php comment_author_link() ?></span><?php comment_date(‘F jS, Y’) ?> at <?php comment_time() ?> <?php edit_comment_link(‘edit’,’&nbsp;&nbsp;’,”); ?></div>

<?php if ($comment->comment_approved == ‘0’) : ?>
<em>Your comment is awaiting moderation.</em>
<?php endif; ?>

<?php comment_text() ?>
</div>
</div>
<?php endforeach; ?>

</div>

<?php else : // this is displayed if there are no comments so far ?>

<?php if (‘open’ == $post->comment_status) : ?>
<!– If comments are open, but there are no comments. –>
<?php else : // comments are closed ?>
<!– If comments are closed. –>
<?php endif; ?>

<?php endif; ?>

<?php if (‘open’ == $post->comment_status) : ?>

<h1>Leave a comment</h1>

<?php if ( get_option(‘comment_registration’) && !$user_ID ) : ?>
<p>You must be <a href=”<?php echo get_option(‘siteurl’); ?>/wp-login.php?redirect_to=<?php echo urlencode(get_permalink()); ?>”>logged in</a> to post a comment.</p>
<?php else : ?>
<form action=”<?php echo get_option(‘siteurl’); ?>/wp-comments-post.php” method=”post” id=”commentform”>
Your comment
<p><textarea name=”comment” id=”comment”></textarea></p>

<?php if ( $user_ID ) : ?>
<p>Logged in as <a href=”<?php echo get_option(‘siteurl’); ?>/wp-admin/profile.php”><?php echo $user_identity; ?></a>&nbsp;&nbsp;&nbsp;<a href=”<?php echo get_option(‘siteurl’); ?>/wp-login.php?action=logout” title=”Log out of this account”>Log out</a></p>
<?php else : ?>
<p><input type=”text” name=”author” id=”author” value=”<?php echo $comment_author; ?>” />
<label for=”author”>Name <?php if ($req) echo “(required)”; ?></label></p>

<p><input type=”text” name=”email” id=”email” value=”<?php echo $comment_author_email; ?>” />
<label for=”email”>Mail (will not be published) <?php if ($req) echo “(required)”; ?></label></p>

<p><input type=”text” name=”url” id=”url” value=”<?php echo $comment_author_url; ?>” />
<label for=”url”>Website</label></p>
<?php endif; ?>

<?php do_action(‘comment_form’, $post->ID); ?>

<p><input name=”submit” type=”submit” id=”submit” value=”Submit Comment” /><input type=”hidden” name=”comment_post_ID” value=”<?php echo $id; ?>” /></p>

</form>

<?php endif; // If registration required and not logged in ?>

<?php endif; // if you delete this the sky will fall on your head ?>

style.css

/*
Theme Name: VeryBasic
Theme URI: http://www.templatewordpress.com/theme/
Description: Simple Basic Theme.
Version: 1.1
Author: M.Butt
Author URI: http://www.wasif.me
*/

/* Reset
——————————————————————-*/
* { padding: 0; margin: 0; }
ul, ol { list-style: none; list-style-position: inside; }
ol ol, ul ul, ol ul, ul ol { margin-left: 20px; margin-bottom: 0; }
img { border: none; }

/* Body
——————————————————————-*/
body {
font: 14px Helvetica, Arial, Geneva, sans-serif;
color: #333;
background: #fafafa url(images/bg.gif);
}

h1, h2, h3, h4, h5,h6 { font-family: Helvetica, Arial, Geneva, Sans-Serif; font-weight: normal; color: #333; }
h1 { font-size: 22px; line-height: 26px; margin-bottom: 10px; }
h2 { font-size: 20px; line-height: 24px; margin-bottom: 7px; }
h3 { font-size: 18px; line-height: 22px; margin-bottom: 5px; }
h4 { font-size: 16px; line-height: 20px; margin-bottom: 5px; }
h5 { font-size: 14px; line-height: 18px; margin-bottom: 5px; }
h6 { font-size: 12px; line-height: 16px; margin-bottom: 5px; }

h1 span { color: #999; }

a { color: #5371c5; text-decoration: none; }
a:hover { color: #5371c5; text-decoration: underline; }
a:visited { color: #5371c5; }

p { margin-bottom: 10px; }

input, textarea { font: 12px Verdana, Helvetica, Arial, Geneva, sans-serif; }

blockquote {
font: italic 14px/22px Georgia, Serif;
padding: 5px 10px;
margin-bottom: 20px;
background: #eef3f7;
}

/* Container
——————————————————————-*/
#container {
width: 950px;
padding-bottom: 10px;
margin: 20px auto 20px auto;
overflow: hidden;
}
#container #wrapper {
width: 950px;
float: left;
overflow: hidden;
background: #fff url(images/side-bg.gif) repeat-y top right;
}

/* Header
——————————————————————-*/
#header {
width: 950px;
height: 100px;
}
#header #title{
float:left;
width:400px;
height:60px;
}

#header #title h1 {
font: 30px Helvetica, Verdana;
padding: 15px 0 0 15px;
margin-bottom: 0;
}
#header #title h1 a {
color: #fff;
text-shadow: 1px 2px 2px #333;
text-decoration: none;
}

#header #title #subtitle{
margin: 5px 0 0 0;
height: 40px;
overflow:hidden;
}

#header #title #subtitle h2 {
float: left;
padding: 1px 0 0 20px;
font-size: 16px;
text-shadow: 1px 2px 2px #333;
color: #fff;
}

#header #ad{
float:right;
width:468px;
height:60px;
padding: 15px 30px 0 0;
text-align:right;
}

/* Navigation
——————————————————————-*/
#nav {
width: 970px;
float: left;
height: 40px;
background: #fff url(images/nav.gif) repeat;
position: relative;
}
#nav ul {
margin-left: 5px;
}
#nav ul li {
display: inline;
margin-right: 20px;
padding-top: 5px;
}
#nav ul li a {
font-weight: bold;
text-shadow: 1px 2px 2px #fff;
text-decoration: none;
color: #444;
line-height: 33px;
}
#nav ul li a:hover {
color: #777;
text-shadow: 1px 2px 2px #0066FF;
}
#nav a, #nav a:visited {
padding: 1px 10px 1px 10px;
font-weight: bold;
}
#nav li{
float: left;
}
#nav li ul {
position: absolute;
width: 220px;
height: auto;
left: -999em;
margin: 0;
padding: 0;
background: #fff url(images/nav.gif) repeat;
}
#nav li li a, #nav li li a:link, #nav li li a:visited {
padding: 9px 10px 9px 10px;
}
#nav li li a:hover {
text-decoration:underline;
}
#nav li ul ul {
margin: -25px 0px 0px 160px;
}
#nav li:hover ul ul, #nav li.sfhover ul ul {
left: -999em;
}
#nav li:hover ul, #nav li li:hover ul{
left: auto;
}

#nav #search {
float:right;
width: 270px;
height: 25px;
padding: 10px 0 5px 0;
line-height: 1px;
font: normal 12px Verdana, Sans-Serif;
color: #777;
border: 0;
}

/* Search
——————————————————————-*/
#adline {
width: 950px;
height: 25px;
float:left;
background: #fff url(images/nav.gif) repeat;
padding-top: 5px;
margin-bottom: 1px;
}
#adline #ad{
float: left;
width: 600px;
height: 45px;
padding: 0 0 0 32px;
}
#adline #feed a {
float:right;
padding: 0 0 0 20px;
margin: 0 60px 0 20px;
background: url(images/rss.gif) no-repeat;
}
#adline #tweet a {
float:right;
padding: 0 0 0 20px;
margin: 0 0 0 20px;
background: url(images/twitter.gif) no-repeat;
}
#adline #fb a {
float:right;
padding: 0 0 0 20px;
margin: 0 0 0 20px;
background: url(images/fb.gif) no-repeat;
}

/* Content
——————————————————————-*/
#content {
width: 620px;
float: left;
padding: 15px;
background: #fff;
}

#content .post {
margin-bottom: 40px;
}
#content .post h1.post-title {
color: #444;
padding-left:15px;
border-bottom: 1px solid #d6e1e3;
}
#content .post h1.post-title a {
text-decoration: none;
color: #444;
}

#content .post .post-info {
clear: both;
font-size: 14px;
color: #777;
padding: 3px 5px 3px 5px;
margin-bottom: 20px;
border-top: 1px solid #bdccdc;
border-bottom: 1px solid #bdccdc;
background: #e9eff5;
}
#content .post .post-info a { color: #333; text-decoration:none; }
#content .post .post-info a:hover { color: #555; text-decoration:none; }

#content #pages { text-align: center; }
#content #pages a { font: bold 20px Helvetica, sans-serif; color: #414d4c; text-decoration: none; }
#content #pages a:hover { color: #1e2726; }

#content ul, ol, dl { margin-bottom: 20px; }
#content ul {
list-style: disc;
list-style-position: inside;
}
#content ol {
list-style: decimal;
list-style-position: inside;
}
#content dl dt {
font-weight: bold;
}
#content dl dd {
font-style: italic;
margin: 0 0 5px 20px;
color: #555;
}

.aligncenter { margin-left: auto; margin-right: auto; }
.alignleft { float: left; margin: 5px 15px 10px 0; }
.alignright { float: right; margin: 5px 0 10px 15px; }

/* Comment Form
——————————————————————-*/
#commentform {
background: #fafafa;
border: 5px solid #def7f8;
padding: 10px;
color: #555;
}
#commentform p { margin-bottom: 7px; }
#commentform textarea {
width: 620px;
border: 1px solid #aaa;
height: 120px;
}
#commentform input.text {
width: 150px;
border: 1px solid #aaa;
margin-right: 10px;
padding: 3px 3px;
}
#commentform input#submit { padding: 3px 10px; }

/* Comments
——————————————————————-*/
#comments .comment {
width: 620px;
background: #def7f8;
margin-bottom: 10px;
overflow: hidden;
padding-bottom: 5px;
border-top: 1px solid #ddd;
border-bottom: 1px solid #ddd;
}
#comments .comment .comment-avatar {
width: 50px;
float: left;
padding: 5px 7px;
}

#comments .comment .comment-content {
width: 570px;
float: left;
padding: 10px 15px;
margin: 5px 5px 0 0;
background: #fafafa ;
}
#comments .comment .comment-content a { color: #444; }

#comments .comment .comment-info {
font-size: 11px;
color: #777;
margin-bottom: 5px;
}
#comments .comment .comment-info span {
font: bold 20px Helvetica, Arial, Geneva;
padding-right: 10px;
margin-bottom: 5px;
}
#comments .comment .comment-info a {
color: #444;
text-decoration: none;
}

/* Sidebar
——————————————————————-*/
#sidebar {
width: 300px;
float: right;
font-size: 13px;
color: #444;
line-height:1.6em;
margin-bottom: 15px;
}
#sidebar h3 {
font: bold 12px Verdana;
color: #333;
}

#sidebar a { color: #333; text-decoration: none; }
#sidebar a:hover { color: #777; text-shadow: 1px 2px 2px #0066FF; }

#sidebar .block {
padding: 15px;
overflow: hidden;
background: url(images/pixel.gif) no-repeat top center;
}
#sidebar .block ul li {
padding-left: 18px;
background: url(images/arrow.gif) no-repeat 0px 3px;
}

/* Footer
——————————————————————-*/
#footer {
width: 950px;
height: 55x;
float: left;
text-align:center;
clear: both;
position: relative;
background: #d6e1e3 url(images/bar.gif) repeat-x;
}
#footer p {
line-height: 28px;
color: #444;
padding-left: 15px;
font-size: 11px;
margin: 0;
}
#footer a {
color: #555;
text-decoration: underline;
}

functions.php - to enable widgets

<?php
if ( function_exists(‘register_sidebar’) )
register_sidebar(array(
‘before_widget’ => ‘<div>’,
‘after_widget’ => ‘</div>’,
‘before_title’ => ‘<h3>’,
‘after_title’ => ‘</h3>’,
));
?>

I’m including the code first and then explaining every step and showing how to use it in your theme.

Now open the xHTML and css files that you divided in the prerequisite step follow these steps:

header.php

* The header file should include the top portion of the website which is going to stay the same throughout the website pages and posts.

* Place code starting from the DOCTYPE definition, and the start and end of <head></head> tags, and begining of BODY and maybe your Horizontal site navigation and categories etc. (In the VeryBasic theme I only included the title, subtitle adsense ad space, page navigation, adsense link ads, search box and a few social icons.)

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.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’); ?>” />

Note: I’m not using any javascript file in my theme but if you are planning to put some scripts in your header tags try not to put absolute links in the theme other than external links, all links to your script files e.g .js need to follow example <?php bloginfo(‘stylesheet_directory’); ?> is used to return your theme URL which should be similar to http://root/wordpress/wp-content/themes/yourthemename.

* The <title></title> Tag

<title><?php bloginfo(‘name’); ?> <?php if ( is_single() ) { ?> &raquo; Blog Archive <?php } ?> <?php wp_title(); ?></title>

<?php bloginfo(‘name’); ?>—–> returns the title of your WordPress blog
<?php if ( is_single() ) { ?>  —–> condition for checking if you are in the single post page, will be true if the post itself is open and will be false if you are on the main page or a category, so the statement after this condition will not show up.
<?php wp_title(); ?>       ——–> Returns the title of the page or post.

* The <head></head> Tag

<link rel=”alternate” type=”application/rss+xml” title=”<?php bloginfo(‘name’); ?> RSS Feed” href=”<?php bloginfo(‘rss2_url’); ?>” />
<link rel=”pingback” href=”<?php bloginfo(‘pingback_url’); ?>” />
<link rel=”stylesheet” href=”<?php bloginfo(‘stylesheet_url’); ?>” type=”text/css” media=”screen” />
<!–[if IE]><link rel=”stylesheet” type=”text/css” href=”<?php bloginfo(‘stylesheet_directory’); ?>/ie.css” media=”screen” /><![endif]–>

<?php wp_head(); ?>
</head>

add all the WordPress header includes within your HEAD Tag

<?php bloginfo(‘name’); ?> RSS Feed Link
<?php bloginfo(‘pingback_url’); ?>
Ping back url
<?php bloginfo(‘stylesheet_url’); ?> Style sheet rel link

* To show your (link it to the blog home) and Tagline

<body>

<div id=”container”>

<div id=”header”>

<div id=”title”><h1><a href=”<?php echo get_option(‘home’); ?>/”><?php bloginfo(‘name’); ?></a></h1>
<div id=”subtitle”><h2><?php bloginfo(‘description’); ?></h2></div></div>
<div id=”ad”><?php include ‘adsense/468×60.php’; ?></div>
</div>

<?php echo get_option(‘home’); ?> puts the link to your blog in the href
<?php bloginfo(‘name’); ?>
puts the name of your blog
<?php bloginfo(‘description’); ?> puts the tagline for your blog

* To insert your Navigation or pages and the Search Bar.

<div id=”nav”>
<ul>
<li <?php if(!is_page()) echo ‘class=”current_page_item”‘; ?>></li>
<?php wp_list_pages(‘title_li=’); ?>
</ul>
<div id=”search”><?php get_search_form(); ?></div>
</div>

<div id=”wrapper”>


For naviagtion an unordered list is used to list the pages. The below code generates the page navigation.
<?php if(!is_page()) echo ‘class=”current_page_item”‘; ?> to highlight the current page
<?php wp_list_pages(‘title_li=’); ?> lists all the pages

For search bar I’m using

<?php get_search_form(); ?> which places the code from searchform.php into this div with id search

If you like to place ads or social icons you can place them after the search form, which I have in this theme.

* That’s all for the header file.

sidebar.php

(To enable widgets for the sidebar you need to add an additional file functions.php and few lines of code shown below in step to create functions.php)

* You can choose the look and placement of your sidebars according to your design, you can place it to the left, right or even make sidebar1 and sidebar2 files to add sidebars to both sides. The VeryBasic theme has one sidebar to the right. You can customize your sidebar DIV to make the sidebar wider or to make it  float to the left of your page.

* Now put all the code that you placed in the sidebar file of your prerequisite step in between the sidebar divs.

* To add Categories to the sidebar

<div id=”sidebar”>
<?php if ( !function_exists(‘dynamic_sidebar’) || !dynamic_sidebar() ) : ?>
<!– This line is to check if widgets exist if a widget is registered the code below will be ignored –>

<div>
<h3>Categories</h3>
<ul>
<?php wp_list_categories(‘orderby=name&show_count=0&title_li=’); ?>
</ul>
</div>


The h3 tag contains the title of the block e.g Categories
<?php wp_list_categories(‘orderby=name&show_count=0&title_li=’); ?> lists all the categories in your blog, you can add a lot of customization in the wp_list_categories method for a complete list or properties checkout wordpress codex, you can restrict the number of categories you want to display, change sort options etc. etc.

* To add Archives to your sidebar

<div>
<h3>Archive</h3>
<ul>
<?php wp_get_archives(‘type=monthly’); ?>
</ul>
</div>


Similar to adding the categories the h3 places the title for the block and
<?php wp_get_archives(‘type=monthly’); ?> lists archives based on months of publishing

You can add any whatever you want to show on your sidebar,

<div>
<h3>Blogroll</h3>
<ul>
<?php wp_list_bookmarks(‘title_li=&categorize=0’); ?>
</ul>
</div>

<div>
<h3>Meta</h3>
<ul>
<?php wp_register(); ?>
<li><?php wp_loginout(); ?></li>
<li><a href=”http://validator.w3.org/check/referer” title=”This page validates as XHTML 1.0 Transitional”>Valid <abbr title=”eXtensible HyperText Markup Language”>XHTML</abbr></a></li>
<li><a href=”http://gmpg.org/xfn/”><abbr title=”XHTML Friends Network”>XFN</abbr></a></li>
<li><a href=”http://wordpress.org/” title=”Powered by WordPress, state-of-the-art semantic personal publishing platform.”>WordPress</a></li>
<?php wp_meta(); ?>
</ul>
</div>

<?php endif; ?>
</div>

<?php wp_register(); ?> to add register link

<?php wp_loginout(); ?> login / logout link

advertisement code etc.

footer.php

</div>
<div id=”footer”>
<p>Copyright &copy; All right reserved by <a href=”<?php bloginfo(‘home’); ?>”> <strong><?php bloginfo(‘name’);?></strong></a> Theme Design Copyright &copy; of <a href=”http://www.templatewordpress.com” title=”Theme Designed by TemplateWordpress.com”>TemplateWordpress.com</a></p>
<p> <a href=”http://www.adsenseaffiliate.com” title=”Adsense Affiliate – Let your website make money for you”>AdsenseAffiliate.com – Let your website make money for you</a> | Powered by <a href=”http://wordpress.org/”><strong>WordPress</strong></a>
</div>
</div>
</body>
</html>

The footer file can contains anything that you want to display on the bottom of every page of your website usually it contains the copyright information, site navigation, sitemap, or some additional information e.g.

bake a href to blog home like <?php bloginfo(‘home’); ?> and the blog name like <?php bloginfo(‘name’);?>
Copyright etc.

index.php

* Index is the main template page which basically binds everything into your website theme using PHP includes e.g. header, content, sidebar, footer etc

Including the Header on top of the theme or index page

<?php get_header(); ?>

<?php get_header(); ?> will include the file header.php into the top portion of the index

Adding the Content Area to the theme or index page

<div id=”content”>

<?php if (have_posts()) : ?>

<?php while (have_posts()) : the_post(); ?>

There are two very important sections in this step without these steps the content in your blog may not show up on your website.

1) <?php if (have_posts()) : ?> The if statement which checks if the post or page exists, if it does then the statement is true and we can move to the next important section the while loop.

2) <?php while (have_posts()) : the_post(); ?> This step starts the loop which goes through the posts in your blog and selects them one by one to perform the following actions to display them, and it loops through the posts repeatedly till there are no more posts left to display.

<div id=”post-<?php the_ID(); ?>”>
<h1><a href=”<?php the_permalink() ?>” rel=”bookmark” title=”Permanent Link to <?php the_title_attribute(); ?>”><?php the_title(); ?></a></h1>

<?php the_content(‘Read the rest of this entry &raquo;’); ?>

<div>
<?php the_time(‘F jS, Y’) ?> in
<?php the_category(‘, ‘); ?>
<?php the_tags(‘| tags: ‘, ‘, ‘, ”); ?> |
<?php comments_popup_link(‘<strong>No Comments</strong>’, ‘<strong>1 Comment</strong>’, ‘<strong>% Comments</strong>’); ?>
</div>
</div>

In the code sample above <a href=”<?php the_permalink() ?>” creates a link to the post <?php the_title(); ?> prints the post title and

<?php the_content(‘Read the rest of this entry &raquo;’); ?> creates the readmore link

<?php the_time(‘F jS, Y’) ?> prints the posted on date
<?php the_category(‘, ‘); ?>
prints the category containing the post
<?php the_tags(‘| tags: ‘, ‘, ‘, ”); ?> prints the tags associated with the post
<?php comments_popup_link(‘<strong>No Comments</strong>’, ‘<strong>1 Comment</strong>’, ‘<strong>% Comments</strong>’); ?> this line shows the number of comments on this post.

<?php comments_template(); ?>
<?php endwhile; ?>

<?php comments_template(); ?> Including the leave comment box at the end of each post
<?php endwhile; ?> Finally ending the while loop

<?php comments_template(); ?>
<?php endwhile; ?>

To enable pagination we add the next post link and previous post links

<div id=”pages”>
<a href=”#”><?php next_posts_link(‘&larr;Older’) ?></a>&nbsp;&nbsp;&nbsp;<a href=”#”><?php previous_posts_link(‘Newer&rarr;’) ?></a>
</div>

<?php next_posts_link(‘&larr;Older’) ?> link to previous post

<?php previous_posts_link(‘Newer&rarr;’) ?> link to next or newer post.

<?php else : ?>

<h1>Not Found</h1>
<p>Sorry, but you are looking for something that isn’t here.</p>

<?php endif; ?>

</div>

Now we ad the else statement to display a page not found message if the if statement at the beginning came back false because the page or post was not present on the blog. And then close the if statement using <?php endif; ?>.

<?php get_sidebar(); ?>
<?php get_footer(); ?>

After the content is added in your index page you include the sidebar and the footer.

<?php get_sidebar(); ?> includes the sidebar to the right of the content area
<?php get_footer(); ?> includes the footer at the bottom of the index page.

comments.php

The comments page contains all the comments for the posts or pages and the form which is used to leave comments for any post. what determines how the comments on the post

<?php // Do not delete these lines
if (!empty($_SERVER[‘SCRIPT_FILENAME’]) && ‘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>This post is password protected. Enter the password to view comments.</p>

<?php
return;
}
}
?>

The above code is a little bit advance you can copy that as is but basically it disables direct access to comments.php and if the post is password protected if the person doesn’t have access to the post they should not be able to view the post comments.

<?php if ($comments) : ?>

<h1><?php comments_number(‘0 Comments’, ‘1 Comment’, ‘% Comments’ );?></h1>

<?php if ($comments) : ?> checking if there are any comments
<?php comments_number(‘0 Comments’, ‘1 Comment’, ‘% Comments’ );?> Printing the number of comments.

<div id=”comments”>

<?php foreach ($comments as $comment) : ?>
<div id=”comment-<?php comment_ID() ?>”>

<div>
<?php echo get_avatar( $comment, 50 ); ?>
</div>

<div>
<div><span><?php comment_author_link() ?></span><?php comment_date(‘F jS, Y’) ?> at <?php comment_time() ?> <?php edit_comment_link(‘edit’,’&nbsp;&nbsp;’,”); ?></div>

<?php foreach ($comments as $comment) : ?> using foreach loop to go through all the comments.
<?php echo get_avatar( $comment, 50 ); ?>
printing the avatar.
<?php comment_author_link() ?>
author website link if submitted.
<?php comment_date(‘F jS, Y’) ?> at <?php comment_time() ?> comment date and time
<?php edit_comment_link(‘edit’,’&nbsp;&nbsp;’,”); ?> link to edit the comment (must have access to edit the comment).

<?php if ($comment->comment_approved == ‘0’) : ?>
<em>Your comment is awaiting moderation.</em>
<?php endif; ?>

<?php if ($comment->comment_approved == ‘0’) : ?> if the comment is waiting approval by the admin display the message comment awaiting moderation

<?php comment_text() ?>
</div>
</div>
<?php endforeach; ?>

</div>


<?php comment_text() ?> Display the comment text
<?php endforeach; ?> and close the for loop when all the comments are listed

<?php else : // this is displayed if there are no comments so far ?>

<?php if (‘open’ == $post->comment_status) : ?>
<!– If comments are open, but there are no comments. –>

<?php else : // comments are closed ?>

<!– If comments are closed. –>
<?php endif; ?>

<?php endif; ?>

Now we check to see if comments are open or closed if the user is allowed to comment on the post we display the comment form if the comments are open.

<?php if (‘open’ == $post->comment_status) : ?>

<h1>Leave a comment</h1>

<?php if ( get_option(‘comment_registration’) && !$user_ID ) : ?>
<p>You must be <a href=”<?php echo get_option(‘siteurl’); ?>/wp-login.php?redirect_to=<?php echo urlencode(get_permalink()); ?>”>logged in</a> to post a comment.</p>
<?php else : ?>
<form action=”<?php echo get_option(‘siteurl’); ?>/wp-comments-post.php” method=”post” id=”commentform”>
Your comment
<p><textarea name=”comment” id=”comment”></textarea></p>

<?php if ( $user_ID ) : ?>
<p>Logged in as <a href=”<?php echo get_option(‘siteurl’); ?>/wp-admin/profile.php”><?php echo $user_identity; ?></a>&nbsp;&nbsp;&nbsp;<a href=”<?php echo get_option(‘siteurl’); ?>/wp-login.php?action=logout” title=”Log out of this account”>Log out</a></p>
<?php else : ?>
<p><input type=”text” name=”author” id=”author” value=”<?php echo $comment_author; ?>” />
<label for=”author”>Name <?php if ($req) echo “(required)”; ?></label></p>

<p><input type=”text” name=”email” id=”email” value=”<?php echo $comment_author_email; ?>” />
<label for=”email”>Mail (will not be published) <?php if ($req) echo “(required)”; ?></label></p>

<p><input type=”text” name=”url” id=”url” value=”<?php echo $comment_author_url; ?>” />
<label for=”url”>Website</label></p>
<?php endif; ?>

<?php do_action(‘comment_form’, $post->ID); ?>

<p><input name=”submit” type=”submit” id=”submit” value=”Submit Comment” /><input type=”hidden” name=”comment_post_ID” value=”<?php echo $id; ?>” /></p>

</form>

<?php endif; // If registration required and not logged in ?>

<?php endif; // if you delete this the sky will fall on your head ?>

If the comments are open we check to see if the user registration is required (in the blog settings) to post a comment or not if it is required, and the user is not logged in we redirect user to login first then submit the comment if registration is not required then we allow the user to fill a comment form with their comment, name,  email and website url.

That’s all for the comment.php

style.css

In your theme you can put all the PHP code inside <div></div> tags and style each using your style.css, it lets you have full control over your theme, you can change the colors, width, height, locations etc of all the <div></div> by assigning them unique ID’s.

functions.php

Function file is where you can add your own functions or extend the functions that WordPress provides by default e.g to register widgets in your theme you have to use the register_sidebar method that accepts an associative array of IDs and keys.

<?php
if ( function_exists(‘register_sidebar’) )
register_sidebar(array(
‘before_widget’ => ‘<div>’,
‘after_widget’ => ‘</div>’,
‘before_title’ => ‘<h3>’,
‘after_title’ => ‘</h3>’,
));
?>

we are placing a <div> before_widget and </div> after the widget

and before the title of the widget we’re putting <h3> and </h3> at the end of the widget.

you can customize the widget box style by adding the div class or id and setting it up in your style sheet.

There you have it all now go and make some sweet themes for your website and before you do that don’t forget to leave comments to let me know if this tutorial helped you understand things more clearly or if there is anything else you’d like to see in this post.