How-To: Create a WordPress Theme in 5 minutes

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.


Sample Template Screenshot

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.

Final show of the DarlingTemplate

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:

  1. 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...
  2. 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...
  3. 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...
  4. WordPress Theme Tester How many times have you thought of changing your WordPress Theme, but held yourself back worrying about their...
  5. Installing WordPress Locally Using MAMP Installing MAMP and running WordPress locally on your Mac is a simple task, however I was unable to...
  6. WordPress Features Here is a list of features offered by WordPress.com. Not complete but hey, its got all the important...
  7. 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,...
  8. Upgrading WordPress to WordPress 2.8x Normally, WordPress tests all its upgrades before releasing them to the WordPress community. With the easy added feature...
  9. Search Engine Optimization for WordPress What is going on with WordPress? What is going on with blogs? In a very short time blogging...

Tags: , , , , , , , , , , , , , ,

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

  1. windows 7 04. Sep, 2009 at 5:36 am #

    This article is great!
    Can you create an article to how to create wordpress plugins ?
    Thanks in advance

    • levoltz 04. Sep, 2009 at 6:26 am #

      Sure! I’ll have that in mind before writing the next article.

  2. Donanza 13. Sep, 2009 at 2:20 am #

    Great post, really helpful.
    thanks!

  3. Ibrahim 29. Sep, 2009 at 7:04 pm #

    This tutorial is freaking awesome! I’m one step closer to being a WP badass!

  4. dony 28. Oct, 2009 at 11:39 pm #

    ok thanks……..

  5. tome 05. Nov, 2009 at 7:37 am #

    We are creating a Video Library in WordPress. WordPress rocks !!

  6. Kylia 25. Nov, 2009 at 8:51 pm #

    I like this approach very simple compared to other tutorials. thanks~

  7. Atlanta Web Design 25. Nov, 2009 at 8:52 pm #

    Great Post; most tutorials forget that some of us are newbies..

  8. Adsurf 27. Nov, 2009 at 1:26 pm #

    Made it real simple, thanks

  9. micka 28. Nov, 2009 at 9:33 am #

    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

    • LeVoltz 28. Nov, 2009 at 4:13 pm #

      @micka, its not worth the cost you pay for it… In my opinion, you shouldn’t buy it…

  10. elo 30. Nov, 2009 at 7:04 am #

    Doesnt it need php coding for the acrhives posting comments etc?

  11. modern house desig 06. Dec, 2009 at 6:13 am #

    Thanks for simple lesson, i want to try this easy guide, thanks…:-)

  12. luxury house design 06. Dec, 2009 at 6:14 am #

    nice ideas, simple and easy to make wordpress themes

  13. online 22. Dec, 2009 at 11:19 pm #

    nauczylem sie bardzo wiele

  14. EffofsDiene 31. Dec, 2009 at 1:00 pm #

    C наступающим Вас! Пусть Ваши мечты сбудутся!

  15. Frans 05. Feb, 2010 at 4:15 pm #

    extraordinary, a very good post, and I’ve never found like this before. thank you for much.

  16. ericjogja 09. Feb, 2010 at 6:29 am #

    thanks for sharing this . . .
    now I’m just learning to make templates wordpress

  17. K M Sadrul Ula 08. Mar, 2010 at 5:21 am #

    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.

    • LeVoltz 08. Mar, 2010 at 6:05 am #

      Its a pleasure that we could help you. Let us know if we could help you in any way regarding wordpress blog.

      • Mark Weese 29. Jul, 2010 at 4:47 am #

        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

        • LeVoltz 30. Jul, 2010 at 1:44 am #

          Hi Mark,
          We could help you out with this.

          ~Levoltz

  18. Html Link 13. Mar, 2010 at 10:39 am #

    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.

    • LeVoltz 13. Mar, 2010 at 11:47 am #

      @Html Link:
      This post is all about creating your own theme… This never speaks about free wordpress theme.

  19. Html Link 13. Mar, 2010 at 10:09 pm #

    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.

  20. Bingo 24. Mar, 2010 at 12:14 pm #

    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 :)

  21. download free templates 25. Mar, 2010 at 10:52 am #

    thanks, this lesson is easy.. u can bet ill give it a try
    thank you very much
    and this is a great site.

  22. הקלטות אולפן 28. Mar, 2010 at 11:03 pm #

    looks like you didnt left out anything.
    way to go.. keep up the good work
    great article

  23. evilripper 08. May, 2010 at 11:43 am #

    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

  24. Ghani 08. May, 2010 at 4:50 pm #

    That’s a good article about How-To: Create a WordPress Theme in 5 minutes | LeVoltz. Thanks for the info.

  25. Fitnessblog 15. May, 2010 at 8:32 am #

    You chose great title for this post specially the part ” in 5mins” Its very attractive. Good luck.

  26. Russ 18. May, 2010 at 1:25 am #

    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!

  27. Layla Cook 23. May, 2010 at 11:13 am #

    i was wondering if there are webmasters who manages several thousand websites at a time.’~.

  28. mahalto 26. May, 2010 at 3:04 am #

    Thanks for this nice article that you have made, this is what I’m looking because I want a unique template.

  29. Classic Wedding Photographer 28. May, 2010 at 2:56 pm #

    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.

  30. david 01. Jun, 2010 at 1:25 pm #

    Thanks! This is EXACTLY what I needed. An extremely simple solution that could be modified basically from the ground up. Much appreciated.

  31. kevin walkers 22. Jun, 2010 at 10:27 am #

    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

  32. SexyContent 29. Jun, 2010 at 8:27 pm #

    I am trying to use autoblog, Thanks!

  33. Kyle 07. Jul, 2010 at 7:07 am #

    This helped soooo much…

  34. celhya 16. Jul, 2010 at 4:10 pm #

    Thank you for the tutorial!! it was really helpfull :D

  35. tattoo 19. Jul, 2010 at 12:19 am #

    Merci pour le partage, c'est génial!

  36. yulianti 19. Jul, 2010 at 12:38 am #

    thanks for your post.. it’s so helpfull :D

  37. מצלמה נסתרת 25. Jul, 2010 at 12:11 am #

    Great post ! It was very helpful :)

Trackbacks/Pingbacks

  1. Top 5 Most Selling Themes in ThemeForest | LeVoltz - iPhone Games, Engineering Projects, Wordpress Themes - 07. Feb, 2010

    [...] flexible admin area, you are able to edit every content from the wordpress [...]

  2. Wordpress – Recursos para Webmasters | Tienda virtual online. Diseño de paginas web. Posicionamiento Seo y Sem - 16. Feb, 2010

    [...] Cómo: Crear un tema de WordPress en 5 minutos – Un tutorial que muestra cómo configurar un tema de WP básicos. También incluye todo el código que necesitarás. [...]

  3. 65 Of The Best WordPress Tutorials « Junkiee.Net - 21. Feb, 2010

    [...] 15. How-To: Create A WordPress Theme In 5 Minutes [...]

  4. وورد برس عربيا » Blog Archive » 25 درس لتصميم قوالب وورد برس احترافية - 28. Feb, 2010

    [...] 21. How-To: Create a WordPress Theme in 5 minutes [...]

  5. WordPress Expert Resources - 18. Mar, 2010

    [...] How-To: Create a WordPress Theme in 5 Minutes – A tutorial that shows how to set up a basic WP theme. It also includes all the code you’ll need. [...]

  6. wordpress 资源收藏 - 26. Mar, 2010

    [...] How-To: Create a WordPress Theme in 5 Minutes (怎样在五分钟内建立一个 WP 主题) – 展示怎样建立一个基本的 WP 主题,同时包括了所有需要的代码。 [...]

  7. 350 resources to help you master WordPress - 28. Mar, 2010

    [...] How-To: Create a WordPress Theme in 5 Minutes – A tutorial that shows how to set up a basic WP theme. It also includes all the code you’ll need. [...]

  8. 300+ Resources to Help You Become a WordPress Expert « Dheerajir's Blog - 23. Apr, 2010

    [...] How-To: Create a WordPress Theme in 5 Minutes – A tutorial that shows how to set up a basic WP theme. It also includes all the code you’ll need. [...]

Leave a Reply

Get Adobe Flash playerPlugin by wpburn.com wordpress themes