Converting PSDs to WordPress Websites

PSDs are shorthand for Adobe Photoshop files and they are an important part of brand image and identity when creating a wordpress website. There are tens of thousands of new WordPress sites activated every single day. While there are always new templates being created, and the tried and true still serve their purpose, having something unique and original is what makes a site stand out in a sea of generic copies.

If you have a theme from Photoshop you want to convert to WordPress, below are the steps to make the process streamlined and effective.

Slicing the PSD file into its constituent parts

The slicing process sounds kind of abstract, but it actually quite straightforward. In order to be able to code a WordPress template/theme, you have to have multiple image files to do it with. This means you have to cut up your PSD file into a number of different image files, each one representing a segment of the overall design theme.

Keep in mind that you do not have to slice design elements (e.g. the colour of headers and footers) in their entirety. What you should be slicing is the design elements (including images and buttons), because those cannot be created dynamically.

Create your index (.html) and style (.css)

Step two is to take your spliced images and get ready for a bit of programming (straightforward programming). You are first going to need to create static CSS and HTML templates. There are a number of great programs out there that let you do this step without having to learn HTML (e.g. Fireworks and Dreamweaver), but adding some HTML knowledge to your toolbox never hurts.

Next you are going to place your slices images into the correct position using your index.html and accompanying CSS files you created. Keep responsive web design principles in mind so that the site displays properly on mobile as well.

Disassemble your index.html file into a WordPress-style file format

You’ve now got your template ready to import into WordPress. Before doing this it is worthwhile to understand a couple of WordPress idiosyncrasies. The goal is to upload your webpage that you’ve built using your PSD to WordPress themes so that WordPress’ software, and all of the available plugins can be used without any clunkiness or incompatibility.

To make sure this goes off without a hitch, follow the WordPress standard file structure to a tee and disassemble your index.html file into the requisite php files.Two of the most important files in any WordPress theme are the style.css and index.php files.

In addition to these two, there are also php files for things like the sidebar, the header, archive etc. You now have to break down the code in this way, applying your index.html file to each of these individual php files. There are myriad tutorials out there to help walk you through this rather tedious step.

Bring in the tags

Now that you have the most painstaking part of the job out of the way, it is time to bring in your WordPress tags. These are provided by WordPress and you are going to import them directly into your theme files. There are a wide range of WordPress template tags.

After you’ve optimized your files with all the tags and functionality you desire, put everything into a single folder and place it inside the /wp-content/themes/ folder in your WordPress installation. If everything has been done correctly, you can now activate your completely custom wordpress theme from your WP dash.

And there you have it; you have successfully converted PSD to WordPress, and have got yourself a wholly original theme that no one else has. Getting this process down pat takes some time, and will likely require some revising along the way, but once you know what you’re doing, creating custom themes is a snap.

Author Bio

Baljot is an experienced and enthusiastic web developer who integrates his marketing expertise to bring forth creative brand management platforms. His experience includes developing and executing a wide range of tools associated with digital strategies; web design, social media, e-mail, SEO, mobile, and video.