Simple design: a first WordPress Theme: 1
You want to design a Wordpress theme. You know how to do a web page in HTML, know how to upload files to your Wordpress blog, eg. by FTP, but aren’t sure about the PHP bit. It’s not difficult…
First, design a web page - call it index.html, give it a sidebar and somewhere to put the main content (the posts). Use dummy text to give it some body, maybe courtesy of Lipsum (no, it isn’t real Latin)
Put all the CSS in a file named style.css - it has to be named this. While you’re doing the HTML designing, link to style.css in the usual way in the head of the document
<link rel="stylesheet" href="style.css" type="text/css" media="screen" />
- this will be replaced shortly
You probably should use all the principles of tableless design, but you don’t actually have to.
You’ll probably want to give the page a header and a footer - most blogs have them.
For now, don’t try putting any fancy code in the <head> of your page.
And to make it really easy, don’t use any images yet.
When the page looks right in Firefox, Internet Explorer and Opera, you’re ready for the next step (Although you could just check it validates at this point).
The PHP bit
1. Cut and paste the code below into index.html - you are replacing everything up to and including the </head> closing tag.
<!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">
<meta http-equiv="Content-Type" content="<?php bloginfo('html_type'); ?>; charset=<?php bloginfo('charset'); ?>" />
<title><?php wp_title(); ?></title>
<meta name="generator" content="WordPress <?php bloginfo('version'); ?>" />
<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="pingback" href="<?php bloginfo('pingback_url'); ?>" />
<?php wp_head(); ?>
</head>
2. Find the point in your page where you plan your posts to go and paste this code
<?php if (have_posts()) : ?>
<?php while (have_posts()) : the_post(); ?>
<div class="post" id="post-<?php the_ID(); ?>">
<h2><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title(); ?>"><?php the_title(); ?></a></h2>
<div class="entry">
<?php the_content('Read more ยป'); ?>
</div>
<p class="postmetadata">Posted in <?php the_category(', ') ?> by <?php the_author() ?> : <?php the_time('F j, Y - g:ia') ?></p>
</div>
<?php endwhile; ?>
<?php else : ?>
<h2>Not Found</h2>
<p>Sorry, but you are looking for something that isn't here.</p>
<?php endif; ?>
(You’ll be able to style the post from this point onwards - eg with .post p{} .post h2 {} etc. See an existing theme’s css for how it’s going to work.)
3. Now save index.html as index.php - this is the file we’ll be working with from now on.
The CSS file
4. Add this to the top of your style.css file and change the values to suit your theme.
/*
Theme Name: MyTheme
Theme URI: http://www.mysite.com/
Description: Describe your theme
Version: 1.0
Author: Me
*/
These data will be used to describe the theme in Wordpress Admin. The ‘code’ needs to be commented out, because, obviously, it isn’t actually CSS code.
The last steps
5. Create a folder and give it the name of your new theme (no spaces! and careful about special characters). Put index.php and style.css in this folder.
6. Use some method (FTP, hosting control panel) to upload this folder to your /wp-content/themes/ directory.
7. Go to your Wordpress admin > Presentation and your theme should appear there - activate it and see what it looks like.
That’s the basic plan. The theme hasn’t got a sidebar yet, it hasn’t got comments yet - they’re coming next.
If these tutorials have helped you get started with theme design - please give us a link from your blog, eg…
<a href="http://www.codescheme.net/">WordPress Theme Design</a>
By Peter Blake, June 5, 2008 @ 12:58 pm
I have followed your excellent tutorial on designing a wordpress theme and it’s a success, thankyou. I now have a blog page which looks exactly the same as my existing static site, but on the blog page, if I click on my navigation to go to ‘home’ or my other pages which are .html pages I can’t get back to my site. If I change my html pages to .php pages will I be able to navigate back to my site?
To put it another way, I can put in the code on my html site to navigate to my blog (which now looks the same as my static site) but at the moment when I’m on the blog page I can’t navigate back to my site. Is there a way round this?
Best wishes
Peter Blake
By Lewis, June 5, 2008 @ 1:11 pm
Sounds like you need absolute paths if you have the blog in a subdirectory…