Wordpress

How-To-Guide: Convert PSD to WordPress Theme

wordpress theme development
How-To-Guide for Converting PSD to WordPress Theme

WordPress themes are like clothes for your weblog: You buy ‘em, wear ‘em, and strut around town (read: the internet) like nobody’s business.

I know it’s not the most creative analogy, but it’s a perfectly apt one.

What makes an outfit great is how beautiful it looks and how amazing it feels. Same goes for WordPress themes. And just as fashion designers’ sketches are just doodles without expert tailoring, so a whole load of mad coding skills go into converting digital designs to fully functional WordPress themes.

Alright, I’ll stop with the clothing metaphors now.

Essentially, this is what it means to convert PSD to WordPress Theme: Creating actual structures based on prototypes. So how exactly does it happen? That’s what this article is about.

 

How-To-Guide for Converting PSD to WordPress Theme (1)

In the spirit of full disclosure: I am a senior developer at a PSD to WordPress Conversion Company and this article is written with the hope that it can go some way to explain exactly how a design is converted to a WordPress theme. Because I’m tired of people asking, “Isn’t there any software that could do that?” or thinking converting PSD to WordPress isn’t “worth it”.

Let me make this clear: Despite the significant overlap between tasks and requisite skills of a web designer and a web developer, most teams and companies still believe in separation of duties. This means they rely on a well-researched and thought-out web design and leave the arduous coding/implementation to programmers. So web designers create the design (as a Photoshop document/PSD) and WordPress developers turn it into a fully-functional website interface through HTML, CSS, JavaScript, and PHP (WordPress programming languages).

Note: This article assumes you are somewhat familiar with Photoshop, WordPress Theme Structure, and have a passing familiarity with web programming languages.

The show begins as WordPress developers receive le artwork from the designer. After that, here’s what happens:

 

1. Breaking down the design – Slicing PSDs

How-To-Guide for Converting PSD to WordPress Theme (1)

 

Unlike a JPEG/JPG image, a PSD file can be layered.

Usually the designers’ job is to provide the developers with a nicely layered and/or sliced design, with everything neatly separated into individual interface elements. But in case that’s not forthcoming, the developers slice the PSDs themselves.

Basically, this means cutting up a design into smaller layers that will be reassembled through code (we’ll get to that) to create a web page. Each slice can be linked to different URL links (e.g., site navigation, in-page navigation, pagination etc.) and optimized within Photoshop (e.g., adding HTML text on No-Image slices, background color for individual slices, setting alignment, specify Alt text for slices and other HTML output options, etc.).

Photoshop saves every single slice as a separate file and generates the HTML and CSS code to display the sliced images. This is significant from performance perspective, since it allows developers to separate branding elements (like logos, banners, etc.) from items that can be recreated through CSS (like background tiles, button colors/effects, etc.).

 

2. A Return to Basics: Writing HTML, CSS, and JavaScript

How-To-Guide for Converting PSD to WordPress Theme (2)

 

Once the slices are saved, the developers set to creating an HTML website. It’s simple in theory and tricky in practice: The slices have to be coded in a manner that makes the webpage look exactly like the PSD design.

Note: In the age of a fluid, responsive web, ‘Pixel-perfect’ PSD to WordPress conversion is grossly misunderstood. Often, amateur designers will use bitmap graphics in their designs and then lose their heads when certain areas of the theme end up getting pixelated on large viewports.

Always, always make sure your PSD to WordPress conversion service provides responsive WordPress themes as default (and not a side option). This means they are used to bitmap graphics and will scale them up to SVGs as per need.

A sort of skeleton (wireframe) is ready once the slices are converted and placed in their positions in an HTML file.

  • Then the developers set to styling this HTML with writing valid, hack-free, WordPress standard compliant CSS (this reduces workload later on). This stylesheet (named css) will control the visual presentation of all HTML elements. This is the script that is thoroughly written, tested, and improved for polished visual design, cross-browser compatibility, and responsiveness. (Note: Right-to-Left language support should be coded separately and named rtl.css)
  • This step is capped off by adding JavaScript to the mix. This is done only to make the interface richer and more interactive. Try to stick to scripts and libraries that are registered and/or used by WordPress or use wp_register_script() to add new dependencies. (Note: Remember to call JS scripts using wp_enqueue_scripts() in WordPress.)

 

3. Dividing the Sections:  Breaking HTML into WordPress templates

How-To-Guide for Converting PSD to WordPress Theme (3)

 

This is where WordPress wizards take over the development: these developers should know HTML and PHP and must be well-versed in WordPress Template hierarchy (“don’t you dare get the names wrong!”), the Tags (“Who goes Where?”), and the almighty Loop (“Lather, rinse, repeat, lather, rinse, repeat, lather, rinse, rep…”).

  • Separate HTML tags like <nav>, <header>, <body>, <footer>, etc. are divided into modular template files like image.php, header.php, footer.php, comments.php, index.php, etc. that combine (as commanded) to form web pages (which output as HTML). Make sure to check the template files against the checklist in the codex and the hierarchy.
  • The Template tags control which template files will combine to create a specified page. This is also the step where Custom Post Types and Page templates are created and integrated in the theme.
  • Previously written stylesheet (style.css) remain the same, while JS elements are added to pages

Only those WordPress developers who know the anatomy of WordPress Theme like the back of their hand must be put to complete this step.

 

4. Adding Extras

How-To-Guide for Converting PSD to WordPress Theme (4)

This is the icing on the cake.

This step involves using theme customization API to give the end-user better control over theme appearance settings, adding plugins (the basic ones that every website needs for security, caching, spam protection, SEO, etc. as well as specific ones like WooCommerce, Google Analytics, etc.) and widgets (calendar, live streaming radio, etc.), and creating custom functionality from scratch.

This is also where the scripts and files are compiled into single theme folder.

 

5. Testing

How-To-Guide for Converting PSD to WordPress Theme (5)

 

Almost done…

Any web development process is incomplete without a thorough round of testing, debugging, and best of all, optimization.

This round is where the WordPress theme is unit tested, the HTML and CSS is validated on W3C standards, and JavaScript, PHP and WordPress errors are found and fixed.

This is also where the theme is tested for performance, browser compatibility, and responsiveness. CSS and JS scripts are written and modified until the theme runs as it should.

Voila

All that’s left is to implement the theme by installing and switching to it on a WordPress installation. Some PSD to WordPress service providers will do it free of charge, and they may also send the HTML website HTML website (which could save a lot of time when you get bored of WordPress and want to go generic).

Endnote

Yeah, so that’s all that takes place “behind the scenes” of a standard PSD to WordPress theme conversion.

There’s no software which can bring design to life.

Author Bio: Lucy Barret is a WordPress developer with over 5 years of experience. She is employed at HireWPGeeks Ltd. and provides PSD to WordPress conversion service. She is also a passionate blogger and loves to share her knowledge with the WordPress community. You can even follow her company, HireWPGeeks Ltd. on Facebook

Click to comment

Leave a Reply

Your email address will not be published. Required fields are marked *

To Top

Get More Stuff Like This
IN YOUR INBOX

Subscribe to our mailing list and get interesting stuff and updates to your email inbox.

This information will never be shared for third part