Tutorial : Making Wordpress Theme by examples #1
Written by Jai on October 9, 2007 – 2:53 pm - 8,968 viewsFirst 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.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
</head>
<body>
</body>
</html>
Now create your layout.
<div id="wrapper">
<div id="header">My Header</div>
<div id="navigation">My Menu</div>
<div id="main">
<div id="content">
<div class="entry">My Entry</div>
</div>
<div id="sidebar">
<div id="leftsidebar">My Left Sidebar</div>
<div id="rightsidebar">My Right Sidebar</div>
</div>
</div>
<div id="footer">My Footer</div>
</div>
End of html file
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>My First Wordpress Theme</title>
</head>
<body>
<!-- begin frame-->
<div id="wrapper">
<!-- begin header-->
<div id="header">
My Header
</div>
<!-- end header-->
<!-- begin navigation-->
<div id="navigation">
My Menu
</div>
<!-- end navigation-->
<!-- begin content frame-->
<div id="main">
<!-- begin entry frame -->
<div id="content">
<!-- begin entry box-->
<div class="entry">
My Entry
</div>
<!-- end entry box-->
</div>
<!-- end entry frame -->
<!-- begin sidebar frame -->
<div id="sidebar">
<!-- begin left sidebar box -->
<div id="leftsidebar">
My Left Sidebar
</div>
<!-- end left sidebar box -->
<!-- begin right sidebar box -->
<div id="rightsidebar">
My Right Sidebar
</div>
<!-- end right sidebar box -->
</div>
<!-- end sidebar frame -->
<!-- end content frame-->
</div>
<!-- begin footer-->
<div id="footer">
My Footer
</div>
<!-- end footer-->
</div>
<!-- end frame-->
</body>
</html>
Now your layout task is done! Tomorrow we learn how to add style to our layout. Subscribe our feed now 
If you enjoyed this post, make sure you subscribe to my RSS feed!
24 Responses
to “Tutorial : Making Wordpress Theme by examples #1”
3 Trackback(s)
- Oct 14, 2007 : links for 2007-10-15 at DeStructUred Blog
- Oct 14, 2007 : Malaysian Blogger Rss Feed » Blog Archive » Tutorial : Making Wordpress Theme by examples #1
- Jun 5, 2008 : links for 2008-06-06 | simonponder.net
on Oct 9, 2007
continue please…!
on Oct 9, 2007
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.
on Oct 10, 2007
thanks waiting for the next entries
on Oct 10, 2007
wahhh…tutorial yang bagus sekali….bila nak post episd 2 pulak…cepat ler update cikit erkkkk
on Oct 10, 2007
I was able to change the “Blue Box” text by editing the logo.psd file that’s stored in the images folder.
on Oct 12, 2007
great tutorial, wish to have your next style step…
on Oct 21, 2007
keep it up..jom meriahkan theme2 dari malaysian
on Oct 22, 2007
I found you today. Great resource and great tutorial. Please come out with next one soon!
on Oct 28, 2007
I like your tutorial..when the next tutorials?erm..I wish I will make some great theme just like you on eday..thanks
on Nov 1, 2007
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!
on Nov 2, 2007
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!
on Nov 3, 2007
wow…it’s looks like malayia will have many wordpress theme builder..it’s a good news..keep working
on Nov 26, 2007
Hi Jai,
Please do continue this tutorial. It will help many
on Dec 19, 2007
Oh, and did not know about it. Thanks for the information …
on Feb 29, 2008
Nice.. This helping me to create my own theme next. Thx for share. You are the best !
on Mar 26, 2008
Nice tutorial. Is the a second tutorial?
on Jun 1, 2008
Bridges the gap between Dreamweaver and WordPress. Just open an exiting theme in Dw and hack away…
http://www.themedreamer.com
on Jul 5, 2008
where I can find a tool wizard to build my theme of wordpress online?
on Oct 9, 2008
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.
on Nov 16, 2008
Excellent site! I wish the owner to develop and please all! http://sex-free-online.ru/map.html
on Nov 17, 2008
It is not out-of-date information? Because I have other data on this theme. http://video-online-go.ru/map.html