Convert a PSD Template To a WordPress Theme


What is a PSD?

PSD and WordPress themes are two terms that don’t need introduction in  web designing. PSD is  a Photoshop Document created by Adobe Photoshop.

What WordPress Themes Are?

Assuming that you’re new to WordPress themes, allow me to explain it in a simplest form to you. Consider WordPress themes similar to your smartphone themes.

Step 1: Slicing your PSD

You slice your PSD and divide it into separate image files so that each design component is effectively saved as a separate design file. You can make use of any photo editing software or more preferably Adobe Photoshop to slice your PSD files.

An easy way to slice your PSD is to look for these components first.

  • Background
  • header and separator
  • Footer and others

Step 2: Create index.html and Style.css 

Now the next step is to reach to the programming world from the designing world. But it is going to be fairly simple. From the PSD design that you have crafted, create a static HTML and CSS template.

You can follow a responsive web design to make sure your site looks beautiful on all screens.

Let me show you a sample break up of code based on the div tag and CSS styling.

Step 3: Break down your index.html into WordPress theme file structure

Now you have the basic template ready and you need to port it to the WordPress environment. But before you do that you may require a little knowledge on how things are organised in WordPress.

WordPress has a specific file structure that you need to follow. You are basically going to upload your web page to WordPress themes and WordPress software should work with it seamlessly so that the plugins and additional functionalities can be added without any hassle or incompatibility issues.

Some pointers that may help you are listed down below.

Basic files of WordPress Theme
  • index.php
  • header.php
  • sidebar.php
  • footer.php

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


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


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


    This file defines the comments template.


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


    The home page is the front page by default.


    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.


    This one is used for individual page templates.


    This page is required to show the categories.


    This page is required when the tag is needed.


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


    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.


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


    To view a single attachment we require this file.


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


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

    Step 4: Add WordPress tags

    All you have to do now is import the awesome inbuilt functionalities provided by WordPress into your theme files with the help of WordPress tags and add these tags, you can say that you have created a WordPress theme. Follow the given link to know the available WordPress template tags.

We at WPOnlineSupport specialize in a variety of WordPress Services, WordPress Plugins, WordPress Themes and Pro Support For a free inquiry please contact us.