How to Convert PSD to WordPress in Six Simple Steps
Posted on March 23, 2022 | Updated on July 17, 2023
Do you have an old PSD website you’d like to change to another format but it’s hopelessly outdated? Perhaps you want to make changes but you don’t own an Adobe Suite product. You might also just be more comfortable using WordPress. Going from PSD to WordPress doesn’t have to be stressful. It’s much easier than you might think.
Techjury estimates around 455 million sites use WordPress and 500 new sites go online every day using the free version. If there’s something you want to do on the content management system (CMS), you can be almost certain someone else has done it before and created a plugin or tutorial.
Converting PSD to WordPress doesn’t have to be time-consuming and doesn’t require a degree in coding. You basically take the image files and turn them into a WP theme. You will need a basic working knowledge of HTML, CSS and PHP languages and functions.
What Is a PSD Website?
A PSD website template is uncoded. It contains all the visuals you want to use on your site, including a background, icons and other graphics. However, there is no HTML or CSS included, which makes it incompatible with a PHP platform like WordPress.
PSD files have layers containing the different images, typography and hierarchy elements. Your job is to figure out how to take the PSD and convert it into a format WordPress and thus web browsers can understand.
Steps to Convert PSD to WordPress
Here are six simple steps to convert your PSD files to WordPress so you can share your beautiful design with the world.
1. Analyze Your PSD File
First, take a look at the images within your file. You likely have a number of elements spliced together, but they’ve been created in Adobe and are layered. You’ll want to look at the layers with Adobe Photoshop.
Photoshop is not a free program. You may have to pay for it. If you don’t already subscribe to Adobe Cloud, you can subscribe to just one program a month at a time. Costs vary depending on how many cloud products you utilize.
There is a learning curve to Photoshop if you haven’t worked with it before, so take your time and figure out the best ways to understand layers.
Gumroad features a number of free PSD themes you can view for some examples or to try your hand at conversions. Above is one for a designer’s portfolio. You can see that the layout, background and images are already in place.
2. Splice Image Files
Next, use Photoshop to splice your PSD file into separate images for the background, header, sidebar, navigation and so on. There are numerous Adobe and private tutorials online to help you figure out how to navigate through different tasks within Photoshop.
Separate your files into images and name them accordingly. Be sure not to add too many images at once and you may even want to further compress the files to make sure your finished theme loads quickly for users.
3. Create an HTML and CSS File
You will need some basic knowledge about how HTML and CSS works to convert your file. If you don’t have that, look for a handy plugin to help or hire someone to do this part of the task for you. You can hire freelancers to complete the tasks you can’t and save yourself some time and headaches.
However, if you have a working knowledge of design, this part should be easy-peasy for you. Create one of each file and name them Index.html and Stylesheet.css. You can use your free Notepad or any HTML editing program.
In your Index file add a header, body and footer tags. You’ll open with <html> and go from there. If you’re unsure about what to include, you can grab a free template at WordPress.org. Next, use a CSS template and plug in your image file IDs in the correct places. Double check all IDs with what is in your index file to ensure everything goes to the right location.
4. Choose a WP Theme
Start with a template you can edit and convert into your new theme. You may want to work with a child theme in case things go south. You can always revert to the original theme and start again. Twenty-Seventeen themes and above are made to work with WordPress and allow for customization.
Once you install a theme, go to the theme editor and start plugging in the right info from your index file you created. Upload your stylesheet. Don’t forget to edit Index, Header, Footer and so on.
5. Add Tags and Functions
The thing that trips a lot of inexperienced designers up is where to place which tags and functions. Fortunately, WordPress has a library of pre-built tags and functions you can easily plug in. They should be readily available within the platform while editing your theme. You may need to add some manually.
WordPress.org goes into detail about tags and functions. If you have questions, you can always hop on their forum and ask more experienced developers.
6. Test Your Theme
Once you’re finished adding tags and functions, it’s time to test your theme. If you haven’t already, activate it and add some content to see if it functions as expected. You may need to go in and adjust different aspects until you get just the look you want.
A custom theme from a PSD file may sound a bit complicated, but once you’ve converted a couple, you’ll see how it all works together to bootstrap your site into something spectacular.
What Else Can You Do?
If you’re experienced in the languages mentioned in this article, you may be excited about the opportunity to try a conversion. On the other hand, if it all seems overwhelming, simply hire someone to help or ask your designer to send the files in a WordPress-ready format or pay them to break down the files and upload them for you.
About The Author
Eleanor Hecks is the Editor-in-Chief of Designerly Magazine, an online publication dedicated to providing in-depth content from the design and marketing industries. When she's not designing or writing code, you can find her exploring the outdoors with her husband and dog in their RV, burning calories at a local Zumba class, or curled up with a good book with her cats Gem and Cali.
You can find more of Eleanor's work at www.eleanorhecks.com.
