After I released my first Wordpress theme to public, I make another theme for my site, CypherFS Royale . Then an idea sparkling into my head. Why not I make a tutorial on how to make Wordpress theme to public? I’m sure there are many peoples are looking to make their own theme for their website. So lets get started.
But before we proceed, I want to tell you first that this tutorial only covers on how to set the layout and the tags or functions needed to make your Wordpress theme works perfectly. It is really basic. I will not teach you html, css and php here. You need to learn them by yourself. There are many tutorials available on the net. I’m sure you can found them in ease.
Ok, I split this tutorial to 7 parts. Here are some details for each part.
- Part 1 – The Layout
- Part 2 – Header
- Part 3 – Index
- Part 4 – Comment
- Part 5 – Sidebar
- Part 6 – Footer
- Part 7 – Finish!
Let’s begin the Part 1 – The Layout.
The best thing in using Wordpress is we can divide our theme into section. Eg: header.php, index.php, etc. But before that, we need to create our theme layout first. To do it, we start with blank html file. Btw theme that we will make here is two columns theme.
Now open your favourite text editor such as Notepad. For me, I use EditPlus. It is easy to use and each tag has each colour code. After you open your text editor, we start building the layout.
Type this into your text editor and save it as index.html.
That is really basic. Now we are going to create sections in our index.html file. We will use <div> tag here. So prepare your CSS to beautify your theme. Ok now we put in the <div> tags.
-
-
<title>My Wordpress Theme</title>
-
</head>
-
<div id="wrapper">
-
-
<div id="header">
-
header
-
</div> <!– close header –>
-
-
<div id="content">
-
<div id="main">
-
main
-
</div> <!– close main –>
-
<div id="sidebar">
-
sidebar
-
</div> <!– close sidebar –>
-
</div> <!– close content –>
-
-
<div id="footer">
-
footer
-
</div> <!– close footer –>
-
-
</div> <!– close wrapper –>
-
</body>
-
</html>
-
As you can see from the code above, I end the close div tag with a comment to make me easier to trace the close div tag belong to which div’s id.
Ok now we have the sections that we want. The next thing that we will do is to divide each section to their own PHP file. This will save our time if we want to edit our theme in the future. PHP files that we will create are:
- header.php – contains the header
- index.php – our main file
- sidebar.php – sidebar section will be here
- footer.php – our footer file
Now divide the sections to their own file. Copy and paste them into each file. Make sure to save them in .php extension. Each file will looks like this.
header.php
index.php
-
-
<div id="main">
-
main
-
</div> <!– close main –>
-
sidebar.php
-
-
<div id="sidebar">
-
sidebar
-
</div> <!– close sidebar –>
-
footer.php
-
-
</div> <!– close content –>
-
-
<div id="footer">
-
footer
-
</div> <!– close footer –>
-
-
</div> <!– close wrapper –>
-
</body>
-
</html>
-
Next, Part 2 – Header.
In the real exams of 350-001, people do learn to make wordpress themes. However it is not until you have done your VCP-310 as well as 640-802, that your work reeks of finesse. There can be work produced by 70-290 as well as 70-291 but that is basically crude.
If you enjoyed this article, get latest updates via RSS feed or by email.
nice tutorial dude…very useful :d
better kalau buat untuk xhtml… nice try…
hahahaha ko dah balik dari bercuti ke?
rajin ko wat tutorial mende ni
ok la tu.. nice work
bleh blaja buat from the scratch :d gud2!
[Comment ID #15599 Will Be Quoted Here]
leh je tukar jadi xhtml kalau nak. hu3. tu semua bergantung kepada designer tu la sama ada nak atau tak. aku just tunjuk yang basic je. :d
[Comment ID #15603 Will Be Quoted Here]
dah balik cuti dah. jap lagi baru aku nak update personal blog aku tu. hu3.
bro cypher..maybe next time leh post kan meta tag tuk ape id: header tuk ape..id: wrapper tuk ape..id: sidebar tuk ape..etc..kalau tgk structure je n trus buat..tp tak tau fungsi tak gunegaks kan..anyway great post..besh giler bace..
kalo nak letak sidetbar ngan rightbar sama jugak ke cara dia?
[Comment ID #15672 Will Be Quoted Here]
yang tu html sebenarnye. dats why kene tahu basic html dulu. he3. kalau nak gune nama lain pun boleh. takde masalahnyer.
[Comment ID #15673 Will Be Quoted Here]
kalau macam ni, selalu orang buat die call file. nak call file tu kene gune php.
I found your tutorial extremely useful as a basic guide to starting the wordpress theme
[Comment ID #20131 Will Be Quoted Here]
thank you for your comment.
I think the tuturial is very useful. I follow it step by step. But I don’t belive the ‘copy and paste code’ in my computer will run at the end.
I need a zip-file of all the related files from the demo theme. Does someone has al link with the ready final demo code?
cu
i guess you can find it in the wordpress default theme.
i just use some codes (not all) from there.
nice tutorial
Thank you:)>-
thank you. :d
Justin Jung would like to invite you to share his Search Engine Marketing Expertise – SEM Expertise such as Pay per Click Advertising and Search Engine Optimization. Please visit the following website.
http://www.semexpertise.com
your tutorial aside, you need to brush up on your english.
Hi,
Wow, congratulations for being among the first few top search results to ‘wordpress theme tutorial’ keywords.
I’ve bookmarked your site. I’ve been wanting to create my own template for a while. Your guide will certainly come in handy.
Thank you very much!
Chrissy
http://www.hotelsandtravel.org
[Comment ID #39355 Will Be Quoted Here]
ha3. yeah! sure… lol…
Thanks for this great guide! Very useful
Nice tutorial.
I have also written a similar article called Developing a Wordpress Theme.
Hey there, I have some free CSS templates at http://www.cmgtechnologies.com.....plates.php, is there a way you can port those to wordpress for me, for a fee or something ? Or some sort of partnership ?
check your email. i just sent a reply to you.
Nice tutorial! Thx’s for sharing it with us. Very useful tutorial for me as a newbie in this field. It’s been a long time for me to find how to themes my own design. Thank you !!!
I’m still blur with all this codes and stuff.. Got the heart to do it but just confused. =S
this page ranked 18th on google for ‘how to create wordpress template’ not bad.. Cool:d
untuk!
for some reason i keep getting errors on the index.php page. i even copied exactly what you had on your index.php file, and it’s still giving me errors. what am i doing wrong?
my website
Memang best tutorial hang ni.. teruskan usaha murni tue..:d
wow..nice tutorial..malay one..patut tulih ebook lagi bagus..:)
privet a ne mogu nayti russkiy variant stat`i troy sayt v RU zone k sozhaleniyu zakrit ((
esli ne v lomi vishli na email pls
generator2003(sobachko)gmail.com
ummm do you know how to create a bloggers template on our own or how to convert a wordpress theme to bloggers??
Nope. I don't know anything about blogger structure and don't know how to convert wordpress theme to blogger. Sorry buddy. Can't help.
Its okey
woohoo
Wow awesome!
From here probably i can make myself more better tahn b4 eheh
Thanks bro!
How do i make the css file???
open a text editor , write css code, save it as name.css
thanks for this great tutorial
Nice tutorial!
I have a question: can one integrate a wordpress theme into blogger ( aka blogspot)? How?
If for that, you need to do a loy of modification to that theme.
Nice guide there. You’ve explained everthing well. By the way I got similar tutorial at my blog. I hope it’s good enough. I tried to explain everything step by step and very comprehensively, too.
Thanks for the tutorial! Qoooool!
well i wil give it a try
Thanks for nice tutorial. I will give them a try and let you know.
Nice tips, how about archive page n’ search result page?
i’ve search many sites to get the fit tutorial for wordpress, and i fall here, wow … with your illustrations, its make me easier. Thanks.
helo bro. thanks a lot. memang tutorial ni BANYAK mengajar saya budak yg baru belajor ni..
walaupu basic tapi berharga sangat..
saya dah lama nak buat wordpress theme sendiri…lagi ummphh..asyik pakai template orang aje….saya tak mau jadi end user aje….keep a good work bro;;
rohaza
http://rohaza.com
Thank you so much.
Nice article! It’s very useful.
This is great, thank you.
Would you ever have time to do a write-up on how to add a ‘magazine’ style index.php?
Sort of like Mimbo.
Great tutorials mate. Looks great on the iPhone too.
Thanks for the tutorial I learned alot from it
I need new wordpress theme
thank you so much…so much 1000X so much…
I just got a difficulty with a template I download…I’m considering to make my own…but don’t know how…
I ‘m definitely going to put your web in my web (^.^) …
very nice tutorial… anyone can understand it easily, it has helped me a lot! tnx!
Админчег
У меня к тебе небольшое предложение, хоть и не по теме блога 
Напиши пожалуйста свой обзор передачи Гордон Кихот. Особенно прошлый выпуск, про Шансон.
Спасибо
Удачи дружище
С праздничком всех))) Празднуете уже?))
http://www.cypherhackz.net, админ. Кто писал про последнее китайское предупреждение ? Извини. Я надеюсь мы найдем компромисс ? 1. Поставь на блог-комментирование хорошую каптчу. 2. Пошли урлы своих блогов сюда chezanah@gmail.com и ты избавишься от меня. Ещё раз приношу извинения. издержки производства…
Yeah is cool how to make WP Theme but!!!! how do you design lol !! please answer me lol Thanks hehe
Hello
I’m brazilian and my english is very basic, but the tutorial is very easy and simple.
Thank you!
i just want to say your website sucks and filipino rules
I think that it would have been better if you compiled this tutorial into an ebook and made it for download to all your users or your mailing list
BTW its a nice tutorial
Thanks you its make me easier.
Hai…lam knal
my name : m4d3 from BALI indonesia…
usefull article…and i’ll try it cause i want build my wordpress template by coding manual!
oh ya…visit me juga ya…m4d3 Gun4w4n too
thank’s
elo..tq ..tutorial yg bagus. sy pun dah mula boleh buat theme sendiri….tapi belum canggih lagi…masih baru …
feel free visit mine http://blog.rohaza.com
drop me a comment..
thanks for this useful tutorial..
Thank you for this information.
Thanks for nice tutorial.
great tutorial thanks for sharing
Great tutorial, I was able to create my own template following the instructions.
This tutorial is perfect. Thank you very much.
This tutorial easy to be understood, finally I can make template x’self.
Thanks for the great guide guys. I learnt a few new things, and the practical example will help me explain make templates.
Excellent tutorial. I can make my own template easy. Thank you very very much.
I can make my own template easy. Thank you very very much.
Thank you very much for sharing, i have been found it at last and use it my blog. Its is totally easily understood if you have an idea about HTML. thanks
Thank you very much
the practical example will help me explain make templates.
Very useful for me.
Very good advice we shall be using some of your tips on our double glazing blog.
Thank you very much.
Thank you, this post helped me a lot.
Thank you very much! i have been looking for tutorial of making wordpress theme before.. because i can’t really understand the tutorial in wordpress….
Thank you very much!!
Hi there, I found your blog via Google and your post looks very interesting for me.
I just can’t manage to do it by myself…
I think i have problem with the functions of the wordpress theme
Thanks anyway.
As a someone new to the internet I am always searching online for for psots like this that can help me. Thanks.
thank you very much to sharing information
useful article, thanks for sharing.
Good, thanks for the sharing info
Hi author, thanks for share this useful information… have a nice day!
very very use full post.
CypherHackz u rox
Hi,
Thank you very much for this useful article,
I’ve translated it to Chinese, please have a look of it, thanks.
Here is the link:
http://www.onedust.com/archives/281
I’ve just finished the part 1, and will keep translate the follows, hope that you don’t mind I haven’t tell you before the translation, if you do, please let me know, many thanks.
Sulow
Much Oblige! very useful for the novice like me
wow, nice tutorial…thanks for sharing. I’m still newbie in wordpress world
All templates have the same number of .php files?
i wanna make a theme
YOUR THEME IS GOOD! I WILL DOWNLOADS!
Thanks, Nice tutorial I will try to make my own theme
Nice job. The new users to WordPress will definitely find it useful.
This tutorial is good. But we want more explanation.
Awesome guide.
Thank you very much for this useful article,
Thanks for the lesson.
Dav
your tutorial aside, you need to brush up on your english.
@jerryho: This guy has just gone out of his way to make an extremely useful article, helping by the looks of it a good few hundred people create their own WP themes and has even been kind enough to answer peoples questions and all you can do is tell him he needs to brush up on his english. Get a grip and don’t bother commenting if you don’t have anything good to say – your comment isn’t even constructive.
познавательно тут у вас
it is a good website to make theme
this is good but i need more explanation thank you
That’s good explanation, thanks for the lesson very much.
Nia
can one integrate a wordpress theme into blogger
hiya! Nice tutorial
I’ve a problem… why is my index page white? I added a css but nothing, the page remains WHITE!
Thanks you its make me easier.
Very detailed tutorial. thanks for sharing it. i am happy i can edit or make my own theme..
Good content and posting, i learn creating my theme here.
thanks alot, really help me alot.
kan kan zai shuo
I can make my own template easy. Thank you very very much.
Very informative & detailed article about making wordpress theme. i would really appreciate if you provide us the same excellent tutorial about making a php directory template.
Cool Great!
Thank you very much for this useful article,
great information thank you
This is great information. Thank you for sharing. You are a generous soul.
danny
heftig
handy downloaden
bugging
spy optics cooper
amazing and very easy tutorail thanks alot
аквариумные рыбки
cypherhack (CH)
CH, nak buat teguran sikit boleh x?
Sebenarnya saya nak ikut tutorial awak step by step, kalau ada ralat saya tegur.
Sila semak semula post awak di atas bahagian file header.php ada sedikit ralat.
header.php
belum dikunci dengan
TQ.
sori la. salah faham. baru saya faham kenapa CH taip mcm tu.
This is a fantastic post. I’m going to get started right away!
Very insightful post. Thanks.
Great tutorial. Thanks for taking the time to share this.
how to include some css ?
thanks
nice tutorial..
кулинарные жиры
I love this post! Here is another one on creating wordpress theme http://morzdesign.com/tutorial.....m-scratch/
Nice for lern about create templates
Hey,
Really great tutorial. This will help new comers.
Cheers,
I created a new wordpress site and I don’t have a good design yet. But I hope your tutorial will help me a bit, but it looks complicated for a beginner like me.
Merci pour le partage, c'est génial!