Creating Wordpress Theme Layout - Baisc Structure

Before we take start to create wordpress theme layout let me share some Web Tools, I use Macromedia Dreamweavr, PHP Designer 7 and Sublime Text Editor. The CSS framework which we are going to use is Foundation. The basic layout.


Folder Structure :
when you first extract the foundation.zip you will get the following folder structure

but for a wordpress theme the folder & file structure should be like the following,

 index and style.css should be in the same root directory.  to get the abov structure of the foundation download the files WP Theme From Scratch

I hope you have read the documentation of the foundation css framework.

we will use the ROWS and COLUMNS for creating the structure. see the below code which makes simple layout

<div id="wrapper" class="row">
    <div id="header-wrapper" class="row">
    </div> <!-- end HEADER WRAPPER -->
    
    <div id="menu-wrapper" class="row"> 
    </div> <!-- end MENU WRAPPER -->
    
    <div id="main-wrapper" class="row"> 
    </div> <!-- end MAIN WRAPPER -->
    
    <div id="footer-wrapper" class="row">
    </div> <!-- end FOOTER WRAPPER -->
    
    <div id="copy-wrapper" class="row">
    </div> <!-- end COPY WRAPPER -->
</div> <!-- end wrapper --> 

The above code will gove the output like this.

Now lest style this with some CSS code. Note: the lines which are showing are because of the dummy css added to the style.css, we will remove this later on.

Continue to part 2 :  Creating Wordpress Theme Layout - Baisc Structure