Creating a Wordpress Theme - Part 1: Layout
April 25th, 2008Waffling Intro As Usual
Welcome one and all to the first part of a 3 part series I’m tirelessly venturing to create on how to create your own Wordpress Theme. 2 questions come to mind regarding this tutorial. Firstly - why Wordpress? Well the simplest reason is that I’m quite handy at WP - I use in on the majority of my websites whether a client’s looking a blogging system or just the ability to edit their own sites. It’s also one of the top open-source CMS’ on the net so it actually makes perfect sense. Secondly - actually I can’t really think of a 2nd. At the end of the day chances are you’re here reading this because you are interested in creating your own custom template from scratch so there’s no point in a long, rambling analytic introduction. Oops - too late!
Let’s Get On With It
This is going to be a very basic layout, with the design entirely created using CSS. In part 2 of this series I’ll show how to implement a design into the layout. Although of course you’d normally create the design first before breaking it down into XHTML and CSS. This tutorial does require you to already have at least a basic understanding of both hand-coded web design and Wordpress - if you’ve edited your own themes and uploaded files via FTP before you should be comfortable. A typical Wordpress template can have any number of files, generally between 5 and 12. There are 5 files which are pretty essential. If you look at any pre-existing template you’ll discover these:
- index.php - the central blog page that is initially called up by Wordpress, from which all the other pages span.
- header.php - usually contains all the standard HTML <head> info and usually some areas of the header of the design that will remain the same on every page (eg. logo, navigation, banner).
- footer.php - as the name suggest, this normally contains the aesthetic footer that remains the same throughout your site.
- sidebar.php - the sidebar represents a side column - usually containing a menu or blog categories, archives or banners.
- style.css - let’s not forget the stylesheet now! This is linked into the site as it would with any normal site - via a link in the <head> area of the header.php file.
Now be prepared for the extremely generic Wordpress layout diagram. The index page is the imperative file. From index.php you pull the other files of the template together to create the full page. The excellent technology behind Wordpress converts this combination of .php files into a single HTML page - as will displayed in your browser.
For the first tutorial of this series - I won’t be implementing any Wordpress technology within the theme. No blog, calenders, widgets - nothing. This is just to get a basic template together. Let’s start with the index file.
Index.php
Your theme files can be created in Notepad or Dreamweaver or whichever pure HTML editor you wish to use before you upload them to the server. From there on they can be configured through the Wordpress control panel. The basic index file only requires 3 php commands to retrieve the other sections of the theme - header, sidebar and footer. You must imagine that index.php is the HTML page that will appear at the end. Even though header is in it’s own file - it will be pulled into the index file so everything works together. So the last line in your header.php file will end up exactly above the first line in your index.php file in the final composition. Welcome index.php, the commands to pull the other files of the theme have been highlighted in red.
<?php get_header(); ?>
<div id=”content”>
<p>This is our content area - this can be filled with text or images or whatever you wish for the sake of this example but later on in the series will be used to implement the Wordpress blogging capabilities.</p>
</div><!– end div content –>
<?php get_sidebar(); ?>
<?php get_footer(); ?>
That’s it! Honestly, well that’s it for the index.php file.
Header.php
The header file will fit in ‘above’ the index file. It’s also used to contain all the <head> info. A basic example as follows:
<!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=“text/html; charset=UTF-8″ />
<title>Test Theme</head>
<link rel=”stylesheet” href=”<?php bloginfo(’stylesheet_url’); ?>” type=”text/css” media=”screen” />
</head>
<body>
<div id=”wrapper”>
<div id=”header”>
<div id=”logo”>
<a href=”/” title=”Logo”>Logo</a>
</div><!– end div logo –>
</div><!– end div header –>
And that’s it for the header file. Obviously more content there due to the <head> info. The ‘wrapper’ div is a technique I commonly use to keep everything tidy and in place. You will see how it’s used later.
Footer.php
The footer is generally quite simple. Just make sure to close any elements you may have opened in either the header.php or index.php files.
<div id=”footer”>
<p>Created using my own imagination, 2008</p>
</div><!– end div footer –>
</div><!– end div wrapper –>
</body>
It almost makes me cry, it’s so simple.
Sidebar.php
The sidebar generally holds menus etc. It will fit in next to the ‘content’ div created in the index.php file. For the sake of this tutorial I will create a very simple menu:
<div id=”sidebar”>
<ul>
<li><a href=”#” title=”Link”>Link</a></li>
<li><a href=”#” title=”Link”>Link</a></li>
<li><a href=”#” title=”Link”>Link</a></li>
<li><a href=”#” title=”Link”>Link</a></li>
</ul>
</div><!– end div sidebar –>
And we are done! Well for the HTML side anyway. Now it’s time to wrap this beauty together that magical, comforting CSS. Oh how it cascades…
This is of course only the absolute basic CSS used to shape everything into nice boxes. From this point you can edit and add your own padding, margins, borders, colours etc. When I create a CSS file I basically work from the top to the bottom of the page visually or from the outside to the innermost areas - always starting with <body>. Here goes:
body {
margin: 0;
padding: 0;
vertical-align: top;
}#wrapper {
margin: 0 auto; (This centers the div on the screen)
width: 800px;
border: 1px solid #999; (creates a light grey border round the wrapper box)
}#header {
width: 800px;
height: 119px; (120px - 1px for the border-bottom)
float: left;
display: inline;
border-bottom: 1px solid #999;
}#logo {
width: 200px;
height: 120px;
float: left;
display: inline;
}#content {
width: 599px; (600px - 1px for the border-right)
float: left;
display: inline;
border-right: 1px solid #999;
}#sidebar {
width: 200px;
float: left;
display: inline;
}#footer {
width: 800px;
height: 39px; (40px - 1px for the border-top)
float: left;
display: inline;
border-top: 1px solid #999;
}
Now surprisingly that actually covers the majority of the divs - laying them out in a typical website box shape which should appear as so:
Looks smashing yeh? Of course not - but the idea behind this part of the tutorial is just to get the layout ready so we can implement a design into the grid. I normally design sites the other way around - designing first then creating the code to work with the design, but for the sake of this tutorial I decided to work at the Wordpress end first.
Uploading your Theme
Your theme files - index.php, header.php, sidebar.php, footer.php and sidebar.css must all go into the same folder and be uploaded to the Wordpress directory:
/wp-content/themes/createfolderhere/
When you create your folder make sure it’s an easy, single-world name because will become the name of your theme to Wordpress.
To activate your theme go into the Wordpress control panel to Presentation.
Here you can activate your theme and edit it futher from the ‘Theme Editor’ tab, saving you the effort of having to constantly re-upload files as you build your site.
Finishing for Now
There’s a lot to cover here. I’m far better at teaching people by doing - visually, but I’ve tried to make this tutorial as clear yet concise as was necessary. If you’re having any trouble, you disagree with something I’ve said or you I’ve made any mistakes - please either leave comments or contact me directly and I promise to get it sorted.
The second part of the tutorial will be up within the next week. But you don’t have to wait - get playing with your theme as it is, changing the CSS styles - adding background colours, images, different font styles etc. With CSS the possibilities are virtually limitless!
You can now view the next section in the series - Part 2: Design here.
Nice tutorial, never thought it’d be so easy.
Great job
Thanks, a tutorial of this quality is hard to find.
greaaat ..:)
waiting 4 the next steps !
will we talk about the design later ??
Hey this is a great tutorial i was wondering if you could repost the Header.php code or send it to me for some reason the one u have up does not work for me Thanks in advance and Keep up the good work man .
If you have problems, it might be something to do with a feature of Wordpress called ’smart quotes’. When Nathan posted the code in this blog entry, it changed the quotation marks (”") into ‘66 and 99′ quotes (“”). Difficult to spot the difference, but try doing a find/replace and see how it works afterwards.
(And in fact, it’s done it on my comment too, so you can’t really see what I mean!)
great tutorial!! learned alot.
i’m very new to wordpress.
i am having problems with the CSS, it doesnt seem to locate the file. any ideas?
i copied your css code and named the file style.css.
Hi all great information here and good thread to comment on.
I am an adict to training and really want to get to my best this year!
Can I ask though - how did you get this picked up and into google news?
Very impressive that this blog is syndicated through Google and is it something that is just up to Google or you actively created?
Obviously this is a popular blog with great data so well done on your seo success..