Creating Your Own Theme—A Wordpress Tutorial

Exclusive offer: get 50% off this eBook here
WordPress Plugin Development: Beginner's Guide

WordPress Plugin Development: Beginner's Guide — Save 50%

Build powerful, interactive plug-ins for your blog and to share online

$23.99    $12.00
by Brian Franklin | April 2009 | Content Management Open Source WordPress

Wordpress is the most widely used content management system amongst bloggers for many reasons. Not only does it make site management seem like a walk in the park, but it also uses a type of shared hosting, which means that most users can afford it. It has plug-ins for any occasion and desire and finally, it has themes.

For many Wordpress users, finding the right theme is a long process that often leads to endless tweaking in the code and stylesheets. However, only a few ever consider learning how to create their own. If you are one of them, this tutorial by Brian Franklin will help you learn how to built and start your own theme.

Template files and DIV tags

The Wordpress theme that waits to be created in this tutorial consists of one stylesheet, one functions file, one comments file and a number of template files. Each template file represents a separate part. Together they form the outline of the website’s overall look. However, it is in the stylesheet that web design elements for each template file are decided.

WordPress Plugin Development: Beginner's Guide

DIV tags are used to define, design, and format values of each template file as well as structure its content and elements. The <div> is often described as an invisible box that is used to separate site content in a structural manner. These are later defined in the stylesheet where size, position, form etc. are assigned. 

Template files that will be used in this tutorial are:

  • Index
  • Header
  • Footer
  • Sidebar
  • Single
  • Page

And the files that define specific functions for the theme are:

  • Functions
  • Comments

DIV tags that will be used in this tutorial are:

  • <div id="wrapper"></div>
  • <div id="header"></div>
  • <div id="container"></div>
  • <div id="footer"></div>
  • <div class="post"></div>
  • <div class="entry"></div>
  • <div class="navigation"></div>
  • <div class="sidebar"></div>

Using tags requires proper opening and closing. If any tag is not properly closed (</div>) it may affect the presentation on the entire site. There is difference between a DIV id and a class is what they are used for. Unique site features require definition by ID while values that are used to define several elements are defined as class. In the stylesheet, div id is identified with a # and div class with a . (dot).

Install Wordpress

Before you can start building a theme you need to decide how to work. It is recommended to install Wordpress on your local computer. This will allow you to save your changes on a local server rather than dealing with remote server access and uploading. Follow the link for further instructions. The other alternative is installing Wordpress through your hosting provider. Wordpress hosting is a popular plan offered by most hosts. Either way you need to have Wordpress installed, remote or local, and create a folder for your theme under the directory /wp-content/themes/yourtheme.

Create the template files

Use Dreamweaver, Notepad, EditPlus or any other text editor of your choice and create the template files listed above, including the functions files. Leave them blank for now and save them as PHP files (.php) in your theme folder.

index.php

Open the index.php, add this piece of code and save the file:

<?php get_header(); ?>

<div id="container">

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

<div class="post" id="post-<?php the_ID(); ?>">

<h2><a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>">
<?php the_title(); ?></a></h2>

<div class="entry">

<?php the_content(); ?>

<p class="postmetadata">
<?php _e('Filed under&#58;'); ?> <?php the_category(', ') ?> <?php _e('by'); ?>
<?php the_author(); ?><br />
<?php comments_popup_link('No Comments &#187;', '1 Comment &#187;', '% Comments &#187;'); ?>
<?php edit_post_link('Edit', ' &#124; ', ''); ?>
</p>

</div>

</div>

<?php endwhile; ?>

<div class="navigation">
<?php posts_nav_link(); ?>
</div>


<?php endif; ?>

</div>

<?php get_sidebar(); ?>

<?php get_footer(); ?>

The index-file now contains the code that calls to the header, sidebar and footer template file. But since there is no code to define these template files yet, you will not see them when previewing the site.

The index file is the first file the web browser will call when requesting your site. This file defines the site’s frontpage and thus also includes DIV ID tags "container" and DIV classes "post" and "entry". These elements have been included to structure your frontpage content; posts and post entries. If you preview your Wordpress site you should see your three latest blog posts, including ‘next’ and ‘previous’ buttons to the remaining ones. To shorten the length of displayed frontpage post, simply log in to the Wordpress admin and insert a page break where you want the post to display a Read more link.

You will come back to index.php in a moment, but for now you can save and close the file. It is now time to create the remaining template files.

header.php

Open header.php, add this code and save the file:

<!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">
<head profile="http://gmpg.org/xfn/11">

<title><?php bloginfo('name'); ?><?php wp_title(); ?></title>

<meta http-equiv="Content-Type" content="<?php bloginfo('html_type'); ?>;
charset=<?php bloginfo('charset'); ?>" />
<meta name="generator" content="WordPress <?php bloginfo('version'); ?>" />
<!-- leave this for stats please -->

<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'); ?>" />

<?php wp_get_archives('type=monthly&format=link'); ?>
<?php //comments_popup_script(); // off by default ?>
<?php wp_head(); ?>
</head>
<body>

<div id="wrapper">

<div id="header">

<h1><a href="<?php bloginfo('url'); ?>"><?php bloginfo('name'); ?></a></h1>
<?php bloginfo('description'); ?>

</div>

The header template file now has the opening tags <html> and <body>. Included in the <html> tag is the <head> tag that holds the meta tags and stylesheet links. The body tag includes two DIV ID tags; wrapper and header that define the boxes and hold the overall position of the site and the header content.

footer.php

Open footer.php, add the code below and save the file:

<div id="footer">
<p>
Copyright 2007 <a href="<?php bloginfo('url'); ?>"><?php bloginfo('name'); ?></a>
</p>
</div>

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

The footer is a template that defines the bottom part of the website. The footer for this theme now holds a Copyright announcement and a php code that adds the name of the blog as a permalink. As it is the last template file to be called for a site it also closes the body and html tag.

sidebar.php

Open sidebar.php, add the code below and save the file:

<div class="sidebar">

<ul>

<?php if ( function_exists('dynamic_sidebar') && dynamic_sidebar() ) : else : ?>

<?php wp_list_pages('depth=3&title_li=<h2>Pages</h2>'); ?>

<li><h2><?php _e('Categories'); ?></h2>
<ul>
<?php wp_list_cats('sort_column=name&optioncount=1&hierarchical=0'); ?>
</ul>
</li>

<li><h2><?php _e('Archives'); ?></h2>
<ul>
<?php wp_get_archives('type=monthly'); ?>
</ul>
</li>

<?php get_links_list(); ?>



<?php endif; ?>

</ul>

</div>

The sidebar template is now defined and includes the site’s pages, categories, archive and blogroll. Study the code and see the changes in the web browser. Regarding the DIV class, it is left to be designed in the stylesheet.

single.php

Open single.php, add the code below and save the file:

<?php get_header(); ?>

<div id="container">

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

<div class="post" id="post-<?php the_ID(); ?>">

<h2><a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>">
<?php the_title(); ?></a></h2>

<div class="entry">

<?php the_content(); ?>

<p class="postmetadata">
<?php _e('Filed under&#58;'); ?> <?php the_category(', ') ?> <?php _e('by'); ?>
<?php the_author(); ?><br />
<?php comments_popup_link('No Comments &#187;', '1 Comment &#187;', '% Comments &#187;'); ?>
<?php edit_post_link('Edit', ' &#124; ', ''); ?>
</p>

</div>
<div class="comments-template">
<?php comments_template(); ?>
</div>
</div>

<?php endwhile; ?>

<div class="navigation">
<?php previous_post_link('%link') ?> <?php next_post_link(' %link') ?>
</div>

<?php endif; ?>

</div>

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

The single.php template file specifically defines the elements on the single post page that is different from both the frontpage post listing and pages. The code above is basically a copy/paste from the index-file, only with minor changes to the Next and Previous links. 

WordPress Plugin Development: Beginner's Guide Build powerful, interactive plug-ins for your blog and to share online
Published: February 2009
eBook Price: $23.99
Book Price: $39.99
See more
Select your format and quantity:

page.php

Open page.php, add the code below and save the file:

<?php get_header(); ?>

<div id="box"

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

<div class="post">

<h3><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h3>

<div class="entry">

<?php the_content(); ?>


</div>
</div>

<?php endwhile; ?>

</div>
<?php endif; ?>

</div>

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

This is the template file that defines how published pages are presented. Posts and pages normally are displayed differently in Wordpress themes, with pages being of a more static nature and posts containing dynamic elements such as comments, post navigation etc. The code above is a copy/paste from the index file without the code that calls on the comments function and display and the Next and Previous buttons. Pages published in this way have a more static look, to comply with the standard Wordpress theme layout.

Create the functions files

The template files have now been created and are ready for use. It is time to create the functions files so that the site will include the comments and a widget-ready sidebar. Step three will be to create the stylesheet and start to design the theme.

functions.php

Open functions.php, add the code below and save the file:

<?php
if ( function_exists('register_sidebar') )
register_sidebar();
?>

The functions file is a standard component in Wordpress themes and is used to include certain theme specific functions. This code makes sure that the sidebar is widget-ready. After logging into Wordpress as an admin, the user has the option of using widgets in the sidebar instead of the regular listings added in the code. Typical widgets are Latest Posts, Categories, Pages, Polls and many other features.

comments.php

Open comments.php, add the code below and save the file:

<?php 
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
?>

<h2><?php _e('Password Protected'); ?></h2>
<p><?php _e('Enter the password to view comments.'); ?></p>

<?php return;
}
}



$oddcomment = 'alt';

?>



<?php if ($comments) : ?>
<h3 id="comments"><?php comments_number('No Responses', 'One Response', '% Responses' );?>
to &#8220;<?php the_title(); ?>&#8221;</h3>

<ol class="commentlist">
<?php foreach ($comments as $comment) : ?>

<li class="<?php echo $oddcomment; ?>" id="comment-<?php comment_ID() ?>">

<div class="commentmetadata">
<strong><?php comment_author_link() ?></strong>, <?php _e('on'); ?>
<a href="#comment-<?php comment_ID() ?>"
title=""><?php comment_date('F jS, Y') ?> <?php _e('at');?>
<?php comment_time() ?></a> <?php _e('Said&#58;'); ?>
<?php edit_comment_link('Edit Comment','',''); ?>
<?php if ($comment->comment_approved == '0') : ?>
<em><?php _e('Your comment is awaiting moderation.'); ?></em>
<?php endif; ?>
</div>

<?php comment_text() ?>
</li>

<?php /* Changes every other comment to a different class */
if ('alt' == $oddcomment) $oddcomment = '';
else $oddcomment = 'alt';
?>

<?php endforeach; ?>
</ol>

<?php else : ?>

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


<p class="nocomments">Comments are closed.</p>

<?php endif; ?>
<?php endif; ?>


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

<h3 id="respond">Leave a Reply</h3>

<?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 the_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">
<?php if ( $user_ID ) : ?>

<p>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="Log out of this account">Logout &raquo;</a></p>

<?php else : ?>

<p><input type="text" name="author" id="author" value="<?php echo $comment_author; ?>"
size="40" tabindex="1" />
<label for="author"><small>Name <?php if ($req) echo "(required)"; ?></small></label></p>

<p><input type="text" name="email" id="email" value="<?php echo $comment_author_email; ?>"
size="40" tabindex="2" />
<label for="email"><small>Mail (will not be published) <?php if ($req) echo "(required)"; ?>
</small></label></p>

<p><input type="text" name="url" id="url" value="<?php echo $comment_author_url; ?>"
size="40" tabindex="3" />
<label for="url"><small>Website</small></label></p>

<?php endif; ?>

<!--<p><small><strong>XHTML:</strong> <?php _e('You can use these tags&#58;'); ?>
<?php echo allowed_tags(); ?></small></p>-->

<p><textarea name="comment" id="comment" cols="60" rows="10" tabindex="4"></textarea></p>

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

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

</form>

<?php endif; ?>

<?php endif; ?>

comments.php corresponds with the added code regarding comments in index.php and single.php. The above code is standard and is used to enable the use of comments in a Wordpress blog.

Create the stylesheet

Template files and functions files should now be created and located in your theme folder. The last remaining file to be created is the CSS stylesheet. The design of the theme is defined in the stylesheet.

Open your text editor, create a new document, add the code below and save the file as style.css:

/*  
Theme Name: New Theme
Theme URI: YourWebsite.com
Description: Your Theme Description
Version: 1.0
Author: Your Name
Author URI: http://www.yourwebsite.com

*/


body{
margin: 0;
font-family: Arial, Helvetica, Georgia, Sans-serif;
font-size: 12px;
text-align: center;
vertical-align: top;
background: #ffffff;
color: #000000;
}

h2{

font-family: Rockwell, Arial, Sans-serif;
font-size: 30px;
color: #000000;

}

a:link, a:visited{
text-decoration: underline;
color: #000000;
}

a:hover{
text-decoration: none;
}

#wrapper{
margin: 0 auto 0 auto;
width: 750px;
text-align: left;
}

#header{
float: left;
width: 750px;
}

#container{
float: left;
width: 400px;
}

.sidebar{
float: left;
width: 240px;
background: #ffffff;
margin: 0 0 0 10px;
display: inline;
}

.sidebar h2{
font-size: 20px;
}

#footer{
clear: both;
float: left;
width: 750px;
}

.comments-template{
margin: 10px 0 0;
border-top: 1px solid #ccc;
padding: 10px 0 0;
}

.comments-template ol{
margin: 0;
padding: 0 0 15px;
list-style: none;
}

.comments-template ol li{
margin: 10px 0 0;
line-height: 18px;
padding: 0 0 10px;
border-bottom: 1px solid #ccc;
}

.comments-template h2, .comments-template h3{
font-family: Georgia, Sans-serif;
font-size: 16px;
}

.commentmetadata{
font-size: 12px;
}

.comments-template p.nocomments{
padding: 0;
}

.comments-template textarea{
font-family: Arial, Helvetica, Georgia, Sans-serif;
font-size: 12px;
}

You have successfully created a Wordpress theme!

Congratulations! The theme is done and with the stylesheet you have successfully added color and shape to your blog. All the DIV ids and classes of the template file have been defined in style and design and this is a great opportunity to do some CSS tweaking. To change the design of the header, index, footer or sidebar simply locate them in the stylesheet and change current, alternatively add other values. Go to W3 schools CSS section to get all the design values you need. Good luck!

If you have read this article you may be interested to view :

WordPress Theme Design A complete guide to creating professional WordPress themes
Published: May 2008
eBook Price: $23.99
Book Price: $39.99
See more
Select your format and quantity:

About the Author :


Brian Franklin is a freelance web designer from San Francisco and has many years of experience working with Wordpress CMS. At the moment, he frequently blogs for Web Hosting Search and also runs a small marketing agency. Franklin has a University degree in web development. Before taking on the industry, he developed his skills outside the classrooms by building websites constantly.

Books From Packt

 

WordPress Complete
WordPress Complete

Choosing an Open Source CMS: Beginner's Guide
Choosing an Open Source CMS: Beginner's Guide

JBoss Tools 3 Developers Guide
JBoss Tools 3 Developers Guide

Moodle 1.9 Multimedia
Moodle 1.9 Multimedia

Spring 2.5 Aspect Oriented Programming
Spring 2.5 Aspect Oriented Programming

Selling Online with Drupal e-Commerce
Selling Online with Drupal e-Commerce

jQuery UI 1.6: The User Interface Library for jQuery
jQuery UI 1.6: The User Interface Library for jQuery

WordPress for Business Bloggers
WordPress for Business Bloggers

 

Your rating: None Average: 5 (6 votes)
I’ve been visiting your blog by
I’ve been visiting your blog for a while now and I always find a gem in your new posts. Thanks for sharing.
You certainly deserve a round by
You certainly deserve a round of applause for your post and more specifically, your blog in general. Very high quality material
Good Blog VPS by
Thanks For This Post, was added to my bookmarks.
Great Post by
You certainly have some agreeable opinions and views. Your blog provides a fresh look at the subject.

Post new comment

CAPTCHA
This question is for testing whether you are a human visitor and to prevent automated spam submissions.
B
A
Y
h
e
S
Enter the code without spaces and pay attention to upper/lower case.
Code Download and Errata
Packt Anytime, Anywhere
Register Books
Print Upgrades
eBook Downloads
Video Support
Contact Us
Awards Voting Nominations Previous Winners
Judges Open Source CMS Hall Of Fame CMS Most Promising Open Source Project Open Source E-Commerce Applications Open Source JavaScript Library Open Source Graphics Software
Resources
Open Source CMS Hall Of Fame CMS Most Promising Open Source Project Open Source E-Commerce Applications Open Source JavaScript Library Open Source Graphics Software