By Tauqeer Jalal
In May 30, 2014
2 Flares 2 Flares ×

Website markup conversions have come up as brilliant strategies for enhancing the overall performance of a website. Photoshop to WordPress conversion is one such website markup conversion that has been the back bone of numerous successful websites available over the internet. In today’s tutorial, I will be making you familiar with all the steps that are involved with the conversion of PSD files into a power-packed WordPress theme.
With WordPress holding its position as one of the best web publishing tools, it has become important for web developers to learn the art of converting plain PSD files into a WordPress theme. Now, let me start with the tutorial on converting PSD designs into WordPress theme.

Step 1- Design a WordPress theme in Photoshop

In my example, I’ll be creating a simple two column fixed width theme. Here, I’m choosing the size as 980-pixel as it would fit a variety of screens without the need for user to scroll from one side to another. Start by creating a rectangle with dimensions as 1024px x 768px. You can choose to color the backgrounds or even add an image. In my example, I’ve colored the background as blue(have a look at the above example). As the next step, layout the theme container followed by defining the same in the web pages. Now, add a white rectangle with dimensions 980px x 768px. Here’s the screen-shot for what I’m intending to create:


The theme must have 4 essential elements viz: Header, Content, Sidebar and Foote. Start by adding each section to the theme layout. In my example, I have decided to create a header with dimensions as 175px tall and 13px header. For this, I’ll create a box with dimensions 188px x 980px. Once you’re done with this, you can now format the image to the right dimensions and paste the same into the PSD file.

Step 2- Slice up the PSD File

Select the layer in the psd file that represents the header image. Make sure to hide any layers that are available above the header layer. This is what I’m referring to:
Next, copy paste this layer into a new image as shown in the below screen-shot:
Once you’re done with the above step, review the dimensions and if no errors are found, save the file as headerbg.jpg.

Step 3- Work on the theme’s layout using CSS divs

Lay out the theme as shown in below screen-shot:
Encase the entire page in two wrapper divs namely wrapper and wrapper2. Now, define the two wrapper classes as explained below:
width: 980px;
margin: 0px auto;
padding: 0px;
font-size: 78%;
background: #fff;
border-left: 2px solid #fff;
border-right: 2px solid #fff;
background: #fff;
Step 4- Set the li tags
For this, you need to include the following code:
#tabs ul li{
margin: 10px 0 3px 15px;
padding: 6px 15px 6px 0px;
border-right: 2px solid #fff;
font-size: 90%;
font-family: Tahoma, Arial, sans-serif;
For above, inline creates the list display in a horizontal line.

Step 5- Define the look for links available in the menu
Since each item on the page will be a link, I’ll be changing the look using the default link style. Below is the code I’ll be including to set the font color to white:
#tabs ul li a{
color: white;
Step 6- Define the footer style by including the below mentioned code:

#footer {
clear: both;
margin: 0;
padding: 10px 16px 0 16px;
text-align: center;
font-size: 85%;
background: #fff;

Step 7- Putting everything together
Once you upload all this to your server and browse to the blog, this is something you should see on your screen:
Wrapping Up

So those were the steps involved in the conversion of Photoshop designs into a feature-rich WordPress theme. Well, there’s actually no limit to what you can do with a WordPress theme. The only thing that you need to make sure of is getting well acquainted with the basic principles behind converting a PSD file into WordPress theme. I’m sure this PSD to WordPress conversion tutorial would definitely serve as a handy guide for your next Photoshop to WordPress conversion projects.
So, all the very best and do abide by all the aforementioned steps in the best possible manner. Please don’t forget to share your views/opinions on the above post using the comments box provided right under this post.



Author Bio – Sarah Parker is a creative web design expert in Designs2HTML Ltd a Photoshop to wordpress Conversion Company with vast experience in Research and development vertex of web design technologies. She use to write on different Markup conversion processes and socialize it through social media platforms.



Hi' i am Tauqeer Jalal founder of GDI and i always want to share good and free stuff , i am also a freelancer and available for graphic design work .