How-To: Create a Wordpress Theme in 5 minutes

How-To: Create a WordPress Theme in 5 minutes

17Sep06

Hi, how many of you have felt the need to create a new wordpress template/theme and felt that the structure is too intimidating? We had the same feeling too until we realised how easy it is to create a wordpress template. (I also presented this at the BlogCamp 2006, Chennai)

A few things before you need a template are:

1. Figure out the layout of your blog. That is, you should be clear about what should be placed where. Ofcourse, it’s entirely at your discretion.
2. Create a simple HTML page that show cases your layout.
3. Mould the simple page into a beautiful wordpress template.

Ready?? Ok, let’s start!

As said in point 1, I have just created a basic layout as shown in the screen shot below.

You can definitely tell about the various sections that make up the page. They are the header, content, sidebar, footer. To abstract this and give power to the template designers, wordpress has placed the various sections into different pages.

In addition to this, you have to add proper CSS to your design. Include them in “style.css”.

Therefore, the files necessary are:

1. header.php -> Header
2. footer.php -> Footer
3. sidebar.php -> Sidebar
4. index.php -> Content glued with header, sidebar and footer.
5. style.css -> CSS

That is all you need to create a basic template. Clear? Any doubts? Post them here.

Designing the Template:

The HTML for our basic layout goes like this:

<html> <head> <title>Demo Template</title> <link rel="stylesheet" href=”style.css” mce_href=”style.css”> </head> <body> <div id=”wrapper”> <p><h1> </h1></p> <div id=”header”> <h1>HEADER</h1> </div> <p><h1> </h1></p> <div id=”main”> <div id=”content”> <h1>CONTENT</h1> </div> <div id=”sidebar”> <h1>SIDEBAR</h1> </div> </div> <div id=”both”></div> <p><h1> </h1></p> <div id=”footer”> <h1>FOOTER</h1> </div> </div> </body> </html>

Have a look at the simple style sheet for the basic layout. Save this as “style.css”. We would need it later.

body { text-align: center; } #wrapper { display: block; /*border: 1px #000000 solid;*/ width:90%; margin:0px auto; } #header { border: 2px #00ff00 solid; } #content { width: 75%; border: 2px #ff0000 solid; float: left; } #sidebar { width: 23%; border: 2px #ffff00 solid; float: right; } #both { clear: both; } #footer { border: 2px #0000ff solid; }

Now that you have saved it, open the HTML file in a good text editor. You can see sections that are tagged with “header”, “footer”, “sidebar” and “content”. Let us create the header file.

1. Open notepad, and paste the code shown below. Save this file as “header.php”.

<br/> <title>Demo Template</title> <br/>”> <div> <p><h1> </h1></p> <div> <h1>HEADER</h1> </div> <p><h1> </h1></p> <br/></div>

2. Copy the fragment below and save it in a new file as “footer.php”.

<br/> <div> <h1>FOOTER</h1> </div> <br/>

3. Copy the sidebar code and save it in a new file as “sidebar.php”.

<br/> <div> <h1>SIDEBAR</h1> </div> <br/>

4. Last but not the least, let us create the “index.php”. If you notice, there are special lines such as “”, “”, “”. These are the functions that are used to glue the content with header, sidebar and footer. Great! we are almost done… few more minutes.

<br/> <div> <div> <h1>CONTENT</h1> </div> </div> <div></div> <br/>

5. Create a new folder and name it as “DarlingTemplate”. Move all the newly created files, including the “style.css” to the folder. To test the new template, upload[:1] this folder to the /wp-content/themes folder. Login to your blog and you will see the new template under the “Presentation” tab.

6. Click on our template name to activate it. Well, everything is cool. The template looks just like the simple HTML file we created earlier. But, what happened to the posts?

7. Open up “index.php”, replace it with the text in the following box and save it. Make sure the modified file is uploaded to the /wp-content/themes/DarlingTemplate folder. Refresh the blog homepage. Voila!! the posts are there.

<br/><br/> <br/> <div><br/><br/> <div><br/> <h1>CONTENT</h1><br/><br/> <br/><br/> <h1></h1><br/> <h4>Posted on </h4><br/> <p></p><br/> <hr /><br/><br/> <br/> <p></p><br/> <br/><br/> </div><br/><br/> <br/><br/> </div><br/><br/> <div></div><br/><br/><br/>

8. Oh! we are still left with 30 seconds. Take a screen shot of your theme. Save it as “screenshot.png” and upload it to

/wp-content/themes/DarlingTemplate.

Now, when you login to your wordpress account, our template will have a medium sized thumbnail picture.

We have uploaded the final sample template as a zip file for your reference. Download it here.

This is how the final version of DarlingTemplate looks. I know it’s not professional, but you have learnt the basic tricks of building a new template.

Happy Templating!

Note:
1. You cannot upload the new template if your blog is hosted at wordpress.com.
2. How to Ajax -ify your wordpress template - coming soon.

Digg this, Pad this.

Hack the Bot: wordpress, template, design, webpage, html, coding, php, css, tutorial, DIY, tips, tricks, hacks, how+to

Technorati Tags: WordPress Template, Template design, webpage design, tutorials, diy, tips, tricks, hacks, how to, html, php, coding, wordpress, Theme.

Filed under: DIY, Extras, Hacks, How-To, Monthly Spl., blogcamp, wordpress |

113 Responses to “How-To: Create a WordPress Theme in 5 minutes”

Feed for this Entry Trackback Address

1 bc on October 25, 2006 said:

Can’t download de zip file!
Nice tutorial anyway.
2 aswinanand on October 25, 2006 said:

@bc:
Thanks for pointing it out. You can download the sample at http://www33.brinkster.com/aswinanand123/DarlingTemplate.zip
3 enoch benjamin on October 26, 2006 said:

sweet! I have been scouring the web for a quick tutorial for people with short attention spans! This tutorial was a life saver!

thanks!
4 enoch benjamin on October 27, 2006 said:

If anyone wants a real life endorsement of this tutorial - look at what I was able to whip together in about 40 minutes: http://www.enochbenjamin.com/blog/
5 Aswin on October 27, 2006 said:

@enoch:
Thanks btw, its pretty ok.. considering that you took just 40 minutes to build it
6 James on November 11, 2006 said:

Great tutorial, thanks for the info.

I have a question though, I was wondering if it would be possible to start designing a template using the “slicing” technique? The difference then would be that we will have tables instead of DIV, would that be a problem? any tips or suggestions?

The way I normally design websites is that I start producing the design in photoshop, slice the design and export as HTML. Not sure if I can follow the same approach in creating wordpress themes.

Thanks.
7 aswinanand on November 11, 2006 said:

@James:
Thanks James

You can actually use the slice technique. After you place the contents of header, footer etc. in the different files and activate the template, reload your blog. Now, on the browser menu, click on View->Source. You can see that the generated HTML code is valid.

So, first build your simple html file. Then slice it into different pages/images and put them in the respective files. That should be it. We use because its easier to apply different kinds of CSS to the same layout.
8 L Oak on November 22, 2006 said:

I tried to download your files, I download them then use stuffit expander to uncompress the files and I get the message.” The file “DarlingTemplate.zip” does not appear to be compressed or encoded. It is advised that you obtain further information about the contents of this file from the sender or provider of the file.

It should be noted that I am using a mac. Please help!! I too am a n00b at theme stuff with wp, but know a good amount of HTML, CSS and I am a graphic designer. Thanks for the help!!
9 trainingpotato on January 8, 2007 said:

I love you. I was falling asleep trying to work this out and you just woke me up and re-inspired me into thinking it’s easy again.

Let’s just see if I can actually get my template to look like what my head says it should look like…
10 Sab on January 11, 2007 said:

whats the best php scripts website?
11 andrew on January 16, 2007 said:

Thanks so much for this tutorial… You’ve managed to turn something (creating a bespoke WP template) which seemed at first beyond me - even with a fair knowledge of html and a rudimentary knowledge of scripting languages. Put simply you’ve done something I love - demystify a technique which is actually simple but is shielded in unnecessary hoo ha!

My redesigned site is now uploaded but not entirely complete - need to redesign the front page, redesign the images and sort my CSS out (http://www.barelyhifi.co.uk).

Thanks again

Andrew
12 Aswin Anand on January 16, 2007 said:

@andrew:
Thanks
13 Mike on February 2, 2007 said:

Hey great tutorial. i have been searching around for a how to on how to build a custom template. I have great experience with HTML but new to the CSS and PHP thing I have the template uploaded and it is pretty simple to understand, but how do I customize the look of the page? such as header, body, background? thanks for the help!

Mike
14 Aswin Anand on February 4, 2007 said:

You can customize the look using CSS and other HTML related formatting tags. There are lots of CSS tutes available on the internet. Go for them.
15 khairilz on March 2, 2007 said:

how about adding image to the theme?
the theme look empty..there is no image!
can u create another tutorial on how to put the image to the theme such as header image,footer image,sidebar image and footer image..
check it out this web site http://kyohakeem.siotz.org can u teach me how to create theme like that?it owesome
16 Aswin Anand on March 2, 2007 said:

@khairilz:
You can put images using the “img” tag. Go to http://www.w3schools.com to learn more about html and css.
17 Scott on April 8, 2007 said:

Great tutorial. Thanks! But one question: in item # 4 you say “If you notice, there are special lines such as “”, “”, “”. “… well, actually I don’t see those at all, but then again I’m not sure what I’m looking for. Do you mean this literally, like we should be looking for two quotation marks together, or are you saying we should be looking for blank lines? This is confusing to me, as is the idea of how the index file “glues” everything together.
18 Aswin Anand on April 9, 2007 said:

@Scott:

Oops! it seems wordpress has truncated some tags in the blog post. I hope you are able to download the sample.

The special lines are “get_header()”, “get_footer()” and “get_sidebar().”
19 patrickd on April 10, 2007 said:

so simple..
20 Razzaq on May 11, 2007 said:

hi,
U become RICH.This is very Good site For Winning the project of all type.
21 leigh on May 23, 2007 said:

if i could rearrange the alphebet i would put u and i toghther
22 leigh on May 23, 2007 said:

love u forever blake please lets stick togther
23 Damien on June 8, 2007 said:

I’ve been looking for a tutorial like this for some time. i appreciate you taking the time to write it!
24 JC on July 1, 2007 said:

THANK YOU SOOOO MUCH! I have been on WordPress support for 2 days trying to get such simple answers. The answer I got was if I did not understand their instructions I should not be using WordPress. Thanks for helping!!

JC
25 Lia on July 4, 2007 said:

@James:
You can actually set up Photoshop (I run CS2 on my comp) to produce divs rather than tables.

http://www.daniweb.com/blogs/entry688.html

It positions the divs in ‘absolute’ but it shouldn’t be so hard to alter that.

Hope this helped
26 Paradise Philippines on July 7, 2007 said:

Nice tutorial, I have noticed the photoshop in creating wordpress themes.. But I don’t know how, maybe I could learn it in the future..

Any ideas how to do it, please email me some links, resources about it: my email admin[at]nolimirador[dot]com.

Thanx..
27 Humberto Cruz on July 24, 2007 said:

Hello, how are you ?

I realy love your tutorial! I am developing a Webdesign linux version and i want to put lot of wordpress content in it and I would like to put a portuguese translated version of your tutorial in my job, of course with your permission and credits. My project is also a final project for a pos graduation in free software.

thanks
Humberto
28 Aswin Anand on July 26, 2007 said:

Humberto, please go ahead. Thanks for offering to translating it into Protuguese. Once done, please paste the link of the Portuguese version here.
29 mei on July 27, 2007 said:

wow. thanks a lot. i’ve been reading about other tutorials today and i kind of fell asleep on the middle part of their tutorials. Good job! You made it look easy.
30 Lindsey on August 1, 2007 said:

Thank you so much for this tutorial. ♥
31 Karl on September 29, 2007 said:

Nice, really explain the basic stuff in a pedagogic way. !
32 goadado on October 31, 2007 said:

ONLINE - DRUGSTORE!
PRICES of ALL MEDICINES!

FIND THAT NECESSARY…
VIAGRA, CIALIS, PHENTERMINE, SOMA… and other pills!

Welcome please: pills-prices.blogspot.com

NEW INFORMATION ABOUT PAYDAY LOANS!

Welcome please: payday-d-loans.blogspot.com

GOOD LUCK!
33 Chris on November 5, 2007 said:

Nice tutorial, definitely something to explore further.

What would make it even better? Make a short tutorial video and post it here.. embed it as a flash in the site (use Camtasia or something similar to quickly creat the video, http://www.camtasia.com)

Thanks again!

Palaestra Training
http://www.palaestratraining.com
34 Rédaction on November 17, 2007 said:

Great tutorial , thank you !!
35 Vinit on December 3, 2007 said:

Nice Tutorial ! But header,footer.php or other how to customize them with older themes or any new ready them ? Can u explain that ? Please. . . . Any Way thanx for nice tut.
36 lilmsstarshine2 on December 19, 2007 said:

WHAT?
37 Andy on December 19, 2007 said:

Oh, and did not know about it. Thanks for the information …
38 Pukhraj on December 31, 2007 said:

I have been looking for a tutorial like this and i am feeling glad to say that you really impressed me. Thanks to save my time and give me a quick learning.
Thanks!
39 music on January 6, 2008 said:

very interesting.
i’m adding in RSS Reader
40 alle on January 10, 2008 said:

I have followed all steps and I think this tutorial is a good start, but still it’s only a start..
my question is, how can I use your tutorial and still have an automatic sidebar (wordpress script manageable) - and to make matters worse, with two columns ??
41 mark on January 19, 2008 said:

Thanks so much!!!! I’ve been looking for a tutorial like this for a long time!

I’m having trouble and hopefully you can help? How come when I insert an image in place of the tags you have in the header.php and footer.php files, the images don’t show? I only get the alt text!
42 Zipod(RPF GENERAL) on February 15, 2008 said:

um hi, HOW DO U PUT IT ON THE INTERNET!?!?!??!?!??!?!???!?!??!?!??
43 Zipod(RPF GENERAL) on February 15, 2008 said:

HOW DO U PUT IT ON THE WEB!?!?!?
44 Canon a720 on February 29, 2008 said:

I tried to download your files, I download them then use stuffit expander to uncompress the files and I get the message.” The file “DarlingTemplate.zip” does not appear to be compressed or encoded. It is advised that you obtain further information about the contents of this file from the sender or provider of the file.

THANK YOU VERY MUCH FOR EVERYTHING
45 Aswin Anand on March 2, 2008 said:

@Canon:

Try to unzip the file using winzip or winrar. Unzipping the archive works properly for me.
46 Free Templates on March 22, 2008 said:

Get Free professional Templates.
47 aideel on April 25, 2008 said:

Nice tutorial

How can i add another bar at bottom page that the widget can detect as bottom_bar?
48 Dan on May 29, 2008 said:

I know this post is is more than a year old, but it has helped me out alot.

I have always a bit intimidated with wordpress themes since I didn’t have knowledge of php. This helps me see that it’s nothing more than simple css manipulation.

I already have a whole theme based on the skeleton of the files provided.

Thanks - I’m definately linking to you to tell others how they can learn how to start making their own themes.
49 Coisox on June 9, 2008 said:

Thank you for the great tutorial. Never thought it would be that simple. You manage to remove the unnecessary part (the images, alignment, bla..bla..). Anyway, actually I Googled for “wordpress template without footer” but ur blog came out. I must be so lucky to find this!

P/S: Your SEO must be power… :p
50 Coisox on June 9, 2008 said:

Sorry for double posting. After I read ur tutorial then I try it out. I face a problem.

You said,
“If you notice, there are special lines such as “”, “”, “”.”

Which one are you referring to? The one that you asked us to copy from header.php?
51 Aswin Anand on June 9, 2008 said:

Coisox, wordpress has removed a lot of content from the text boxes. Please download the attachment and try.
52 canon xs on June 12, 2008 said:

very interesting post, thank you very much
53 Minneapolis Web Design on June 17, 2008 said:

Thanks for this!
54 tomdurkin1 on June 19, 2008 said:

awesome! I will be trying this out tomorrow
55 tasarhane on June 19, 2008 said:

thanks for the good info..
56 Mike on June 19, 2008 said:

Sounds like this is a GREAT tutorial.

But after reading it all through…I still think it would be more pleasurable cutting off my own arm with a blunt penknife than trying to create my own website!

I’ll have to stick with paying people who actually enjoy this kind of torture to do it for me!

Thanks though!

Mike
57 martialarts on June 20, 2008 said:

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..
58 Cian on June 21, 2008 said:

Is there any reason in particular why my images wouldn’t show up on the website? I can’t get them to display, and they’re essential to my layout.
59 Callan on July 4, 2008 said:

Didn’t work for me! I don’t know what I have done wrong.
60 Vipin on July 19, 2008 said:

When someone make learning a Fun Process, its very easy to understand . This tutorial on the WordPress Blog is example of that.

Regards

VIpin
61 canon xs on August 11, 2008 said:

interesting post
62 Jie on August 20, 2008 said:

Thanks. You make this easier for me.I am really having a hardtime making blogs at wordpress.
63 Armand on August 25, 2008 said:

Nice tutorial. I’d like to try that one.
64 canon a2000 on September 1, 2008 said:

really very interesting information
65 canon a1000 on September 1, 2008 said:

fantastic post, thanks a lot
66 canon sx110 on September 4, 2008 said:

great post
67 canon g10 on September 28, 2008 said:

wow
68 Un roman in Canada on October 10, 2008 said:

Hi,
You did a great job writing down here a lot of good information.
I’m not an expert in php and your advices really help.
Now, I want to change my default wp theme (on my new blog) in just one way: I want every post from index and achieve pages to has (read more) by default. Let’s say, they will can read only the first paragraph, or first 50 characters or something like this… not entire post in index.
I really don’t like when the people can read with just one click on my home page, all (10) latest posts.
Can you help me with this?
I really appreciate!
Ken.
69 Lee on October 14, 2008 said:

Very cool post, it’s been on my list to sort out the themes of a couple of my blogs as they’ve been integrated into main sites but haven’t had the energy to decipher the existing themes.

This is an excellent post and I pretty much had it all sorted in an hour!

Thanks!