Create a WordPress Theme in Minutes…
Ever thought about creating your own WordPress theme from scratch, but were just too confused where to begin? If you’re hosting your own WordPress installation, it’s actually much easier than you think.
The most important thing to realize is that the basic structure of a WordPress theme mirrors the same structure of just about every template-based layout everywhere on the web, not just those made for WordPress. There are five major pieces:
- header.php – the top of the page
- footer.php — the bottom of the page
- sidebar.php — the section either on the left or right side of the page
- index.php — the main content; also adds in the header, footer, and sidebar sections
- style.css — the CSS styles
Once you have those five pieces, you have a template! Add a 300×225 screenshot of your work in PNG format, name it screenshot.png, and you’ll be able to see the preview in your WordPress administrative pages. It’s not beautiful, and there’s plenty of customization left to do, but you can take that in small steps and slowly change your theme over time. Heck, even this blog has evolved incrementally dozens and dozens of times.
Below are some simple PHP pages, just enough to get you started with your framework. Just place all these files in a new folder under the /wp-content/themes/ folder, and start modifying them to your desire. It couldn’t be any easier; I’ve even made the template available in a downloadable ZIP file.
header.php
The header contains all of the information that must be at the top of every page — the DOCTYPE, the opening HTML and BODY tags, WordPress hooks, and the HEAD meta information. It can also contain visible parts of the top of the page, such as the logo, title, description, or navigational menus.
<!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>
<title><?php bloginfo('name'); // puts the title of your blog at the top of browser ?>
<?php wp_title(); // adds the name of the specific page being visited ?></title>
<style type="text/css" media="screen"><?php // adds in the stylesheet ?>
@import url( <?php bloginfo('stylesheet_url'); ?> );</style>
<link rel="alternate" type="application/rss+xml" title="RSS 2.0"
href="<?php bloginfo('rss2_url'); ?>" /><?php // tells browsers how to get RSS feed ?>
<?php wp_head(); // a hook needed by WordPress and many plugins ?>
</head>
<body>
<div id="container">
<div id="header">
<h1><?php bloginfo('name'); // displays the title of your blog ?></h1>
</div>
sidebar.php
The sidebar typically contains navigational menus, lists of categories, widgets, search forms, and a host of other optional features.
<div id="sidebar"><ul>
<?php if ( !function_exists('dynamic_sidebar')
|| !dynamic_sidebar() ) : // needed by WordPress for widgets ?>
<li id="about">
<h2>About</h2>
<p>This is my blog.</p>
</li>
<?php endif; ?>
</ul></div>
footer.php
The header contains all of the code that must be at the bottom of every page — WordPress hooks, and the closing HTML and BODY tags. It can also contain visible parts of the bottom of the page, such as a copyright notice, contact information, or more navigational menus.
<div id="footer">
<div id="copyright">
Content and Design Copyright © 2008 PUT_YOUR_NAME_HERE.<br />
Based on a tutorial from <?php // feel free to remove this! ?>
<a href="http://www.richardsramblings.com/">Richard's Ramblings</a>.
</div>
<?php wp_footer(); // a hook needed by WordPress and many plugins ?>
</div>
</div>
</body>
</html>
index.php
This is the code that actually displays all your posts, the heart of the blog. While this is pretty much the minimum code truly necessary for your blog, you can also add functionality for comments, ads, or anything else you want.
<?php get_header(); ?>
<?php get_sidebar(); ?>
<div id="content">
<?php if (have_posts()) : // are there any posts to display? ?>
<?php while (have_posts()) : the_post(); // then loop through and display them ?>
<div class="post">
<h2 id="post-<?php the_ID(); ?>"><a href="<?php the_permalink() ?>"
rel="bookmark"><?php the_title(); // displays title of the post ?></a>
</h2>
<div class="entry"><?php the_content(); // displays the post ?></div>
</div>
<?php endwhile; ?>
<?php else : // no posts to display, so show an error ?>
<h2>Oops! Can't find what you're looking for...</h2>
<?php endif; ?>
</div>
<?php get_footer(); ?>
style.css
This is where you can get the most creative. Depending on what you do here, you can make your blog have just about any look imaginable. I’ll start you out with some basics, but the rest is entirely up to you. Please note that the sample style.css below was tested only in IE7 and FF2.
/*
Theme Name: PUT_YOUR_THEME_NAME_HERE
Theme URI: PUT_YOUR_WEBSITE_URL_HERE
Description: A simple theme
Version: 1.0
Author: PUT_YOUR_NAME_HERE
*/
body {
background: #fff;
font-family: Verdana, Arial, sans-serif;
color: #000;
margin: 20px;
padding: 0;
}
#header h1 {
border-bottom: 1px dotted #ccc;
font-size: 1.4em;
letter-spacing: 0.2em;
margin: 0 0 2px 0;
padding: 0 0 2px 0;
}
#sidebar {
float: right;
width: 175px;
}
#sidebar ul {
margin: 10px;
padding: 10px;
border-bottom: 1px dotted #ccc;
border-left: 1px dotted #ccc;
}
#sidebar li {
list-style: none;
}
#sidebar h2, #content h2 {
font-size: 1em;
margin: 15px 0 2px 0;
}
#sidebar p, .entry p {
font-size: 0.8em;
margin: 0;
padding: 2px 0 6px 0;
}
#footer {
text-align: center;
font-size: 0.7em;
margin-top: 10px;
}
[...] questions led me to a post by Richard D. LeCour at Richards Ramblings where he shows how to make a WordPress theme in just minutes. If you want to understand what makes [...]