PSD to wordpress Conversion Just in 6 steps

A website is the best tool for online business marketing. Creating a website is not an easy job. PSD to HTML conversion is an important part in every website development. Here I am explaining the conversion of PSD file into HTML and then to wordpress in simple 6 steps. If you are developing a wordpress website, you should have good knowledge in CSS, HTML and php.

1. Get Ready for the PSD to HTML Conversion

• Before starting the conversion first you should have to create an image, js and css folders for images, JavaScript, and CSS respectively inside your website directory.

• To convert a PSD file to HTML you need to open it in Photoshop or any other image editor, to measure distance, colour, font etc.

2. Slicing PSD file

In this step we will export the images to be used from the PSD file. Select the slice tool from the toolbar. Click and drag to select the desired area to be sliced. As an example we are slicing the logo in the PSD file. Now right click on the sliced part and rename it as "logo". Slice down all the possible images and rename each slice for further convenience.

Now we have sliced down all the images part. To export the sliced images, Go to File menu > Save for Web & Devices or simply Alt+Shift+Ctrl+S. Make sure that images type is set to jpg or png (for transparent background) and click save.

It will open up another window. Select our directory folder as save in location, again make sure that save as type “image only” and also select “all user slices” in slices option then click save. Now all sliced images will appear in images folder inside our website directory.

3. PSD to HTML and CSS

In this step we start our coding to convert a PSD to HTML. For that open up Dreamweaver or other html editor tools (I am using Dreamweaver). Create a new HTML page by clicking file -> New -> Blank page -> HTML then click create. It will open up a code editing page. Rename the title “untitled document” to our project name. Create a css file (Cascading Style Sheet) by clicking file -> New -> Blank page -> css then click create. Save that file in our css folder which we have already created in our website directory earlier. By adding the following code will integrate our css into html page.

<link href="/css/style.css" rel="stylesheet" type="text/css" />

An ideal website layout will contain four basic parts which is Header, Main content area, Sidebar and Footer. Let’s start coding header section. The webpage layout has 960px fixed width; we are making a wrapper div to wrap all our layout elements. We also have to place the wrapper div in the center of the screen, so we are adding following codes to css file. That also makes header, content, and sidebar and footer divs.

We only created the css elements to style up website and we will add more codes to css later.

4. Break index.html to wordpress theme core files

Before breaking index.html to wordpress, you must know something about wordpress theme files & developments.

A normal Wordpress theme contain many PHP files such as archive.php, category.php, search.php, 404.php, Image.php, comments.php, Header.php, index.php Footer.php, Sidebar.php, page.php, single.php. Out of these, index.php, style.css and functions.php are the essential files for wordpress theme.

• Archive.php: Used when a category, author, or date is queried. This Note that this template will be overridden by category.php, author.php, and date.php for their respective query types.

• Category.php: This template contains the code to display categories. It will show the corresponding categories of a post when it is viewed.

• Search.php: This template is used to display the search result of a query. The search function is an inbuilt wordpress function. We don’t need to do anything on it.

• 404.php: If you use the 404.php template in your theme, it will display an error message, when a page not found error occurs.

• Image.php: Image attachment template is used when viewing a single image attachment.

• Comments.php: This file defines the comment form for all pages and posts.

• Header.php: This will include all header section of a website.

• Index.php: This is the main template file. I.e., it is the parent file of the template. It will contain main body content.

• Footer.php: This is to display the footer content of website.

• Sidebar.php: This template is used for website sidebar structure.

• Page.php: This one is used for individual page templates.

• Single.php: This file is used when a single post is queried. For this and all other query templates, index.php is used if the query template is not present.

• Style.css: This is the main style sheet; it will contain the rules or codes to styling the html elements of the theme. That defines the main structure and the style of the template.

• Now break up your index.html into index.php, header.php, footer.php, sidebar.php and other necessary feature files.

5. Integrate HTML & CSS to Wordpress

Index.php is the core template file. It will contain whole website structure. So you have to call header, sidebar & footer files using the function get_ header(), get_sidebar() & get_footer() respectively based on you website layout.

Import all images to image folder inside your wordpress file. Then copy your html styles to style.css file.

6. Add wordpress tag & functions

The last but the most important step in wordpress conversion is adding wordpress tags & functions to files.

There are so many inbuilt functions that can be used to add all the basic functionalities to the Wordpress theme. Just add Wordpress inbuilt function tags to your theme file. Wordpress will automatically work with it.

Now you finished your psd to wordpress theme conversion. If you want to add additional functionalities or you want to modify the existing one then you can simply install wordpress plug-ins or you can add code to function.php file.

If you want highly experienced PSD to Wordpress

Conversion experts working on your project, just fill this form with your requirements http://www.hirewpguru.com/psd-to-wordpress.

Also you can optimize custom project quotes

sending a mail to syam@hirewordpressguru.com