Convert a PSD Template To a WordPress Theme
January 17, 2017 Janak Kaneriya
single-blog-img

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.

    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 the 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 view 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 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.