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 
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?