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). You could also check out 100+ Best WordPress Premium themes and top 90 free wordpress themes.
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:
Have a look at the simple style sheet for the basic layout. Save this as “style.css”. We would need it later.
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”.
2. Copy the fragment below and save it in a new file as “footer.php”.
3. Copy the sidebar code and save it in a new file as “sidebar.php”.
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.
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.
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.
3. Do check our list of 100+ Best WordPress Premium themes and 90+ best wordpress templates/themes you can use for your blog.
Related posts:
- How To Create A GTalk Theme Quite some time back Google talk had an update, which included theme support. Now I don’t know about...
- Create Free iPhone Ringtones in 2 minutes Creating iPhone ringtones for Free is easy. Do you think, you really have to pay 0.99 for a...
- Part 8 – How to Edit the Blog Template In the previous article, I have explained how to set a domain for your blog. Now you have...
- WordPress Theme Tester How many times have you thought of changing your WordPress Theme, but held yourself back worrying about their...
- Installing WordPress Locally Using MAMP Installing MAMP and running WordPress locally on your Mac is a simple task, however I was unable to...
- WordPress Features Here is a list of features offered by WordPress.com. Not complete but hey, its got all the important...
- WordPress 3.0 Real Estate Theme Update – OpenHouse V3 I’m very proud to introduce the latest version of one of the most popular themes in the store,...
- Upgrading WordPress to WordPress 2.8x Normally, WordPress tests all its upgrades before releasing them to the WordPress community. With the easy added feature...
- Search Engine Optimization for WordPress What is going on with WordPress? What is going on with blogs? In a very short time blogging...
Blog
This article is great!
Can you create an article to how to create wordpress plugins ?
Thanks in advance
Sure! I’ll have that in mind before writing the next article.
Great post, really helpful.
thanks!
This tutorial is freaking awesome! I’m one step closer to being a WP badass!
ok thanks……..
We are creating a Video Library in WordPress. WordPress rocks !!
I like this approach very simple compared to other tutorials. thanks~
Great Post; most tutorials forget that some of us are newbies..
Made it real simple, thanks
hi guys,
i’m a french reader of your site and i can say that’s quite cool !
i discover this solution by chance on an french e-shop : (www.mephishop.fr/artisteer/4-artisteer-v2x.html)
two questions :
1. do you know this product ? what do you think about it ?
2. do you think i should invest in this product ?
thanks
best regards
micka
@micka, its not worth the cost you pay for it… In my opinion, you shouldn’t buy it…
Doesnt it need php coding for the acrhives posting comments etc?
Thanks for simple lesson, i want to try this easy guide, thanks…:-)
nice ideas, simple and easy to make wordpress themes
nauczylem sie bardzo wiele
C наступающим Вас! Пусть Ваши мечты сбудутся!
extraordinary, a very good post, and I’ve never found like this before. thank you for much.
thanks for sharing this . . .
now I’m just learning to make templates wordpress
Thanks a lot, I have fear to make wordpress theme & even i haven’t any clear idea. But now i feel very much better after read the tutorial.
Its a pleasure that we could help you. Let us know if we could help you in any way regarding wordpress blog.
how do you shut off items of your blog? i.e. search, archives, tags, etc.
i want to be able to make a business website without all the unnecessary blog stuff.
i love WP, but I’m new and don’t quite have my head around it yet.
i’ve seen a lot of sites that are beautiful out there but have none of the blog type look to it; and that’s what i’m trying to create.
Mark
Hi Mark,
We could help you out with this.
~Levoltz
I’m not trying to be controversial here, but I’m sick of Free WordPress themes. I feel WP is one reason the web is so polluted with horrible sites. At least building your own WP site shows you are truly interested in being orginal and have a real interest in having an online prescence.
@Html Link:
This post is all about creating your own theme… This never speaks about free wordpress theme.
I know. The comment was my way of venting about people being lazy and not building their own wordpress theme. It was a compliment to you for showing people how they too can break the mold and come up with their own ideas. Sorry if you got the wrong idea – I’m pretty lousy at conveying my thougts sometimes.
Wow, great resource. We’ve been ordering a tonne of WP themes for our bingo network, but I never realised it was this easy! I might try myself. Thanks a tonne
thanks, this lesson is easy.. u can bet ill give it a try
thank you very much
and this is a great site.
looks like you didnt left out anything.
way to go.. keep up the good work
great article
mmmm why the code into textarea of header.php is without tag html, tag header etc??
thanks for this post is very good for me!
bye
That’s a good article about How-To: Create a WordPress Theme in 5 minutes | LeVoltz. Thanks for the info.
You chose great title for this post specially the part ” in 5mins” Its very attractive. Good luck.
I think the cut and paste areas are missing some characters, but I downloaded the archive and it worked fine. Very cool for such a short tutorial. Thanks!
i was wondering if there are webmasters who manages several thousand websites at a time.’~.
Thanks for this nice article that you have made, this is what I’m looking because I want a unique template.
thanks so much for the step by step! it really is confusing especially to beginner bloggers like me. i’ll probably have tons more questions as i continue and i know exacty where to come.
Thanks! This is EXACTLY what I needed. An extremely simple solution that could be modified basically from the ground up. Much appreciated.
Have your cake and eat it kind of a dillema. What should today’s grooms do? Have a expensive reception or save for a home? I would take the second without a doubt
I am trying to use autoblog, Thanks!
This helped soooo much…
Thank you for the tutorial!! it was really helpfull
Merci pour le partage, c'est génial!
thanks for your post.. it’s so helpfull
Great post ! It was very helpful