How to create a Wordpress Template or Theme

Posted on 14. Dec, 2008 by admin in Wordpress

Another Wordpress question that is asked a lot is how to take a current website design and make it work with Wordpress.

This is actually quite a simple thing to do, at least in my opinion it is.

I’m going to tell you how I integrate website designs and Wordpress into a happy co-existence. What I do isn’t exactly the same as what they tell you to do in the Codex on the subject, and I also tend to use a bit more “plain English”…but my problem sometimes is that I assume you have some knowledge of things. I’m usually wrong on that point. So, if I go over your head on anything, feel free to leave a comment asking me to clarify.

This tutorial is exactly what I do when I have 1) an existing site that needs to be integrated with Wordpress, and/or 2) the urge to create a new theme design specifically for Wordpress. So you can use this tutorial for either purpose: theme creation or site integration.

Step One: Design your Site

I always begin with designing the site. I do it in the doctype of my choice (usually XHTML 1.0 Strict – Transitional if I must), and just make the site. I code everything out as if it were a static page. I create my banners, headers, my CSS file and colors – everything. After I do this, I validate my markup and my CSS files.

Validation is very important, especially if you’re creating a theme for distribution to the general public. If you do it at this stage, you will cut your “problem fixing” time to less than half.

I am also sure to comment a lot when I’m coding – especially in the XHTML file. There’s nothing worse than having a bunch of <div> tags at the beginning, and then a bunch at the end with even more in between – and then you don’t know which </div> tag closes what.

So, for purposes of example, we’ll use my
two column fixed-width layout. In the end, the finished code (sans actual content) will look like this:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"><head> <title></title> <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" /> <meta name="description" content="" /> <meta name="keywords" content="" /> <meta name="copyright" content="Copyright 2005" /> <meta name="author" content="" /> <meta http-equiv="imagetoolbar" content="no" /> <meta name="MSSmartTagsPreventParsing" content="true" /> <link rel="stylesheet" href="global.css" /> </head>
<body><div id="wrapper"><div id="header"> </div> <div id="content"><div id="sidebar"> </div> <div id="main"> </div> </div> <div id="footer"> </div> </div> </body></html>

Note all of those nice comments telling you what div closes what section

Now, the reason I do the site design/layout/coding first is because I want to be sure i have all sections in the right place, and semantically laid out. I validate so I can check for errors at this stage – like an improperly closed <div> tag that might throw the layout off. It’s best to find these errors now, before we break it apart for Wordpressing. Once you break apart the base template, these sorts of errors are difficult to find and fix if you’re not very familiar with coding.

Now that the main template is done, let’s Wordpress it!

Step Two: Making Wordpress Recognize Your Theme

Here’s where the fun begins. The first thing you want to do is make your stylesheet “theme ready”. All Wordpress requires from you (so that your design can be seen in the Presentation > Themes area) is to give yourself credit in the stylesheet. So open up your stylesheet in a text-editor (no, Microsoft Word is NOT a text editor. I use Notepad.) and at the very top of your stylesheet, simply place this code:

/* Theme Name: Theme URI: Description: Author: Author URI: Version: */

Let’s define these variables – what is each line for? Well, when you open up your administration panel, the “Themes” area will recognize the new theme by the stylesheet, and it will create a clickable area for you to use to apply the design to your site. Here’s what each line does:

Theme Name: The name of it, of course! In the “Themes” area, this will be displayed as the link above the screenshot.

Theme URI: The URL of the location of the theme. For example: http://www.yoursite.com/wordpress/wp-content/themes/themename
Description: This is shown in the Theme area as the description for the theme, beneath the screenshot.

Author: Your name, of course.

Author URI: Your website address.

Version: Version number – you can put anything you want. Some people like to start with “1.0? for the first version of a new theme. Personally, I do dates. For example, my first theme, “Orange Crush” was version 5.242006 – I started creating it on May 24, 2006

The only fields that are really required is the Theme Name and Description. So, once you’ve done this to your stylesheet, save it as “styles.css”, and move on to the next step. (And if you want a screenshot to show up in the Themes area, then open up your original HTML template in a browser window, hit “ALT” + “Print Screen”, then paste the view into your favorite graphics program. Resize the image to 300px x 225px, and save it as “screenshot.png” – there you have it.)

Okay, now we need to split apart the template. You must have your theme split into 4 parts: header.php, footer.php, index.php and sidebar.php. So, to define each of these parts:

Header.php: generally, this is the very beginning of your template, down to the opening section of the body that comes first in your template. Sometimes this is the sidebar, others, it’s the main content area.

Sidebar.php: this will be, of course, the sidebar.

Index.php: the “meat” of the site – this is where most of the good stuff goes. It also generally only houses the main content area of your site.

Footer.php: the end.

What Wordpress does, to put it in layman’s terms, is put your site together like a puzzle. Each of these files is a piece of the puzzle, and when it’s put together, it makes a whole. The reason it’s very nice to have it this way is because – well, let’s give an example. Say you have a site that’s 100 pages large. The site’s template looks exactly the same for every page. Now, in a static site, if you added a link to the sidebar, or if you changed the text in the header, you would have to go through every single file – all 100 of them – and change that or add to it so the site still stayed the same throughout. But with this, it’s very nice, because you only have to change one file and it’ll make the change site-wide. In other words, if you want to change your header text, you change it once in the header.php file – and all 100 pages will reflect that change. If you want to add a link to your sidebar, you add it in your sidebar.php file, and all 100 pages will show the new link. Very nice.

Now, using the above example layout we initally created, I will show you an example of breaking the site apart into these sections:

header.php:

Now, you see, this file will be included in every single page I create using Wordpress. All of the pages will begin with the above code.

sidebar.php:

<div id="sidebar"> </div> 

Whoa. That’s huge

footer.php:

</div> <div id="footer"> </div> </div> </body></html>

Yes, I know I skipped over the index.php section. But I wanted you to see the main sections which, for the most part, are made static by this separation. Of course, you can now dynamically generate content for each section (and I’ll be showing you how in a bit), but for now, we’re going to render them as static pages. I saved the best for last, the index.php file.

index.php:

<?php get_header(); ?><?php get_sidebar(); ?><div id="main"> <?php if (have_posts()) : while (have_posts()) : the_post(); ?><?php the_date('','<h2>','</h2>'); ?><div class="post" id="post-<?php the_ID(); ?>"><h3 class="storytitle"> <a href="<?php the_permalink() ?>" rel="bookmark"><?php the_title(); ?></a></h3><div class="meta"> <?php _e("Filed under:"); ?> <?php the_category(',') ?> — <?php the_author() ?> @ <?php the_time() ?> <?php edit_post_link(__('Edit This')); ?> </div><div class="storycontent"><?php the_content(__('(more...)')); ?></div><div class="feedback"><?php wp_link_pages(); ?><?php comments_popup_link(__('Comments (0)'), __('Comments (1)'), __('Comments (%)')); ?></div></div> <?php comments_template(); // Get wp-comments.php template ?><?php endwhile; else: ?><p> <?php _e('Sorry, no posts matched your criteria.'); ?> </p><?php endif; ?><?php posts_nav_link(' — ', __('« Previous Page'), __('Next Page »')); ?><?php get_footer(); ?></div> 

Ahh…now, I know there’s a lot of extra stuff in there that wasn’t there before. However, if you look, you will still see our original code for the content area at the top and bottom of the code. It’s the “meat in the sandwich” that I wasnted to bring to your attention.

Let’s break it down.

<?php get_header(); ?><?php get_sidebar(); ?>

…and at the end…

<?php get_footer(); ?>

Wordpress will call up the index file. It’ll see these sections, and refer itself to your header.php, sidebar.php and footer.php. Yes, it’s bringing the puzzle together into a whole. The index.php file calls in the other 3 pieces – this is what meshes it all together. Now, all that gobbeldeygook in the index area…

Step Three: the Loop

We will begin with The Loop. The Loop is probably the most important thing you’ll need to understand when doing this “Wordpress thing”. Now, I’ve linked to the official article so that you can read up on the technical aspect of it, and see how powerful this little thing is. But I’ll give you a bare-bones explanation of what it does: it’s what makes your posts do their thing.

This is the basic Loop:

<?php if (have_posts()) : while (have_posts()) : the_post(); ?>stuff here<?php endwhile; else: ?><?php endif; ?>

In laymans terms, the above says “If there is a post, and during the entire post, then show the post.” What I mean by the part in italics is that the program will “read” the post commands – the meaty part in the middle that tells it what to do. “While” it’s “reading” that part, it displays what it “reads” – the “stuff here” part. Hopefully that makes sense to you! It is, sometimes, the hardest part to grasp.

Then, the “endwhile” says “stop reading the stuff”. Now, at this point, you can just end the entire thing here by removing the “else” portion. But if you want the site to dsplay an error message or something, you can place that here, and *then* “endif”.

And so it continues in a Loop. The program will find a post, read the post, and displays what it reads from beginning to end, then it moves on. If there is another post, it will perform the same function again and again, until there are no more posts for it to find.

Now, the “stuff here” section is what actually defines the post.

<?php the_date('','<h2>','</h2>'); ?><div class="post" id="post-<?php the_ID(); ?>"><h3 class="storytitle"> <a href="<?php the_permalink() ?>" rel="bookmark"><?php the_title(); ?></a></h3><div class="meta"> <?php _e("Filed under:"); ?> <?php the_category(',') ?> — <?php the_author() ?> @ <?php the_time() ?> <?php edit_post_link(__('Edit This')); ?> </div><div class="storycontent"><?php the_content(__('(more...)')); ?></div><div class="feedback"> <?php comments_popup_link(__('Comments (0)'), __('Comments (1)'), __('Comments (%)')); ?></div></div> 

All of that gobbeldygook tells the loop, basically, to display the contents of your post. That’s the “while” part. So the post will end up looking like this (from a “View Source” standpoint):

<h2>Post Date Here</h2><div class="post" id="post-ID#"><h3 class="storytitle"> <a href="Permanent URL To Post Here" rel="bookmark">Post Title Here</a></h3><div class="meta"> Filed under: Category Name Here — Author's Name Here @ Time Post Was Published Link to Edit Post Here </div><div class="storycontent">Post Content Here (with "more" link)</div><div class="feedback"> Link to Comments Popup Window here (# Of Comments Made)</div></div> 

Hopefully, that made sense to you, and you’re getting the idea of the Loop. You can do many, many things with the Loop. But we’re trying to keep thing tutorial simple – so we’re gonna stick with the basics for now. But keep in mind, when you want to do some cool things with your site’s content, usually the Loop is where you want to do them!

Step Four: the Sidebar

So now we’ll stumble into the sidebar. The sidebar is actually pretty easy. Ther’es several ways you can accomplish what you want with it. You could do your general static sidebar, where you add your links one by one. That’s perfectly fine. I’ve actually had to do this in some cases, because when you do the dynamic/Wordpress way, you’re (unfortunately) stuck with only one class for your list items. I’ve had cases where I needed each list item to have a different class, and when you have that, then you have to stick with hard-coding.

However, most people don’t have this problem. That’s where the coolness of Wordpress comes in. Basically, you manage your links in your Administration panel, under (holy crap!) the “Links” area. You just go in, create your new link, add in the URL and voilà! You have your links. You call them, very simply, to your sidebar to make the sidebar.php file look like this:

<div id="sidebar"> <?php get_links_list(); ?> </div> 

What this will do is output your links that are listed in your Links manager. By default, the list will be generated by name (alphabetical order). But if you prefer to have your links in another order, you can add ‘id’ to that:

<div id="sidebar"> <?php get_links_list('id'); ?> </div> 

That will output the list by the ID# given to each link. So if you create your links in your manager in a certain order, then Wordpress will output your list in that order. A side note: if you would like them to appear in reverse order, simple place an underscore in front of the parameter:

<div id="sidebar"> <?php get_links_list('_id'); ?> </div> 

There are many other things you can add to your sidebar…archives, calendar, categories, and so on. However, one of the best and simplest methods of updating/controlling your sidebar is by using Widgets. Widgets are utterly awesome. Some people hate them, but I find them very fun and very easy to use.

Step Five: Miscellaneous Important Stuff

One very large important factor I have failed to mention so far is how to link properly to certain things – namely stylesheets. Now, remember in our original template code, the stylesheet link was your everyday

<link rel="stylesheet" href="global.css" />

Well, that won’t work here. Because your files will no longer be located in the root of your site, leaving the link like this will cause your stylesheet to not be picked up by the browser. This is a bad thing. You must “Wordpress” this link! Since you will always have a default stylesheet (styles.css – see step two!), then there is one wordpress tag that will always work, and should be used as the default:

<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" />

Wait! You say. What about other stylesheets? Like when you create a separate stylesheet for print? Or how about one within a conditional comment for IE? That won’t work for those. However, there is an alternate way to call it in without hard-coding the long URL yourself:

<?php bloginfo('template_directory'); ?>

What this does is put in the path to your template directory. So, say you have a print stylehseet you also want to use with the default. You would do this:

<link rel="stylesheet" href="<?php bloginfo('template_directory'); ?>/print.css" media="print" />

Note how I added the “/filename here” at the end of the PHP call. The above PHP code will work for anything that needs the path to the files called in. You just add the filename afterwards so you get the results you desire.

I should also note that, if there are any links or images within your template that do need the full URL (usually for outside linking purposes – this isn’t a common need, though!) you can use that PHP code anywhere in your template. Just tack on the filename at the end.

I would also like to address the comments_popup_link(); area, in the “feedback” section of the index.php file. What this does is provide a popup window when the end user clicks on the “Comments” link at the end of each post. For this to work, you must insert the following line in your header:

<?php comments_popup_script(400, 400); ?>

Basically, that puts the popup script in the header of your page. The “400?s you see there are the width and height of your popup window and can be altered to any size you wish.

Now, if you do not wish to have the comments popup in a new window, simply leave that line out of your header.php file. That will remove the popup, leaving your comments in line with the post. This, of course, will not be on the main page – what it does is, when the end user clicks on the “Comments” link to leave a comment, it’ll take the end user to an archived page with the comments area at the bottom.

Now, you should be set with your basics. Here’s the final thing that I do to get the last few weird things in place.

You will notice that Wordpress – upon using their tags and such – will add it’s own default classes and such. What I do at this point is open up my site in a regular browser window, and view the source code. (In Firefox, this is “CTRL” + “U”.) Then I look through the source code and find anything that I haven’t coded myself. For example, the sidebar. If you were using the regular wordpress PHP call for your sidebar list, then Wordpress will generate your links in the sidebar similar to this:

<ul><h2>List Title Here</h2> <li>link 1 here</li> <li>link 2 here</li> <li>link 3 here</li> <li>link 4 here</li> <li>link 5 here</li> </ul>

If you don’t have any styling for UL or LI tags, then your sidebar list is gonna look weird. So this is the point where I start adding things to my CSS file that Wordpress has placed in there, and style things as I want them to be.

Once you’ve saved everything and gotten your links all together as you’d like them to be, then validate your markup again. This should find the final niggles that may be in the way.

And that would be my final touch-up step.

Hopefully this little tutorial has helpd you out. As I said in the beginning, this is only the basics of what I do. There’s a lot more you can do with the Loop and your sidebars and all the PHP coding that Wordpress allows you to do – but hopefully this gets you started.

If I did go over your head with anything, please leave a comment and let me know – I’d like this to be very clear for anyone who wants to use it.

Tags: featured, Templates, Wordpress

92 Responses to “How to create a Wordpress Template or Theme”

best savings account

Feb 27th, 2009

Awesome information. I was under the impression that making a theme was rally huge work. This tutorial will help me out do it simply I guess. Thanks a lot.
Slimming Tablets UK

Feb 27th, 2009

Great Post. Very useful information. The tutorial was very helpful. Thanks for sharing it with us. Cheers mate !!!
ETF Newsletter

Feb 27th, 2009

Cool. That’s a really good illustration. Learnt my self a lot. Thanks a bunch. Keep up the good work.
Hockey

Feb 28th, 2009

One of my buddies pointed me to your site. It’s really cool. Thanks for this theme guide. I’ll try it out now. Thanks
Jason | Acai Berry

Mar 12th, 2009

This is a very detailed article – thanks for sharing so much insight. I found that I don’t really need to create my own theme from scratch… rather I just used all of your tips here to edit a free public theme to make it perfect for some of my weblogs.

Thanks again for the tips!
webdesign

Mar 12th, 2009

Great post! Thanks.
Simple text but useful information. Looking forward new remarks.
jocuri

Mar 16th, 2009

Thanks for the tutorial!

Great post!
Weight Loss

Mar 17th, 2009

I found your blog on google and read a few of your other posts. I just added you to my delicious. Keep up the good work. Look forward to reading more from you in the future.
Promotional products

Mar 23rd, 2009

Super cool. Thanks for the information. Certainly would help me to get the theme I want done. Thanks a bunch again. Cheers
Things to do in London

Mar 23rd, 2009

Great post, this is something I’m really trying to expand on in my blogs. It might take me a while but I think I’ll get there.
Ali Hussain

Mar 24th, 2009

I can port HTML themes to Wordpress Themes, but i find a hard time coding psd -> HTML
admin

Mar 26th, 2009

@Ali Hussain
You should try to learn xhtml/css for converting psd into xhtml/css. That’s a basic.
betsson

Mar 27th, 2009

Very helpful information. Thanks.
erandolph

Mar 28th, 2009

Good comment and turtoial!
Loan Modification

Mar 31st, 2009

I located your blog on google and really appreciate your posts. I have added you to my Google News Reader. I really look forward to reading more posts from you.
one way links

Apr 1st, 2009

Hey that’s a super cool tutorial Loved it. i really need to give it a try and see. always wanted to make a theme by my self Cheers
Road Bikes

Apr 1st, 2009

This tutorial is so helpful . i had no clue about how to create a theme of template by using wordpress. But once i read this article i felt soo confident about it. This is really appriciated. Keep writing stuff like this. Cheers
motocross helmets

Apr 2nd, 2009

A great tutorial on creating wordpress themes! Going to have to give this a go at some point in the near future. However is it easier to start a theme from scratch or alter a theme which is already made? Thanks for a great article though!
Pure Brazilian

Apr 8th, 2009

Great post. This is very helpful. The tutorial helped me a lot to understand about wordpress themes and how it works. Thanks for sharing.
sunday best

Apr 9th, 2009

I’m hoping to design a new theme for my blog on designer clothes. This tutorial is very useful. Thanks for sharing.
Sinhalablog

Apr 9th, 2009

very good wordpress tutorial for any bloggers, I could customize my wordpress theme as a unique one.
Health Tips and Guide

Apr 9th, 2009

so nice post and thank for that.
golf shop

Apr 9th, 2009

Thanks for the tutorial. It’s very useful. One of the best I’ve seen in a while. By the way I love your blog. Keep it up.
electricals

Apr 16th, 2009

Thanks for the tutorial to build up my wordpress blog.
Caralluma

Apr 21st, 2009

This tutorial was VERY helpful to me. Especially the part that explained how the loop works as that was always kind of hard for me to understand.

Susie
Chicago Realtor

Apr 28th, 2009

Great tips and nice written article.

Thanks!
Company Logo Design

May 20th, 2009

I have already tried out with a bunch of tutorials regarding how to make Wp themes but those looked so complicated for me to understand. Your article is very simple and understandable. Thanks
Best Weight Loss Pills Expert

May 22nd, 2009

I was actually looking for this kind of tutorial for some time now… Nicely explained, thanks a lot!
Tablets

Jun 10th, 2009

Hi guys. Very useful blog. Thanks.
Grunt

Jun 19th, 2009

Fantastic information, found it very helpful and informative, thank you. Added to my bookmarks!!
Joomla Experts

Jul 11th, 2009

u guys are the best!
Web Design Johannesburg

Jul 15th, 2009

This was a really great post i have referenced you at my blog. Thank you.
Chris

Jul 16th, 2009

Great tutorial. You’ve given me inspiration to modify an existing theme I have. So far, I’ve only tried to do basic stuff like changing the header and footer.
Thanks
Broorgoigniny

Aug 23rd, 2009

In it something is. Now all became clear to me, Many thanks for the information.
altentVot

Aug 25th, 2009

And as it to understand
Zotrim review

Sep 2nd, 2009

Great stuff, just what I was looking for!

Thanks,
Jill
Aaron Wall

Oct 11th, 2009

Great helpful information, Thanks for this nice post, just subscribed your feed, hope you will update new post soon.
keep it up.

Aaron.
Stinky68

Oct 23rd, 2009

It answered multiple questions that I had. ,
Yablochniks

Nov 3rd, 2009

Сегодня меня лишили примии. Ой.. кризиз на дворе.. хоть у вас черпнул слегка позитива. Спасибо webmajstor.org !
Pharmg116

Nov 8th, 2009

Very nice site!
Modify my loan

Nov 9th, 2009

I really like your blog. One of the coolest designs with content I have seen in a while. The content is really good and I would like to be on your mailing list.
tutorialslk

Apr 10th, 2010

Great Post…. Thanks..!