How to convert a PSD template into a Wordpress theme

WordPress Themes are files that work together to create the design and functionality of a WordPress site. Each Theme may be different, offering many choices for site owners to take advantage of in order to instantly change their website look. In this tutorial we will explain the basic steps of how a WordPress theme works and also show you how to convert a PSD template into a Wordpress theme. And for this tutorial, we’ll use Grunge blog layout we’ve created in the previous tutorial.

The completed Grunge Wordpress Theme can be downloaded below.

Step 1:- Slicing the PSD file

First we’ll have a look at the PSD design as we have to check which part is necessary for the design. Main part of the template should be the following: background, header, menu, Left bar, footer, bullets arrow and others necessary.

Background

At first open the design psd file and disable all the layers except the background one. Now save as a bg.jpg and save for web.

Header & Separator

Now let’s move to our header area and select 343px using our “crop tool” and save this as header.jpg. Within the header the menu separation is require. From the main PSD file just crop the separator using 12x90 px dimension and save the new file as menu_line.jpg.

Footer & Others

Now we’ll repeat the same process and select our footer “marquee tool”. Now select the strip bar to the bottom and above the copyright text and crop the section. Dimension should be 1200x228 px and save this as footerbg.jpg

Now let’s slice the Sidebar. First slice the search option background with a transparent sheet and save as searchbg.png, menu_bg.jpg, arrow.jpg, circle.png and others as well.

Step 2:- HTML + CSS from PSD Design

From the PSD design you have to create a static HTML+CSS template. Open your Dreamweaver and create an index.html and style.css file and save into a folder. Folder should be structured as shown below.

Template Folder

• Images (Folder)

• Style.css

• Index.css

STEP 3:-

Now let’s start writing the code for div/CSS based design. Put the html/xhtml and CSS are shown below.

Index.html

CSS XHTML Plot output

Step4:-

This template is not ready yet to be converted into a wordpress theme. Before we start this conversion; we have to know some things about wordpress.

Basic structure of WordPress Theme

The wordpress default theme folder is (wp-content/themes/default), you will see many PHP and CSS files (That is called template file). Here is a one style.css file that defines the main structure and the style of the template.

Basic files of wordpress theme

index.php

header.php

sidebar.php

footer.php

Now the more related files and their purposes:-

Style.css

The main stylesheet: This file must be attached with the Theme, and it will contain the header information of the theme.

rtl.css

The rtl stylesheet. This CSS file will be included automatically.

Index.php

The main template file: It is the parent file of the template.

Comments.php

This file defines the comments template.

Front-page.php

The front page template: it is only used for a static front page.

Home.php

The home page is the front page by default.

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.

Page.php

This one is used for individual page templates.

Category.php

This page is required to show the categories.

Tag.php

This page is required when tag is needed.

Date.php

To display the date/ and time we need this template page.

Archive.php

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

Search.php

To perform a search we need this file inside the template.

Attachment.php

To viewing a single attachment we require this file.

Image.php

Image attachment template is used when viewing a single image attachment.

404.php

The 404 Not Found template is to display the error message, when the post is not found.

Step 5 :-

Now we need to group these files for wordpress.

Step 6:-

Here is the index.php. This file holds all the files together. There are some wordpress keywords and syntax that are shown below.

• get_header() / To call the header.php file

• template_part( 'loop', 'index' ) /for the main content of the site

• get_sidebar() / to call the side bar of the theme like sidebar.php

• get_footer() / to call the footer.php file

All together the index.php file looks like this:-

Now in your index.html. Insert the line:get_header, get_sidebar, and get_footer in the same order as your layout structure.

Step 7:-

Now as we know header.php is the file contains all the header information like meta style sheet, tag site title, the banner and the top menu.

Open the index.html file and cut from the top to <!--header end--> ends, paste it in a new PHP file, and save the file as header.php. Now place the following php code into the header.php file.

More with menu and banner

The orange color code is the dynamic menu portion for the theme. The main menu function for the wordpress is below.

<?php wp_nav_menu( array( 'container_class' => 'menu-header', 'theme_location' => 'primary' ) ); ?> from this code the the menu is visible into the header and we can control this menu item with the css for any style.

After placing the code into the header.php and adding some style for the menu will bring you the following screen shot.

Step 8:-

Now go to the index.html file and cut the site bar portion. Now paste this code inside the sidebar.php file same way as we have done in the header.php. After that place the following code for the side bar.

Step 9:-

Now let’s start our footer. Again go to the index.html file, cut from the footer start <div id=footer> to the end of the </body></html> and paste it into a new footer.php.

And for the recent posts just use the query_post to display the 5 latest posts.

Everything is done. Now you need to check the index.php again to form the proper order.

Congratulations, you have just created an awesome wordpress theme. Now, login to your admin panel, go to the “Appearance tab> theme” you should be able to see the theme, activate and go to the front page to preview the theme.

Posted in: Web Design