Last Update Aug 5th, 2021
WordPress popularity is undeniable in the current market. It is flourishing every single day with increased market share.
For developers, it means that they can make the most out of the opportunity and learn some useful skills.
In this article, we will go through a complete guide to converting a PSD design to WordPress.
If you are in the designing field, you already know how themes are created using PSD design. Photoshop is used by almost every designer out there. And, if you are not using it, we recommend you to start using it.
Designer prefers creating a new design in Photoshop. For developers, it means that they need to learn skills to convert PSD design to WordPress. If you are a businessman, you will also find tons of PSD to WordPress service providers. However, it is always apt to learn the trade yourself. Afterall, learning gives you the ability to transform and improve.
Things you should know before we get started:
Before we get started, you need to have some Photoshop skills. We will not be covering how to slice and dice. Also, you should have a working knowledge of responsive design. If you are still confused, we recommend the following guides.
1. Beginner’s guide to responsive web design
2. Photoshop basics
You also need some knowledge of frontend technologies including JavaScript, HTML, and CSS. Last, but not the least, you should know about PHP.
If you have the prerequisite checklist ticked off, let’s convert PSD design to WordPress. Also, note that if you think that it is already overwhelming for you, you can always hire a WordPress developer to do the job for you. However, we recommend you to go through the guide and get an understand how it works.
Step 1: Get hold of the design or create one.
The first step is to ask your designer to give you a PSD design. You can also create one on your own if you think you have the skills to do so.
Step 2: Slicing PSD
Our next step is slicing the PSD file. Slicing is the process of saving the important background images. This is an important process, and you should do it carefully.
To get started, you need to start slicing the background. The reason behind the slicing process is that the current generation websites including WordPress use modern technology such as HTML5 and CSS3. This means that you can recreate everything including borders, buttons, rounded edges and so on.
To start slicing, open up your photo editing software. Photoshop is preferred, but you can also use other alternatives if you feel comfortable with it.
Now, you need to start slicing. If you are new to the process of slicing, you can go forward and check this simple tutorial. As a developer, your job is to slice only the images that you will need. Don’t slice images or components that you can easily recreate by using front-end technologies. For the most part, you need to slice the header and footer, background and any other specific design that is hard to recreate.
If the PSD file you are using has proper folder structure, layers and file, then it won’t take much time for you to do the slicing.
Step 3: Working on the HTML and CSS files
Now that you have your background images, we can now proceed with creating HTML and CSS files. To get started, you need to create two main files.
- index.html
- style.css
You also need to create sub-folders to place images in that folder. You can name the folder, “img.” One last folder that you need to create is “JavaScript.” This folder will keep all the files related to JavaScript and jQuery. Now, that your folder and file creation is complete, it is now time to start converting the design into code.
All you need to do is start from a section and carefully writing down the code corresponding to what you are trying to transform. For example, you need to create the basic HTML skeleton, and then you can write down the menu using the <nav> HTML element and so on.
If you are not familiar with the front-end technologies, we recommend you to check out tutorials on the internet on those particular technologies or take expert help. You can check out MDN resources. They are pretty comprehensive and will get you a good start.
On top of all of that, you also need to make sure that your code is responsive.
Step 4: WordPress Theme Files
It is now time to discuss one of the major steps. As we have successfully converted PSD to their corresponding code using HTML, CSS, and JavaScript, we are on route to convert PSD design to WordPress.
In this step, you need to replicate the WordPress template hierarchy. WordPress core is built with established rules, and we need to follow them for the theme to work properly. The four main files that you need to create apart from the index.php are a header.php, sidebar.php, footer.php and style.css
These templates are crucial as they will be used on almost all the pages that you create for your theme.
Next step is to create a theme folder in your in your WordPress theme page. If you don’t know, it is /wp-content/themes/.
In that folder, create all the file names that we mentioned above. One of the main files that need to create is header.php. This file will contain the important aspects of your theme including a link to stylesheets, javascript, title, meta and so on. You need to copy the respective part of your HTML file into the files. For example, pull the footer HTML code and put in the header.php file.
After everything is done, the last step is slowly building the index.php homepage. With all the major components of the homepage created, you need to pull the homepage HTML.
Step 5: Using the inbuilt tags and functions
The last step is to expand the functionality of your theme. Also, you may also want that your theme is editable from the dashboard. To do so, you need to edit your theme file with tags and functions.
The best way to start is to study the WordPress function reference page. From there, you just need to decide which function to utilize. Moreover, you can also take advantage of the template tags that WordPress has to offer.
If you feel overwhelmed to convert PSD design to WordPress, then you surely lack some necessary skill required to convert the PSD design. In that case, we will always recommend you to hire a WordPress developer and let him do it for you. The talent for WordPress is readily available, and you can surely get it done for much less than you can expect.
EndNote
Our guide covers the step by step process of converting the PSD design to WordPress. For novice, it would be harder to convert their PSD. But, if you become little familiar, it is very easy to convert design to themes. All you need to do is practice with new PSDs.
If you have something to add, don’t forget to add it to the comment section below. We are listening.