Create Your Own WordPress Theme from Scratch

July 12, 2010 at 5:06 pm | Web Design & Development | No comment | Written By Siku Kamaldeen

WordPress is one of the best blogging platforms or let’s just say Content Management System out there. With a huge range of useful free plugins and stunning themes available for download from different sites, WordPress is the most used Open Source CMS available on the internet.

But have you ever wondered how WordPress themes are developed? It’s really simple – nothing close to rocket science. You don’t have to be an expert in website design and development to create a WordPress theme. All you have to be acquainted with is HTML, CSS and a basic knowledge of PHP.

This tutorial is a step-by-step guide to WordPress theme development. We’ll be creating a WordPress theme from a blank HTML template file. Since this tutorial is based on WordPress theme development, I’m not going to cover how to develop HTML templates and its design. The HTML template I’m going to use for this tutorial consists of the 4 sections:

I’ll provide you with the blank HTML template I use for this tutorial. Feel free to download it and make any changes you want. If you want you can use your own HTML template as well.

The Basic Structure

The CSS file fine points everything about the theme. The basic files used and goes into our theme directory are:

Now let’s get started.

Step 1: The Style Sheet – style.css

This style sheet defines the theme for WordPress. Add the below code to the top of the style.css file with no white space before it. The code is all contained in a comment, thus it will not affect the style definition.
/*
Theme Name: Blog Revised Tutorial Theme
Theme URI: http://www.blogrevised.com/
Description: An image less template used for blogrevised.com tutorial
Author: Siku Kamaldeen
Author URI: http://twitter.com/sik00
Version: 1.0
.
General comments/License Statement if any.
*/

Step 2: The Header & Footer

Now let’s create two files in the theme directory: header.php and footer.php

header.php

After you create the header.php, open the index.html (the HTML template) we’re using and copy-paste the below code to the header.php file. Note that this is going to be the header and will be displayed on every page of the site.
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Blog Revised - blogrevised.com</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<div id="wrapper">
<div id="header">
</div>

Now we’re going to add the WordPress template tags to header.php file. These tags direct WordPress where to insert the various contents into the theme. It’s very important to remember to change the link to the style sheet.
<?php bloginfo('name'); ?> <?php wp_title(); ?>
<div id="wrapper">
<div id="header">
<p class="description"></p>
<h1><a href="<?php echo get_option('home'); ?>/"></a></h1>
</div>
</div>

footer.php

Now create the footer.php in the theme directory. From the html template copy everything from <div id=”footer”> downwards and paste it in the footer.php file. Note that this is going to be the footer of every page of the site.
To add the copyright information and feed link to the footer, add the following code in between the <div id=”footer”> and </div> in the footer.php file.
© <?php the_time('Y'); ?> <?php bloginfo('name'); ?><br />
<a href="<?php bloginfo('rss2_url'); ?>">Grab the feed</a></p>

Step 3: The Core File (index.php)

Now let’s create the index.php file and save it in the theme directory. The index.php file is one of the two required files (index.php and style.css) for WordPress theme development.

After creating the index.php file, add the following code:
<?php get_header(); ?>
<?php get_footer(); ?>

This directs WordPress to where to include the header.php and footer.php files. Copy the following code in between and tags.

<div id=”content”>
<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
<h2><a href="<?php the_permalink() ?>"><?php the_title(); ?></a></h2>
<?php the_content(); ?>
<p><?php the_time('F j, Y'); ?> at <?php the_time('g:i a'); ?> | <?php the_category(', '); ?> | <?php comments_number('No comment', '1 comment', '% comments'); ?></p>
<?php endwhile; else: ?>
<h2>Woops...</h2>
<p>Sorry, no posts we're found.</p>
<?php endif; ?>
<p align="center"><?php posts_nav_link(); ?></p>
</div>
<div id=”sidebar”>
</div>

Step 4: Sidebar

Create a new file in the theme directory called functions.php and paste the following code.
<?php
if ( function_exists('register_sidebar') )
register_sidebar(array(
'before_widget' => '',
'after_widget' => '',
'before_title' => '<h2>',
'after_title' => '</h2>',
));
?>

This tells WordPress that our theme’s sidebar is ready for widgets.

Now create a new file in the theme directory called sidebar.php and paste the following:
<?php if ( !function_exists('dynamic_sidebar')
|| !dynamic_sidebar() ) : ?>
<h2>Sidebar</h2>
<p>This default sidebar goes here.</p>
<?php endif; ?>

The purpose of this is to direct WordPress where the sidebar is meant to be.

Finally we need to include sidebar in the index.php. In the core file (index.php), right in between <div id=”sidebar”> and </div>, insert the following tag:

<?php get_sidebar(); ?>

Step 5: The Comment System

Open the index.php file and insert the following right after post details (i.e. the_time etc.):

<?php comments_template(); // Get wp-comments.php template ?>

You can style the comment area as you fancy in the style.css file.

Step 6: The Archive

Archives.php is one of the standard files in WordPress. Here’s how it’s done. Create a new in the theme directory called archives.php and type down the following code:
<?php get_header.php(); ?>
<div id=”content”>

<h2><?php the_title() ?></h2>
<?php the_content() ?>

<ul id="archives-page">
<li id="category-archives">
<h3>Archives by Category</h3>
<ul>

<?php wp_list_categories('optioncount=1&title_li=&show_count=1') ?>
</ul>
</li>
<li id="monthly-archives">
<h3>Archives by Month</h3>
<ul>
<?php wp_get_archives('type=monthly&show_post_count=1') ?>
</ul>
</li>
</ul>

</div>

<div id=”sidebar”>
<?php get_sidebar.php(); ?>
</div>

<?php get_footer.php(); ?>

The archives.php file looks very much like the index.php file. However unlike the core file, there is no loop in it.

Conclusion

That’s about it. Now let’s install the WordPress theme we’ve developed and see if it works. I hope this helps you understand and get started with WordPress theme development. For further reference, check out the official WordPress codex.

Related Posts

Leave a Reply

The administrator reserve the right to remove any inappropriate or off-topic comments.

Recent Posts

Blog Archives
Get Adobe Flash playerPlugin by wpburn.com wordpress themes