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.
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.
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:
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
sidebar.php
footer.php
Next, Part 2 - Header.
If you enjoyed this article, get latest updates via RSS feed or by email.
Share This Post
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!
ikram_zidane on December 13, 2006 at 9:03 pm said:
better kalau buat untuk xhtml… nice try…
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.
novatech on December 13, 2006 at 11:55 pm said:
hahahaha ko dah balik dari bercuti ke?
rajin ko wat tutorial mende ni
ok la tu.. nice work
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?
x3ro on December 15, 2006 at 9:22 pm said:
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..
yang tu html sebenarnye. dats why kene tahu basic html dulu. he3. kalau nak gune nama lain pun boleh. takde masalahnyer.
Wizurai on December 16, 2006 at 12:09 am said:
kalo nak letak sidetbar ngan rightbar sama jugak ke cara dia?
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 [...]
goggle on February 6, 2007 at 1:58 pm said:
I found your tutorial extremely useful as a basic guide to starting the wordpress theme
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
doug rosbury on April 23, 2007 at 5:53 am said:
your tutorial aside, you need to brush up on your english.
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.....me-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 [...]