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)
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.
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: blogcamp, DIY, Extras, Hacks, How-To, Monthly Spl., wordpress | 250 Comments
250 Responses to “How-To: Create a WordPress Theme in 5 minutes”
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
- 58
- 59
- 60
- 61
- 62
- 63
- 64
- 65
- 66
- 67
- 68
- 69
- 70
- 71
- 72
- 73
- 74
- 75
- 76
- 77
- 78
- 79
- 80
- 81
- 82
- 83
- 84
- 85
- 86
- 87
- 88
- 89
- 90
- 91
- 92
- 93
- 94
- 95
- 96
- 97
- 98
- 99
- 100
- 101
- 102
- 103
- 104
- 105
- 106
- 107
- 108
- 109
- 110
- 111
- 112
- 113
- 114
- 115
- 116
- 117
- 118
- 119
- 120
- 121
- 122
- 123
- 124
- 125
- 126
- 127
- 128
- 129
- 130
Can’t download de zip file!
Nice tutorial anyway.
@bc:
Thanks for pointing it out. You can download the sample at http://www33.brinkster.com/aswinanand123/DarlingTemplate.zip
sweet! I have been scouring the web for a quick tutorial for people with short attention spans! This tutorial was a life saver!
thanks!
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/
@enoch:
Thanks 🙂 btw, its pretty ok.. considering that you took just 40 minutes to build it 🙂
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.
@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.
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!!
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…
whats the best php scripts website?
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
@andrew:
Thanks 🙂
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
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.
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
@khairilz:
You can put images using the “img” tag. Go to http://www.w3schools.com to learn more about html and css.
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.
@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().”
so simple..
hi,
U become RICH.This is very Good site For Winning the project of all type.
if i could rearrange the alphebet i would put u and i toghther
love u forever blake please lets stick togther
I’ve been looking for a tutorial like this for some time. i appreciate you taking the time to write it!
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
@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
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..
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
Humberto, please go ahead. Thanks for offering to translating it into Protuguese. Once done, please paste the link of the Portuguese version here.
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. 🙂
Thank you so much for this tutorial. ♥
Nice, really explain the basic stuff in a pedagogic way. !
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!
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
Great tutorial , thank you !!
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.
WHAT?
Oh, and did not know about it. Thanks for the information …
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!
very interesting.
i’m adding in RSS Reader
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 ??
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!
um hi, HOW DO U PUT IT ON THE INTERNET!?!?!??!?!??!?!???!?!??!?!??
HOW DO U PUT IT ON THE WEB!?!?!?
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
@Canon:
Try to unzip the file using winzip or winrar. Unzipping the archive works properly for me.
Get Free professional Templates.
Nice tutorial 🙂
How can i add another bar at bottom page that the widget can detect as bottom_bar?
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.
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
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?
Coisox, wordpress has removed a lot of content from the text boxes. Please download the attachment and try.
very interesting post, thank you very much
Thanks for this!
awesome! I will be trying this out tomorrow 🙂
thanks for the good info..
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
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..
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.
Didn’t work for me! I don’t know what I have done wrong.
When someone make learning a Fun Process, its very easy to understand . This tutorial on the WordPress Blog is example of that.
Regards
VIpin
interesting post
Thanks. You make this easier for me.I am really having a hardtime making blogs at wordpress.
Nice tutorial. I’d like to try that one.
really very interesting information
fantastic post, thanks a lot
great post
wow
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.
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!
How you think when the economic crisis will end? I wish to make statistics of independent opinions!
First everything looked intimidating … your simple tutotial is a good help. Thank you.
“”
You got to be kidding me!!! please…stop spreading this garbage code…
WP ate my code….talking about breaks BR BR BR BR? how about padding/margin-bottom/top
Hi!. If I using wordpress.com account for my electric guitar blog http://gibsonlespauls.wordpress.com/ , can I create new theme and add it to wordpress.com? If i can, How to do that? Thanks in replying.
Kritmoney, you cannot create your own themes and add it to wordpress.com blogs.
Thenk 🙂
great tips. but it took more than 5 minutes for me!!!
Got rid of the “both” div, added the opening “content” div to the bottom of the header, added the closing content div to the top of the footer, and it works fine.
Hey, great tutorial. The step by step copy and paste stuff didn’t work for me. All I got was the content section. There seemed to be a lot missing from the code (like those “”,””,”” bits you mention). So I downloaded the zip package and that does the trick nicely (although index.php looks a lot different from what you have on the page to copy.)
Dude thank you for creating this, I was having the hardest time trying to find a simple template that i could use as a starting point.
so easy
Thank you very much for the information.
thanks broo…
Extremely helpful. Thanks a lot, mate.
hello!!!!!!
very thankful to you for giving such amezing technique……… but it is auite difficult when matter comes to a dynamic site….
where can I download winrar from your blog? winRAR compress content 8 to 30 percent better than ZIP!
Hi,
This is a wonderful tut but can you tell me how to make the sidebar widget ready??
when i try adding widgets it shows that “The theme you are currently using isn’t widget-aware, meaning that it has no sidebars that you are able to change.”
Great work ! i never saw a tutorial of 5 mins and very effective !
I was thinking that this will be very difficult to make your own theme but your post has solved my problem.
Thanks for the good post
how to create 3 kolom WP theme? (2 sidebar in left and right columns). Thanks
As for me, I already for several days cannot succeed with my WP theme.. 😦
земельные участки
Hi This is Nepaliko Radio 88.8 MHz. from nepal. thankx a lot for support making a theme….. but I have some question please ..support this is very urgent for me ..I want to Display news categories wise
EXample :::
1. Display last 3 News from Catagorie Number : 1
2. Display last 3 News from Catagorie Number : 2
3. Display last 3 News from Catagorie Number : 3
but remember in short news…. image should be display…
Santosh Bhattarai
E-mail : santosh.bhattarai@gmail.com
Why is the theme elements not centered?
Great insights! Very helpful for a simi novice.
Man you are like a genious . You got some great skills and looks like you a pro in this field .
Do you have a template site or what ?
Great….
I want to try it…
thanks,.,.
Finally, been waiting for time to come… Thats exactly what I was looking for, thanks for sharing.
Spot on with this write-up, I actually suppose this website wants way more consideration. I’ll in all probability be again to learn far more, thanks for that info.
Reblogged this on Amit8802630334's Blog.
wow ! you are amazing in how simply you explained it .
Anyway, there are few things I didn’t get.
In the final picture you uploaded, in the footer , there was “Hello world” but when I checked the code you made, I didn’t find !
The code was simply like this :
”
FOOTER
”
you see ? no hello world !
Anyway,
I noticed something which is this code :
There is nothing in between , so I assume there’s no purpose of using it , am I right ?!
what great article is this..
To know more about Classified site creation and blog posting articles just click this link friends..
http://www.erodetoday.com/index.php
studypluz.com provides indian colleges,schools,polytechnics,teacher training institutes etc……http://blog.studypluz.com/designs_html
skgdcqjenbmr
dytfhtwomfwl
edzwezydlfch
I for all time emailed this weblog post page to all my associates, as if like
to read it afterward my friends will too.
Nice article, but if you people need to use an already implemented theme, this is the best one i have used so far: Avada. It has all you want to implement a better than cool website. Check it out
http://themeforest.net/item/avada-responsive-multipurpose-theme/2833226?ref=Cripperfy
Good info. Lucky me I came across your site
by accident (stumbleupon). I’ve bookmarked it
for later!
Hello, i think that i saw you visited my site so i came to “return the favor”.I am
attempting to find things to enhance my web site!I suppose its
ok to use some of your ideas!!
Her eyes widened substantially at my sudden politeness.
You’re allowed to celebrate a job promotion, a marriage, or the birth
of a child, but it’s supposed to be done with class and style.
I protected my sight when the glare turned too much
in addition to squinted through the smoke a cigarette to
find Julie, but it has been pointless.
I really like what you guys are up too. This type of
clever work and exposure! Keep up the amazing works guys I’ve included you guys to blogroll.
eigwwznrelvwlnreijtsm tktbjln ggudfxn alqlmvk
is good artikel Thank you so much ,
Hi there everyone, it’s my first pay a visit at this website, and paragraph
iss truly fruitful for me, keep up posting tjese types
of articles.
thanks for sharing this article. Lucky me I came across your site by accident (stumbleupon). I’ve bookmarked it for later! great work.
http://buyviagenonline.com/ canadian pharmacy meds
I was really pleasantly surprised to find this url. Thank you for writing this grand read!! I definitely enjoyed your posting, have bookmarked it and will be looking for future posts. If you have a chance check out my website. It’s a work in progress, but I trust that someday it will turn out as significant as yours.
I savour, cause I discovered just what I used to be taking a
look for. You have ended my 4 day lengthy hunt! God Bless you man. Have a nice day.
Bye
whoah this blog is fantastic i like studying your posts.
Keep up the good work! You already know, lots of individuals are searching round for
this info, you could help them greatly.
Today, while I was at work, my cousin stole my iPad and tested to see if it can survive a 40 foot drop,
just so she can be a youtube sensation. My iPad is now destroyed and she
has 83 views. I know this is completely
off topic but I had to share it with someone!