How to Convert PSD to WordPress — the Quick & Easy Way

Last Update: 11th Oct, 2020

Looking to convert your website UI designs in PSD to WordPress website?

In this article, I’ll show you how you can build a responsive WordPress website from your Photoshop designs in the easiest and quickest possible, even if you do not have any prior PHP or WordPress development knowledge.

I run a WordPress agency called Fantastech Solutions where we work exclusively on website UI designs to WordPress conversion projects.

We work on dozens of PSD to WordPress projects every single month and have elaborate processes on different ways of converting designs like:

1. Converting PSD to HTML files using Bootstrap and then converting these HTML files to WordPress by creating a custom theme.
2. Converting PSD directly to WordPress theme using Underscore, Understrap or similar theme for creating static templates and using ACF to let you add content from backend.
3. Converting PSD to WordPress using a parent theme like Astra and using a custom child theme along with ACF to build page templates.
4. Converting PSD to WordPress using a parent theme like Astra, a custom child theme for custom CSS and a page builder like Beaver Builder or Elementor.

In this post I’ve covered how we do it using the 4th method as that’s easiest to do even for a non-coder. If you do not have any experience coding in PHP or creating custom WordPress themes, you can still convert your PSDs to WordPress following this tutorial.

Knowing a bit of HTML and CSS would be advantageous.

The Old Way of PSD to WordPress Conversion

Now before jump into the method, I want to talk about how people have been doing PSD to WordPress development for years.

It’s this: PSD > HTML > WordPress

In this you basically convert your designs into HTML files and then you make a WordPress theme out of it and use plugins like Advance Custom Fields to create fields in the backend for the admin to fill in their details that show up in the fronted.

Now nothing bad with this and it’s probably the best way to do it if your project is big, you have big budget and have really good front end and WordPress developers with you.

But for 90% of website projects, I think it’s a bit overkill as it’s susceptible to a lot of downfalls and issues.

Some of them are…

1. It increases project cost. The development time increases because multiple steps and multiple developers are required to build the website (frontend developer for HTML and WordPress developer for theme)
2. It’s prone to bugs and code issues. As the website is built from scratch, there’s a greater chance for the code to go wrong and have bugs in it.
3. Website is difficult to manage. When a website is built this way, everything is hardcoded into the theme template and a non-coder user can’t modify the page without knowing how to code even if all they want to do is a tiny change.
4. It locks you in with your developer. Now every time you need to make a change you have to go to your developer and they make more money from new.

It’s a good method of design conversion, but for most cases you can do without going this route.

The another, more efficient and cost-effective way of doing it is this…

PSD to WordPress Conversion using a Base Theme and a Page Builder

Now the new method is pretty easy and quick and it can be used even if you don’t know how to code.

If you’re a developer this way can accelerate your development speed and you can take more projects while working less.

It’s this: PSD > WordPress

In this, instead of converting the designs to HTML file first, you skip that middle step and build the website directly using a really good base theme and a page builder plugin.

Now some of you might have rolled your eyes after reading this and I can understand what you feel.

I’ve been in the industry for long enough and seen pretty much all kinds of themes and page builders out there. I know it can be extremely messy with horrible code and bad UX, to say the least.

But we’ve come a long way in this page builder era.

WordPress is now more than 15 years old and the themes and page builders have matured to become really robust and we are in a way better position than ever before to use them.

Today, you can easily build 90% of the usual marketing websites, just using a core theme, a page builder and some basic HTML/CSS knowledge.

What are the benefits of doing it this way?

1. It keeps the project cost low. The development time decreases considerably as you don’t have to code from scratch and just one developer can build the whole thing on him/her own.
2. Exceptional code out of the box. As the website is built using a theme and page builder that has been around for years and used by millions of people, it provides you rock solid base.
3. Easy to manage website. Unlike the method shared earlier, you have full control over how the website look and can easily edit the pages and move things around without hassle.
4. No more recurring developer changes. As you have full control over the website layout, you don’t need to pay your developer to make small changes on the website which saves you a ton of time.

Which theme and page builder to use?

When we were thinking of niching down our WordPress services to become an exclusive design to code agency, we did an in-depth,1-month long research to find the best suitable theme and page builder plugin that we could use for such projects.

It was very important for us to choose the right combination so that we can not only build world class websites for our clients on a code level but also make the development extremely fast and cheap for our clients.

After going through dozens of popular themes and page builders, here’s what we finally ended up choosing:

1. Astra Pro Theme: It’s the fastest and one of the most flexible theme we found in the market. There were a lot of other good ones like GeneratePress, Divi, Beaver Builder Theme and others, but we personally loved it for the features and the bare bones codebase. It does not have bloated code and have minimal base design, which helps us build pretty much any kind of website.
2. Beaver Builder Pro Page Builder: There are a lot of pretty good page builders out there like Elementor, Divi builder etc, but we chose this because it produces very clean code and gets out of the way when you’re building a page. Also it’s highly extensible so everything we need to build a specific kind of module that’s not present in it by default we build it.

Both of them come with Free and Paid versions. But the paid versions are where things get interesting and that’s what gives us the power to build and deploy pretty much any kind of website extremely fast.

We use this theme + plugin combination for around 7 out of 10 projects we do now a days with great success and client love the websites we deliver. And as a matter of fact, even we have built our agency site using this combination.

Easy Steps to Convert PSD to WordPress

Below I’ve written the steps to build site using Astra Pro and Beaver Builder. If you want you can any other theme and page builder combination, that’s totally fine. The following steps will still be relevant with other theme + page builder combination as well.

1. Install Astra theme and Beaver Builder plugin: Upload the theme of your choice and page builder on your development site.

2. Install Astra Pro plugin — If you’re using Astra Pro, install the plugin and enable the modules inside it that you want to use on your website.

3. Global Layout and Styling: Start with customizer and set all the global settings like page layout, typography, colors, logo and everything else. Go through each tab and make sure we’ve setup everything perfectly.

This is probably the most important step and you need to know the theme settings inside out to be able to set all the global settings and creating a header and footer that matches your designs perfectly.

4. Build Header and Footer: Use customizer to make the header and footer. Most of the time you should be able to build the header with logo and the menu from the customizer itself. Similarly you can builder footer using customizer settings, widgets and some custom CSS.

If your header and footer are too complex, you can use Custom Layouts in Astra Pro to create them using Beaver Builder.

5. Configure Page Builder Global Settings: After finishing global setup, header and footer, time to configure your page builder according to your designs. Set proper breakpoints, global padding and margin and max-content width.

Make sure to keep same breakpoints like your theme to avoid mixing up breakpoints in theme and the plugin.

These options are important to setup before getting in to building of the pages as they determine how each row and module will render on the page. Every page builder comes with some kind of global options so it’s important to know your builder of choice inside out.

6. Start with Building the homepage: Create various components of the page using the rows and different modules in Beaver Builder. You’ll be able to create pretty much any kind of structure using the columns and modules in Beaver Builder.

To be able to use Beaver Builder or any page builder to it’s full capability, you’ll have to learn it fully so that you know how all you can build using it.

But please note that you might get stuck if the designs contain some aspects that you can’t get built using the page builder. You may need to use your development skills if you have to do the custom work or if you’re not a developer, this is when you might have to think of hiring someone to build it for you.

7. Build Rest of the Pages: If you’re able to complete the homepage perfectly, rest of the pages should be pretty straightforward. One by one, you can build all the internal pages.

There you go. If you follow these simple instructions you will have your PSD converted to WordPress in no time.

Conclusion

If you’re not a developer, this should probably be the easiest way you can convert your designs to WordPress. With a little bit of HTML/CSS skills you can go ever further. I would suggest you to pick a theme and page builder, you can start with Astra and Beaver Builder as they’re fairly easy to learn and you’ll be good to go.

If you’re a developer, this should give you a good base to learn a theme and page builder of your choice to build websites faster than before. Whenever custom code is needed, as it will in some cases, you can use your development skills to create a new module, a new plugin, custom post types and the other WordPress stuff.

If you’re not a DIY kind of person, you can connect with us for our done for your PSD to WordPress service and we can help you convert your designs to WordPress website for a low cost.

I hope you enjoyed the article! Leave your comment below to share your thoughts.