First Step :
- You should to have Webmaster editing tool (I use Dreamweaver)
- You should to have Graphcis editing tool (I use Adobe Photoshop)
- Important here, you should to have local webserver for a testing mode. (I use Xampp) Download and install Xampp now.
Second Steps :
- Draw your WordPress theme layout. (Single column or 2 column or 3 column or 4 column)
- Choose color (blue?, black?, white?, orange? etc)
- Ok? done? now we go to the next steps. (I picked 3 column theme) Here is my layout.
Open your Dreamweaver and create new HTML file and it should be like this.
Tutorial : Making Wordpress Theme by examples
Now create your layout.
My Header
My Entry
End of html file
Tutorial : Making Wordpress Theme by examples
My Header
My Entry
Now your layout task is done! Tomorrow we learn how to add style to our layout. Subscribe our feed now 🙂
36 replies on “Tutorial : Making WordPress Theme by examples #1”
Amazing tutorial.
The blog was really nice to read. Thanks for sharing it!
Great blog it was. I loved reading it!
Dear Bob, Tutorialnya sangat bagus sekali, ini iformasi yg saya cari-cari, sampai-sampai sy searching di google make keyword bahasa inggris , saya sarankan mas Bob membuatnya Juga dalam bentuk CD video tutorial membuat theme WP dalam bahasa indonesia , saya yakin banyak yang membelinya, karna belum ada yg buat lho…
Hi my name is Johnny and i like your blog. It is very nice. The design is jus stunning.
I am really impressed, I must say. Really hardly ever do I encounter a blog that’s each educative and entertaining, and let me tell you, you will have hit the nail on the head. Really great.
I thought about it, but I think it’s too hard for me. Thanks for the post anyway.
Fantastic post and simple to understand description. How do I go about getting permission to share section of the article within my upcoming newsletter?
I think it will be nice to add other related tutorial in this one, like other examples of codes for the single.php or page.php template.
When I originally commented I clicked the “Notify me when new comments are added” checkbox and now each time a comment is added I get four e-mails with the same comment. Is there any way you can remove me from that service? Appreciate it!
Hey wheres the other tutorials? hehe nice job though
Hey, good advice for a n00b like me. I’ve been trying to pimp my wordpress site out. Check out what I’ve done so far: http://www.dlocc.com No quite as cool as this. Although, I do like the brush metal bg.
Dlocc
Wheres part 2???
Great job!
Well that was a lesson and a half. I’m not sure if I can do that but it’s very informative.
ThemeDreamer v.41 is now out. Makes it a bit easier for Dreamweaver developers mod’ing WP themes.
thank you for this tutorial
It is not out-of-date information? Because I have other data on this theme. http://video-online-go.ru/map.html
Excellent site! I wish the owner to develop and please all! http://sex-free-online.ru/map.html
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 – the old one is ok) 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, entire all (10) latest posts.
Can you help me with this?
I really appreciate!
Ken.
where I can find a tool wizard to build my theme of wordpress online?
Nice tutorial. Is the a second tutorial?
Nice.. This helping me to create my own theme next. Thx for share. You are the best !
Oh, and did not know about it. Thanks for the information …
Hi Jai,
Please do continue this tutorial. It will help many 🙂
wow…it’s looks like malayia will have many wordpress theme builder..it’s a good news..keep working
I’ve never found wordpress themes tutorial like this. It’s really interesting, keep the good works. I am waiting for others your tutorial. Great Bob!
Just downloaded your theme to my new site! Where have you been…. I have been searching for days for a nice clean simple theme and you have them all…glad I finally found you – you have the best themes! 🙂
I like your tutorial..when the next tutorials?erm..I wish I will make some great theme just like you on eday..thanks
I found you today. Great resource and great tutorial. Please come out with next one soon!
keep it up..jom meriahkan theme2 dari malaysian
great tutorial, wish to have your next style step…
I was able to change the “Blue Box” text by editing the logo.psd file that’s stored in the images folder.
wahhh…tutorial yang bagus sekali….bila nak post episd 2 pulak…cepat ler update cikit erkkkk
thanks waiting for the next entries
Dear Bob, I’m designing my site using your WordPress template, Blue Box. I was wondering how I can rename or remove the “Blue Box” text that appears on the blue banner located in the upper left corner of the page. Thanks for your help.
continue please…!