Create Wrdpress Theme

How to Create Wordpress Theme from Scratch

noreply@blogger.com (Aamer Shahzad) — Sun, 06 Jan 2013 16:52:00 +0000

Hi, I am Aamer Shahzad, a wordpress theme developer.for the last few years i have been creating wordpress themes from scratch. I do not create quality themes may be you like my themes or not but I found it is hard to brows on internet to search for the tutorial who guide us to create the complete wordpress theme from scratch.

So i decided to create my simple blog where i write about it. the reason is to guide the new people to create the wordpress theme either for their blog or website or for the client project or to submit the themes on the themes directory like wordpress.org (free) themesforest.net (premium themes).

If you are here to learn the wordpress theme making certainly you know the basic HTML, CSS and PHP. I an also not very good in these because making theme is simple, just to design the idea and make it working.

Responsive Layout

Responsive layot is the demand of every client. so you should know what is this. the simple is, the layout that fits to every screen is responsive layout. this is a fluid type layout which easily adapt the shape of the device in which the website is opened.

don't worry you are not going to learn how to create the responsive layout. because there are a lot of frameworks that are working on this. you can use them in your projects these are open source.

following are the few responsive CSS frameworks.

Responsive Grid System | Link
Gamby Framework | Link
Foundation 3 | Link
Less + Framework | Link
Golden Grid System | Link
Less Framework 4 | Link
Fluid Baseline Grid | Link
1140 CSS Grid | Link
Skeleton | Link

Read this article to get the one you like more. http://speckyboy.com/2011/11/17/15-responsive-css-frameworks-worth-considering/

Study any of these frameworks and in the next tutorial i am going to tell you how to create a very basic layout with this in just 5 to 10 minutes.

Thanks for reading this. Good Bye...

Part 1 : Responsive layout & CSS Framework.
Part 2 : Creating the theme Layout

Creating Wordpress Theme Layout - Baisc Structure

noreply@blogger.com (Aamer Shahzad) — Sat, 05 Jan 2013 10:05:00 +0000

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

Creating Wordpress Theme Layout - CSS Styling

noreply@blogger.com (Aamer Shahzad) — Fri, 04 Jan 2013 14:23:00 +0000

In the previous tutorial we successfully have created the wordpress basic HTML markup, now we need to style it little bit. first we will add a dummy CSS to give heights to the wrappers.

I have added a texture background in the image folder. I will use that for background

body {
    background: #f1f1f1 url(images/background-texture.png);
}

we will remove the margin from all the DIVs to make the DIVs not to come out of the main WRAPPER and ROWs

#header-wrapper, #menu-wrapper, #main-wrapper, #footer-wrapper, #copy-wrapper {
    margin: 0;
}

Now we will give some heights to these DIVs. we will remove the heights later so that the DIVs expand with the content.

#wrapper {
    padding: 0;
    background: #fff;
}
#header-wrapper {
    height: 120px;
}
#menu-wrapper {
    height: 40px;
}
#main-wrapper {
    height: 300px;
}
#footer-wrapper {
    height: 140px;
}
#copy-wrapper {
    height: 30px;
}

this will give us the following look.

now we will add some more divs inside the index.html for logo, social sharing icons, main content, sidebar, footer, copy right, and footer menu..
Add the following code inside the index.html to get some more divs for the above elements.

<div id="wrapper" class="row">
 <div id="header-wrapper" class="row">
        <div id="logo" class="six columns">
 
        </div> <!-- end logo -->
        <div id="social" class="six columns">
         
        </div> <!-- end social -->
    </div> <!-- end HEADER WRAPPER -->
            
    <div id="menu-wrapper" class="row">
        <div id="menu" class="eight columns">
 
        </div> <!-- end menu -->
        <div id="search" class="four columns">
         
        </div> <!-- end search -->
    </div> <!-- end MENU WRAPPER -->
        
    <div id="main-wrapper" class="row">
    
        <div id="content" class="eight columns">
     
        </div> <!-- end content -->
        <div id="sidebar" class="four columns">
         
        </div> <!-- end sidebar -->
    
    </div> <!-- end MAIN WRAPPER -->
    
    <div id="footer-wrapper" class="row">
    
        <div id="footer" class="four columns">
 
        </div> <!-- end footer1 -->
        <div id="footer" class="four columns">
         
        </div> <!-- end footer2 -->
        <div id="footer" class="four columns">
         
        </div> <!-- end footer3 -->
    
    </div> <!-- end FOOTER WRAPPER -->
    
    <div id="copy-wrapper" class="row">
    
        <div id="copyright" class="six columns">
 
        </div> <!-- end copyright -->
        <div id="footer-menu" class="six columns">
         
        </div> <!-- end footer menu -->
            
    </div> <!-- end COPY WRAPPER -->
</div> <!-- end wrapper -->

this is the complete layout structure for this theme now we will add elements in each div from logo up to the footer menu.
the above code will make the layout like the below image.