Step-By-Step Guide for Converting PSD Design to WordPress

Do we have ‘software’ or ‘tools’ that could (magically) convert any design into a working, functional WordPress theme?
That’s a question I get asked a lot.
While there are certain tools that might be able to help you with that (Look up: Macaw), anyone who has ever dealt with the intricacies of clean, efficient web development knows that we would need our own versions of Ultron/JARVIS/Gremlins to accomplish ‘automatic coding’ for a web interface.
Since we have nothing that beats the intuition and experience of a human being yet, we depend on coders to create interfaces. Every developer or company who provides PSD to WordPress conversion services is a provider of design to functioning interface transformation. And those developers cannot be replaced with software.
In this guide for converting PSD Design to WordPress, I will take you step-by-step through the conversion process which brings life (read: workability) to Frankenstein’s Monster (read: PSD design).
Note: This article is written with the assumption that you are familiar with Photoshop, WordPress programming languages (HTML, CSS, JavaScript, PHP), and somewhat familiar with WordPress Theme structure and specifics (like Template Hierarchy and Loop). Check out the WordPress Codex for more information on the same.
 

Guide for Converting PSD Design to WordPress

1. Slicing PSDs

This is the difference between a graphic and a web designer: Graphic people compress, web designers layer. A nicely layered Photoshop design file equates to a detailed design, making it easier to understand in all its modularity.
But it’s very common for conversion service providers to receive JPG/JPEG image files as designs. That’s okay too. It just means the developer gets to slice the artwork on their own.
In the Photoshop toolbar pane, there’s a tool called Slice. You click-and-drag this tool across a specific section of the design (say, a tab in the main navigation), and the tool cuts that part and makes it into a separate layer. This individual layer is then assigned a specific URL link and edited within Photoshop with HTML Text, background colors, alignment, Alt attributes, etc.
This is done over and over again until the entire design (for one web page) is covered. Photoshop will be saving every single ‘slice/layer’ as a separate file and generate HTML/CSS code for them, which will be called into play later.
Note: Don’t hesitate to ask your PSD to WordPress theme conversion service to scale any raster graphics into Scalable Vectors (SVGs) for a responsive theme. This does not require any significant change in the design itself and keeps your graphics from getting pixellated on large devices.
 

2. HTML, CSS, and JavaScript

Now we code a ‘board’ to place all our ‘pieces’ in. Sounds easy, but remember that this board is to be made entirely of code.

• A wireframe is completed once the PSD slices are put in their appropriate positions in using HTML.
• This layout is styled with a WordPress theme file called css. This stylesheet contains every bit of CSS code to control visual presentation of HTML elements (slices). Note that if a theme is made to support right-to-left (RTL) languages, the required CSS is written and placed separately in rtl.css
• Once the theme’s layout and style are complete, developers work on creating richer interactions using JavaScript. Note that for every new library/dependency you add, you should use wp_register_script() .

3. Creating WordPress templates

If you haven’t yet familiarized yourself with the Template hierarchy, the tags, and the Loop, you can’t proceed.
This step will involve:

• Separating the HTML files using the tags. Look for an opening and closing tags that constitute the header. Copy the tags and all the code in between, and paste it into a new text file. Name the file php and save it. Do the same for footer (footer.php) and sidebar (sidebar.php). Based on the complexity of your design, you will also need to create additional templates for comments, search results, posts, pages, etc.

• The content which didn’t fit into any of these elements will go into PHP. This template will call other templates using template tags which look like this:

 
<?php get_header(); ?>
<?php get_footer(); ?>
<?php get_sidebar(); ?>
You may also need to create custom post types and templates based on your clients’ industry and content specifications.
 

4.  Functions and Extras

You’ll notice that most of the highest-selling themes on marketplaces like Envato pack Visual Composer page builders (check out X or any best-selling corporate theme for WordPress on ThemeForest). Similarly, some WordPress development companies will make sure to give you the power to configure the minutiae of your site’s appearance (colors, logos, widgets, titles and taglines, etc.) easily with the Customizer (using Theme Customizer API).
In this step, the customizer API (released with 3.6) is added to the theme folder, along with any extra functions and custom widgets.
Some developers may also hard code the most significant functionality into the theme at this point, which is the entire purpose of your website. For example: JobMonster Theme on ThemeForest doesn’t require a Job Listings Manager plugin because the functionality is hhard codedin the theme itself. This is optional, generally considered a bad practice, and should be done only on a per-case basis (once the client is aware of benefit vs. loss).

5. Testing and Debugging

The theme is taken for a test spin on a local host. Errors are found and dealt with using WP_Debug. The theme code is validated on W3C validator standards.
 

6. Implementation

Once the theme is tested and thoroughly debugged, developers send it to clients in a Gzip compressed folder (which clients can implement using FTP). Some conversion services may also offer free implementation of theme + content upload on the client’s server. You can go either way.
 

Endnote

There’s a lot more that goes behind the scenes while working “under the hood” of a theme’s design, and this was just an overview. Developers need to familiarize themselves as much as possible with WordPress themes. Start by Reading the codex (This is the ultimate saving grace) >> working on a child theme (baby steps) >> creating your own theme from a design (using the steps mentioned here).
 
See also: Most Useful Social Media Analytics Tools Every WordPress User Must Know