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
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
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.
[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.
[...] Klik disini untuk ke Cyperhack.net [...]
I found your tutorial extremely useful as a basic guide to starting the wordpress theme
[...] Make Your Own Wordpress Theme [...]
[Comment ID #20131 Will Be Quoted Here]
thank you for your comment.
[...] can help you in Designing your own Wordpress themes. http://codex.wordpress.org/Theme_Development http://www.cypherhackz.net/arc.....me-part-1/ http://lorelle.wordpress.com/2.....ess-theme/ [...]
[...] Found it here. [...]
[...] Make your own theme tutorial [...]
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.
[...] Make your Own Wordpress Theme – Part 1 at CypherHackz.Net (tags: wordpress HTML) [...]
[...] a new way of theming my WP template (many thanks to CypherHackz), instead of modifying from the defualt WP template which will only make a mess whenever I upgrade [...]
[...] artikkeli omien teemojen rakentamista, mikä auttaa ymmärtämään myös valmiita teemoja, löytyy täältä. Teema määrää minkälaisia elementtejä blogin eri sivuilla on esitetty ja missä kohtaa ne [...]
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…
[...] be changing the index page through Wordpress. I have found a wonderful new Wordpress tutorial from Cyperhackz.net (this link will take you directly to the tutorial) and I am thinking that I may have a grip on it. [...]
[...] Make your own Theme [...]
Thanks for this great guide! Very useful
[...] the index page, I felt like I needed some gratification for my hard work, so I found a how-to on making your first WP theme, and dove right into chopping up my XHTML. For the most part, theme-izing your design is pretty [...]
Nice tutorial.
I have also written a similar article called Developing a Wordpress Theme.
[...] CypherHackz – Make your Own Wordpress Theme – Part 1 [...]
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.
[...] created the theme for this site by following a tutorial at http://www.cypherhackz.net. Before I started to build the site up into this style, I took a zip of the [...]
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 !!!
[...] http://www.cypherhackz.net/arc.....me-part-1/ [...]
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
[...] Make your own wordpress theme: http://www.cypherhackz.net/arc.....me-part-1/ [...]
untuk!
[...] Make your own theme [...]
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
[...] Make your Own Wordpress Theme – Part 1 [...]
[...] Make Your Own WordPress Theme [...]
[...] Make Your Own WordPress Theme from CypherHackz [...]
Memang best tutorial hang ni.. teruskan usaha murni tue..
wow..nice tutorial..malay one..patut tulih ebook lagi bagus..
[...] ? jelas ! … kalo mau sih bisa belajar di Cypherhackz atau WPdesigner ini, step-stepnya ada n jelas kog kalau rajin dan familiar sama [...]
[...] Make your wordpress theme – in 6 Schritten zum eigenen 2 Spalten Wordpress theme [...]
[...] Make your own theme [...]
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
[...] If you have decided to create your own WordPress theme, here is a very comprehensive 7 step guide by cyberhackz.net on how to integrate WordPress functions and setting the layout for your theme. [...]
[...] ? jelas ! … kalo mau sih bisa belajar di Cypherhackz atau WPdesigner ini, step-stepnya ada n jelas kog kalau rajin dan familiar sama [...]
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
[...] ? jelas ! … kalo mau sih bisa belajar di Cypherhackz atau WPdesigner ini, step-stepnya ada n jelas kog kalau rajin dan familiar sama [...]
[...] you want to learn how to develop your own Wordpress theme, I recommend the Cyberhackz tutorial, it’s straight forward and to the point, and honestly, once you’ve done one, [...]
[...] Make Your Own Wordpress Theme at CypherHacks [...]
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
[...] slightly old posts over at CypherHackz.net that teach you how to create your own WordPress themes – http://www.cypherhackz.net/arc.....part-1/. Fantastic! Just what I was looking [...]
[...] Make your Own Wordpress Theme by Fauzi Mohd Darus [...]
[...] Make Your Own WordPress Theme [...]
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.
[...] Fonts Of The Month: GrauBlau, Nevis | Fonts | Smashing MagazineMake your Own Wordpress Theme – Part 1 at CypherHackz.NetWPDesigner » So you want to create WordPress themes huh?The W3C CSS Validation ServiceThe W3C [...]
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.
[...] Make your Own Wordpress Theme – Part 1 at CypherHackz.Net [...]
[...] ? jelas ! … kalo mau sih bisa belajar di Cypherhackz atau WPdesigner ini, step-stepnya ada n jelas kog kalau rajin dan familiar sama [...]
Thanks for the tutorial! Qoooool!
[...] بالجامعة التكنولوجية في ماليزيا يخبرنا بالتفصيل عن كيفية عمل ثيم لمدونة الووردبريس ، كل ما يلزمك هو معرفة بسيطة ب ال HTML ، وستجد نفسك تستطيع [...]
well i wil give it a try
Thanks for nice tutorial. I will give them a try and let you know.
[...] I made my own Wordpress theme, and experimented with php codes, css, and html. However, I wasn’t satisfied with it. I was [...]
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.
[...] are wpdesigner and cypherhackz [...]
[...] This tutorial is split to 7 chapter, see here. [...]
[...] muchos tutoriales que me ayudaron a darle exactamente la forma que yo quería. Uno de ellos fue este, que si bien es un poco despelotado, me aclaró un par de [...]
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.
[...] cantik-cantik dan memang menarik digunakan. Dah tu pulak, ianya percuma lagik. Selain daripada itu, kaedah untuk membuat theme Wordpress tidaklah sukar. Aku sudah buat beberapa themes untuk Wordpress. Themes blog yang korang sedang [...]
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 (^.^) …
[...] Invata pas cu pas cum sa iti faci blogul tau aici [...]
[...] mau sih bisa belajar di Cypherhackz atau WPdesigner, step-stepnya ada n jelas kog kalau rajin dan familiar sama [...]
[...] Make your Own Wordpress Theme by Fauzi Mohd Darus [...]
[...] Part 1 – The Layout [...]
[...] an interesting article that I found: Make your Own Wordpress Theme – Part 1. The presentation is neat and easy to understand. I have yet to read Part 2 and the rest of the [...]
very nice tutorial… anyone can understand it easily, it has helped me a lot! tnx!
[...] Make your Own Wordpress Theme [...]
Админчег
У меня к тебе небольшое предложение, хоть и не по теме блога 
Напиши пожалуйста свой обзор передачи Гордон Кихот. Особенно прошлый выпуск, про Шансон.
Спасибо
Удачи дружище
С праздничком всех))) Празднуете уже?))
http://www.cypherhackz.net, админ. Кто писал про последнее китайское предупреждение ? Извини. Я надеюсь мы найдем компромисс ? 1. Поставь на блог-комментирование хорошую каптчу. 2. Пошли урлы своих блогов сюда chezanah@gmail.com и ты избавишься от меня. Ещё раз приношу извинения. издержки производства…
[...] Make your Own Wordpress Theme (en) [...]
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
[...] and I’ve now got four (count ‘em…FOUR) home-made themes that I made after reading this tutorial. I know they’re not particularly fancy, but they’re mine and they do the job, so [...]
[...] found a great tutorial on making your own WordPress themes, and have been playing with Flash in class, so maybe I’ll be able to combine the two for my [...]
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..
[...] Make your own wordpress theme part 1 by cypherhackz. [...]
Thank you for this information.
[...] ? jelas ! … kalo mau sih bisa belajar di Cypherhackz atau WPdesigner ini, step-stepnya ada n jelas kog kalau rajin dan familiar sama [...]
Thanks for nice tutorial.
[...] Make Your Own Theme [...]
great tutorial thanks for sharing
Great tutorial, I was able to create my own template following the instructions.
[...] the WP. Did a CSS tutorial. Copied from the teacher. Obviously, we missed something in the lesson. Our copy was wrong. Way wrong. @TimFrangioso [...]
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.
[...] : Cyberhack.net Next, Part 2 – [...]
[...] From : Cyberhack.net [...]
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
[...] http://www.cypherhackz.net (Another great tutorial) [...]
[...] ? jelas ! … kalo mau sih bisa belajar di Cypherhackz atau WPdesigner ini, step-stepnya ada n jelas kog kalau rajin dan familiar sama [...]
[...] ? jelas ! … kalo mau sih bisa belajar di Cypherhackz atau WPdesigner ini, step-stepnya ada n jelas kog kalau rajin dan familiar sama [...]
Thank you very much
the practical example will help me explain make templates.
[...] Make your Own Wordpress Theme by Fauzi Mohd Darus [...]
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
[...] quite a few time I have to reload the themes because it did not work. I try to follow tutorial : Make Your Own Wordpress Theme so I have a basic idea on how this coding [...]
All templates have the same number of .php files?