How to Convert PSD to WordPress - 5 Different Methods Explained

Last Update: 6th Oct, 2022

How to Convert PSD to WordPress?

In this comprehensive tutorial, we'll walk you through 5 different methods to convert your website layouts in Photoshop to WordPress. Whether you're a developer or not, we have covered every possible method that we could think of to help you get your WordPress website up and running in no time.

But before that it's important to understand what WordPress is and how it works so that you'll be able to go through this process more switfly.

Don't have time or resources to do-it-yourself? Let a professional team help you convert your designs to WordPress. Click here to find the list of top PSD to WordPress conversion service providers.

What is WordPress?

WordPress is a content management system aka CMS that is widely popular and is used by over 38% of top websites globally. To say in the most basic way, it's a bunch of HTML, PHP, CSS, JavaScript and other files that when you put on your server can act as a full-blown website that you can edit and make it the way you want.

It's free so you can just download it from WordPress.org, put it on your server and you're good to go.

A CMS is basically is a simple software that makes it easy for you to manage important aspects of your website without needing to learn code. Once you've built the site perfectly, you can then go to the backend of the website and just add new posts, pages etc without touching a line of code.

What is a WordPress Theme?

Once you install WordPress on your server, it comes with a basic look and feel that comes from one of the WordPress's pre-installed themes.

You can think of this like operating system and look and feel of an Android phone. On all Android phones you have the same OS installed but you can change the complete look and feel of the website by using different themes.

Here's how WordPress defines a theme:

A WordPress Theme is a collection of files that work together to produce a graphical interface with an underlying unifying design for a website. These files are called template files. A Theme modifies the way the site is displayed, without modifying the underlying software.

You can learn more about what themes are from their article here. When we say PSD to WordPress conversion, we're basically talking about conversion of designs into a WordPress theme.

It's important to understand how themes work so that you can understand rest of this tutorial clearly. So we suggest you go through the above linked article before moving ahead.

5 Different Methods of PSD to WordPress Conversion

Now if you're reading this, you probably already have your PSD designs with you right now. Depending upon how tech-savvy you are we've shared below 5 different ways in which you can convert your designs.

Each method has different complexity and different pro and cons, so choose the method that suits your requirements, skills and timeline the most.

Method 1 and 2 would require you to know some basic HTML, CSS and PHP or else you will not be able to build sites using those method. Method 3 can we used by anyone with basic WordPress know-how (not necessarily coding related). Method 4 needs understanding of WordPress loops and template structure. Method 5 can be used by anyone.

So here they are:

1. PSD to HTML, and then HTML to WordPress theme Conversion

This is the most common and oldest method of converting PSD to WordPress. In this you first convert your designs into responsive HTML files with proper and distinguishable header, content and footer sections (also sidebars if you have it in your design). And then you convert those HTML files into a stand alone WordPress theme.

1.1 PSD to HTML Conversion

So the first thing we have to do in convert the PSD designs into HTML. There are 2 different ways in which you can do it.

1. Convert the PSD designs to HTML manually by hand coding.
2. Convert the designs using automated tools.

Creating HTML files can both be done manually and automatically. Although there are tools in the market like PSDtoWeb.de, PSD2HTML Converter and others, we've found that they produce very low quality code that's not responsive and most of the time unusable for WordPress theme conversion.

We suggest you always hand-code the HTML so that you can create a responsive site and have more control over the quality of your code. You can start with one of the popular libraries like Bootstrap or Foundation so that the end result is responsive and works on all devices.

Now we won't go into how to build websites using these frameworks because that's a whole other subject in itself. But we'll give you rough steps that you need to take to develop HTML files in a way that it can be easily converted to WordPress theme.

Simple steps for PSD to HTML conversion:

1. Open your PSD files in Photoshop. If you do not have Photoshop you can use the free tool GIMP or use online tools like Avocode to open the PSD files for inspection.
2. Download a starter HTML template from Bootstrap.
3. Start building the page layout by referring to designs starting with header, then footer and then rest of the page. Add the global styles like typography, colors, css for form inputs and button and other global css to style.css.
4. As WordPress theme is built up of multiple files like header.php, footer.php, index.php, home.php, sidebar.php and so on, make sure you semantically divide the header, footer, content and other part of your design in different HTML sections/div. That'll help you put these separately inside WordPress templates.
5. Build all the pages in HTML according to designs and also build them responsive using media queries. Once all HTML pages are done, you're good to go.

After you have your HTML files ready it's time to convert them to WordPress.

1.2 HTML to WordPress Theme Conversion

Now that we have the HTML files, we can convert those into WordPress theme. WordPress theme is built up of multiple files as we saw earlier. As covering the whole WordPress theme development would be a bit of stretch, we would suggest you go through the WordPress' official theme development tutorial or one of the following theme development tutorial:

1. WordPress Theme Development by WordPress.org
2. WordPress Theme Handbook at WordPress.org
3. HTML to WordPress conversion tutorial by HTMLtoWP.co

Once you get the clear idea on how to build WordPress themes, converting your HTML to WordPress would be a breeze. We've covered the basic steps to do that below:

Steps for HTML to WordPress conversion

1. Create a new theme from scratch and create the following files in it :
   1. style.css
   2. functions.php
   3. header.php
   4. footer.php
   5. index.php
   6. single.php
   7. page.php
2. Copy your styles from your style.css to the style.css of the theme while keep the commented area on top for defining the stylesheet header.
3. Copy the code from your HTML for the header part to header.php. Add the native WordPress functions like wp_head() and wp_wp_menu() to WordPressify (not sure if that's a word) the header.
4. Do the same for footer and copy the footer code from your HTML file to footer.php and inject the wp_footer() function along with get_sidebar() if you plan to manage the footer using widgets.
5. Then if you have a static homepage you can put the rest of the code to home.php or if it shows list of lists you can use index.php.
6. Then for rest of the pages you can create those by creating individual page template files.

Now let's see the pros and cons of this method:

Pros

1. You have full control over quality of code.
2. You can produce clean, bloat free and well-commented code.
3. You have more freedom to follow your own set of standard in terms of how you like to code.
4. Flexibility to use any CSS framework.

Cons

1. Very tedious process.
2. You have to pay extra attention to everything so that you don't miss any important file/code.
3. Prone to bugs as it's all done from scratch.
4. PHP / WordPress theme development required

So there you go. That's the first method to convert PSD to WordPress.

But if building a WordPress theme from scratch seems like too much work for you, you can instead start with a pre-made theme and just fill that in with your HTML code as described in the next method.

2. PSD to WordPress conversion using a starter theme

This is the 2nd and a bit easier method compared to the first one. In this instead of creating HTML first and converting that into a WordPress theme from scratch, you directly convert the designs into WordPress theme using one of the pre-made starter themes.

There are a lot of starter/boilerplate themes in the market that you can use that contains all the files like style.css, functions.php, header.php, footer.php and the rest, but with bare minimum code that is required for a theme to work.

Some of such themes are:

1. Underscores - starter theme built by WordPress
2. Understrap - this is combination of Underscrores and Bootstrap
3. WP Bootstrap Starter - Another starter theme based on Bootstrap.

A good thing about this method is you don't need to learn and remember every single function in a WordPress theme. If you can do a crash course in WordPress theme structure and the basic functions, you're good to go.

All you need to do is open individual files and create your HTML around the pre-made code structure. Some themes like Understrap go one step ahead and even let you customize the global colors, typography, layout, header and footer right from the Customizer. So you don't have to write code for those things which helps in getting your PSDs converted faster.

If you're new to WordPress and you have interest in learning how to build WordPress themes, you should probably start with this method. Then once you have a good understand of the whole theme structure you can start building your themes from scratch as described in first method.

Now let's see the pros and cons of this method.

Pros

1. Faster development cycle compared to the first method.
2. You get really high quality code out of the box
3. Semantic and SEO friendly code
4. You get light weight and well-commented code
5. Less prone to bugs

Cons

1. It is still a bit tedious to build themes this way
2. PHP / WordPress theme development required

That covers the 2nd method of PSD to WordPress conversion. Now let's jump to the next one.

3. PSD to WordPress conversion using a page builder

This method is probably the easiest one and good for everyone irrespective of whether you know PHP / WordPress coding or not. This is specially good if you're a web designer and are good at HTML and CSS but backend coding in PHP is something you're not good with.

In this method you take a feature rich base theme and a powerful page builder and then convert your designs to WordPress using this combination.

How it works is you use the base theme to set all the global layout elements like header, footer, layout width, colors, typography etc so that the structure of the site is ready. Then you use a page builder to build the content part of individual pages. So even if you do not know how to code but can customize a pre-built theme this method would work great for you.

We've listed down some of the most popular themes and page builders on our resources page that you can check out.

Pros

1. Easiest way to convert PSD to WordPress
2. Best for web designers who have basic frontend knowledge of HTML/CSS
3. No PHP / WordPress development knowledge required
4. Very fast method if you know how to use the theme and page builder

Cons

1. Initial theme and page builder learning curve can be high
2. Some page builders create highly bloated code
3. Sites built this way are generally a bit slower that if built from scratch.

4. Automated WordPress conversion using software tools

There's another way to convert your PSD designs to WordPress and that is using automated tools like ExportKit to produce WordPress theme directly from PSD itself.

There's a nice tutorial for that here that you can checkout.

Although this may seem like a great way and might be really useful for some simpler projects, we've found that no matter what, 3rd party tools can never match the quality of code that can be produced by actual humans.

Also for more complex designs, it becomes extremely difficult to setup these tools and let it produce a decent enough code base. Instead you can spend the same amount of time writing the code and get your theme ready in no time.

We strongly believe that design and code are two different worlds altogether and should always be kept separate and dealt with independently. But if you're keen at using 3rd party tools, you can surely checkout ExportKit.

Pros

1. Extremely fast way to do it
2. Needs you to know only basic WordPress template structure
3. You can develop your theme while designing the website
4. Low cost option

Cons

1. Bloated code
2. Not good for complex designs

5. Hands-free conversion with 3rd party service providers

If the above methods look like too much work and you do not have the time to do it all yourself, you can hire someone to do it for you. There are thousands on WordPress developers out there who would be happy to do it for you.

We've created a separate article that covers the 5 best PSD to WordPress service providers in the market from our own past experience working with each of them.

Pros

1. Hands-free PSD to WordPress conversion
2. You do not need to know any coding
3. You can spend more time on other things in your business
4. If your budget permits you can hire really excellent developers who can deliver world class code to you

Cons

1. It'll cost you money because it's not a DIY method.
2. It's difficult to find trusted developers who can deliver pixel-perfect conversion without wasting your time or money.
3. Less control over quality of code.

So there you go, that's the 5th and last method we had for you.

Conclusion

PSD to WordPress conversion is not rocket science and if you know how to you in PHP you can pull it off pretty easily yourself by following the above mentioned methods. But even if you do not know how to code, you have other ways in which you can do it.

We hope you found this detailed tutorial helpful. Leave a comment below to share your thoughts.