Creating a custom wordpress theme is really easy especially if you’re starting with a template (a site design you want to use.) This is often the case when you’re trying to add a blog to an existing site or convert an existing website you’re happy with to use wordpress for blogging/content management. I won’t go in to details about how to install wordpress, there’s already a great guide for that. I’ll just outline the steps involved in creating a custom them to get wordpress to look & feel the way you want it to.
Laying the Foundation – Creating the Theme Directory
We’ll start out creating a directory to house our theme files (there’s only going to be 2 of them.) To do that we’ll log on to our server and execute the following:
$ cd /whereever/wordpress/is/installed/wp-content/themes $ mkdir custom
If you don’t have shell access to you server use whatever mechanism you’ve uploaded/edited the sites files with in the past.
Step One – HTML – index.php
There’s only two files required to create a template for wordpress, index.php and style.css. We’ll start with index.php. To create an initial version of this file we’ll pick up where we left off a minute ago and do the following. If you’re familiar with another editor, feel free to use it, choices include vi, emacs, … but pico is one of the simplest to use (ctrl-O to save, ctrl-X to exit, more commands are listed across the bottom.)
$ cd custom $ pico index.php
That will start up pico editing a file named index.php, the main template file for you new custom theme. We’ll start with a simple html page you can copy-n-paste in to this 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" <?php language_attributes(); ?>>
<head>
<meta http-equiv="Content-Type" content="<?php bloginfo('html_type'); ?>;
charset=<?php bloginfo('charset'); ?>" />
<title>
<?php wp_title('«', true, 'right'); ?> <?php bloginfo('name'); ?>
</title>
<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>"
type="text/css" media="screen" />
<link rel="alternate" type="application/rss+xml"
title="<?php bloginfo('name'); ?> RSS Feed"
href="<?php bloginfo('rss2_url'); ?>" />
<link rel="alternate" type="application/atom+xml"
title="<?php bloginfo('name'); ?> Atom Feed"
href="<?php bloginfo('atom_url'); ?>" />
<link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" />
</head>
<body>
<div id='header'>
Insert Your Header HTML here
</div>
<div id='content' class='span-16 prepend-1'>
<?php if (have_posts()) : ?>
<?php while (have_posts()) : the_post(); ?>
<div <?php post_class() ?> id="post-<?php the_ID(); ?>">
<h2><a href="<?php the_permalink() ?>" rel="bookmark"
title="Permanent Link to <?php the_title_attribute();
?>"><?php the_title(); ?></a></h2>
<small>
<?php the_time('F jS, Y') ?>
<!-- by <?php the_author() ?> -->
</small>
<div class="entry">
<?php the_content('Read the rest of this entry »'); ?>
</div>
<p class="postmetadata"><?php the_tags('Tags: ', ', ', '<br />');
?> Posted in <?php the_category(', ') ?> |
<?php edit_post_link('Edit', '', ' | '); ?>
<?php comments_popup_link('No Comments »',
'1 Comment »',
'% Comments »'); ?>
</p>
</div>
<?php endwhile; ?>
<div class="navigation">
<div class="alignleft"><?php
next_posts_link('« Older Entries') ?></div>
<div class="alignright"><?php
previous_posts_link('Newer Entries »') ?></div>
</div>
<?php else : ?>
<h2 class="center">Not Found</h2>
<p class="center">Sorry, but you are looking for something that isn't
here.</p>
<?php get_search_form(); ?>
<?php endif; ?>
</div>
<div id='sidebar' class='span-6 last'>
<?php get_sidebar(); ?>
</div>
<div id='footer'>
Insert Your Footer HTML here
</div>
</body>
</html>
Don’t worry if that looks like a mass of gibberish, there’s only a small portion of it that you’ll have to worry about, the two sections in red. In them you will place your header and footer HTML, whatever logos and/or text you’d like to see at the top of the page. If you’d like to have a navagation bar across the page you can create a second div following the header dive and put links to the various sections of you site there. The footer is a good place to put a copyright notice, links to email you or any other information you’d like to have appear at the bottom of all of your pages.
If you’re working with an existing template you want to insert wordpress into, you’ll take the section in blue and place it in the content section of your template. You may have to mess around with it a bit to get exactly what you’re looking for, but keep at it it shouldn’t take too long.
Step Two – CSS – style.css
We’re half the way to a new custom WordPress theme. The next thing we’ll need to do is create style.css.
$ pico style.css
At this point if you want to save the file you can go to the admin section for you blog and click on the ‘Appearance’ link and you should see your new ‘custom’ theme. Clicking on it should pop up a preview of what your blog will look like using this theme. It probably won’t look like much yet, but it’s a nice clean workspace in which you’ll be able to mold things to your liking. If you don’t have visitors to your blog yet, or don’t mind them seeing the work in progress you may go head and apply your new theme. If you’re not ready for that you’ll need to continue to use the preview feature to view your work.
So one of the biggest problems with this theme is the sidebar is way down at the bottom below all of the content. We’ll need to add some css to address this issue, luckily there’s not much to it, at least to move the sidebar up. You’ll just need to add the following to style.css and refresh.
#header
{
}
#content
{
float: left;
width: 600px;
}
#sidebar
{
float: left;
width: 200px;
}
#footer
{
clear: both;
}
The css above makes both #content and #sidebar float left and then limits #content’s width to 600 pixels and the sidebar to 200. So the blog will be 800 pixles wide. The only other thing going on is that we’ve asked the footer to clear both, which essentially means that it should go below any floating divs before it. This is obviously pretty rudimentary and doesn’t do much for the ascetic appeal of our blog, but everything “works” from here it’s just fiddling with css (which is way beyond the scope of this post.) Take a look at the HTML generated by this theme using view source and you should be able to track down the id’s and class’s you need to address to shape things up. Web developer Tool-bar can be really helpful for this work, check it out.
Conclusions
So we’ve created a simple, although still ugly, wordpress theme from scratch. It uses lots of defaults that can be customized to your liking, but it’s a good start. If you have any questions feel free to hit me up at rwmcfa1 <at> neces.com. Don’t have the time and/or desire to mess with custom wordpress instalation/development get in touch.