PSD to WordPress theme Conversion

STEP 1:- Slice the PSD file

The crucial components of the template are: header, menu, background, left bar, footer, bullets arrow and several other items necessary for the design. The first step is to check out your PSD design in order to find out the components which are essential for the conversion process.

Background

Open-up the psd file and then disable all the layers accept background one. Then save it as a bg.jpg file and after this save it for the web.

Header & Separator

Move to the header area and select 343px using the “crop tool” section and save it in the header.jpg file.
Then crop the separator to a dimension of 12×90 px from the given PSD file and then save it in a file and name it as menu_line.jpg.

Thus, you need to separate the menu out from header section.

STEP 2:- HTML + CSS from PSD Design

Next create a static HTML+CSS template for the PSD design . Open up Dreamweaver , index.html and dimension, then after make a folder and save it there. Follow the following structure of your folder in the given sequence

Template Folder

• Folder of Images
• Style.css
• Index.css

STEP 3:-

After step 2 start write the code for CSS based design. You have to keep html/xhtml and CSS all in sync.

STEP 4:-

After this code the template is still not prepared for a dynamic WordPress template. Before beginning with the conversion process you need to know more about the structure of the WordPress files.

WordPress Theme: Structure

Files present in the wordpress theme:

header.php
index.php
footer.php
sidebar.php

Other files related to it are:

Style.css

The main stylesheet: This file must be attached with the Theme , and it also comprises of the themes header information.

rtl.css

The rtl stylesheet.:

Index.php

The main template file:

Comments.php
Front-page.php

The front page template:

Home.php
Single.php
Page.php
Category.php
Tag.php
Date.php
Archive.php
Search.php
Attachment.php
Image.php
404.php
The 404 Not Found template is to display the error message, when the post is not found.

STEP 5 :-

Group all your WordPress files.

STEP 6 :-

In the index.php file you will find all the file . For conversions you need to know all the wordpress syntax mentioned below.

• get_header()
• get_footer()
• get_sidebar()
• template_part( ‘loop’, ‘index’ )

STEP 7:-

As discussed in the previous paragraphs, header.php file contains all the data of header such as meta style sheet, tag site title, the banner and the top menu .

Now go to the index.html file and scoop out the written matter from the beginning to ends, and then make a new PHP file and keep it there, and give it a name as header.php.

STEP 8:-

Add WordPress tags

STEP 9:-

Add key functionalities

If this process appears to be cumbersome and complex to you than I can provide you free consultation on PSD to WordPress conversion . I also offer best quality WordPress websites to my clients within freelance rates. Please visit my website here at : www.suyashparnerkar.in