NOTE FROM AUTHOR
I wrote these articles over 2 years ago. Although I’ll leave them on the site for reference I would recommend trying somewhere else for tutorials on WordPress theme development. WordPress has changed massively over the years and is now far more accessible and sturdy then when I wrote these articles, thus I doubt wasting your time following this series will be of much benefit.
Thanks for all the kind commenters so far.
Nathan
Waffling 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..
Thanks for all the info. I will have to work on this. I just can’t find the perfect theme.
You made this so simple.Good job hope you continue this kind of work in future also
I found your blog on google and read a few of your other posts. I just added you to my Google News Reader. Keep up the good work. Look forward to reading more from you in the future.
Excellent tutorial! I don’t think it ever seemed this easy! love the detailed explanation..The layouts simple, and that’s what makes it a lot better..Thanks!
nice post thanks
you are excellent
great tutorial. But i would like to ask what software used for making wordpress themes?
An interesting tutorial there. I’ve been looking into getting more hands on with the different themes I have on my blog and I even started to build a new theme from scratch.
Was a good job I watched the tutorial about creating a wordpress theme as there were a couple of things I was stuck on.
i have same layout but about home layout please visit my blog..thanks
Nice tutorial and very usefull thanks, i hope some times i will make any wordpress themes by my self
I guess this is going to become less actual because of the world financial depression, what do you think?
one of the most wanted toturials for all of us.
just stopped to thank you again as i still following the other parts and practicing:-)
Thank you mate
Nice tutorial! You are doing a great job! Thanks!
Nathan, excellent stuff! I’ve bookmarked it as I don’t need this code currently but in near future I will need it because I am not expert in coding and will learn it so I will definitely try new stuff and yes I am intending to use Dreamweaver for HTML coding.
thanks for sharing this tutorial,it help much. but i would like to ask is there any software to convert wordpress theme to blogspot template?
I’m new using a WP, your post really help for me. Thanks for sharing.
regards,
Excellent tut! I really needed to know how to make a simple wordpress theme. I will try this soon.
~BeN
just what i needed to start making my own template. thanks for the tut!
What a nice article! I am confused now. Nice work!
Thanks for the tutorial! This will help me finish my online project.
Constipation Treatments
That realy is a good work.Thanks for posting mate!
ceiling fans with lights
i also have the same problem as Mario, the index file does not seem to pick up the css.
There are no thin 1 px border boxes in my layout.
I named the file style.css.
Creating a wordpress theme is a bit difficult especially if you havent done it before. I hear that thesis the theme can make things a bit easier.
seems quite difficult for a beginner…but thanks a lot, I’ll
try this method after my photoshop skills improve.
index not picking up the styles.css ???
Please help…
GREAT TUT!!
Why is there 2 ???
Test Theme
<link rel=”stylesheet” href=”” type=”text/css” media=”screen” />
Logo
Hi Nathan
Thanks for leaving this WordPress tutorial here. It is a great reference to have (even though WP moves on & changes a little the basics are all here).I remembered seeing it about a year ago & wanted to find it again as I had lost the bookmark-took me a while to find again but I have rebook-marked your fine RedSwish site!
In fact I would really like to keep in contact with you and learn more about web design with you!
Many thanks & best wishes
Richard
I tend to use TextMate for Mac when writing my markup and css etc. On a Windows I think I just used to use Notepad but there are far more appropriate text editors for HTML etc.
Of course I guess you could use Dreamweaver but I haven’t touched it for years.