Tutorial : Making Wordpress Theme by examples #1
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.
<!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 
Bridges the gap between Dreamweaver and WordPress. Just open an exiting theme in Dw and hack away…
http://www.themedreamer.com
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