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.
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”.
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
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.).
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)
3. Dividing the Sections: Breaking HTML into WordPress templates
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
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.
Any web development process is incomplete without a thorough round of testing, debugging, and best of all, optimization.
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.
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).
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