PSD to WordPress Conversion – Creating a WordPress theme from HTML and CSS

Last time we talked about PSD to WordPress, we had figured out the first couple of steps in the process – slicing the PSD and coding the HTML and CSS. This time around, we’re going to take things forward and turn that code into a custom WordPress theme so that the design you had in your PSD file can be rendered into an actual website.

As mentioned earlier, a WordPress theme is made of PHP and CSS files, so some knowledge of both would be handy before we get into this. More importantly, though, we need a fundamental idea of the WordPress theme file structure.

Converting the HTML and CSS into WordPress theme files

The skeleton of a WordPress theme comprises a PHP file (index.php) and a CSS file (style.css), though there are quite a few other files as well. Fortunately for us, these two files look and function a lot like the HTML and CSS files we created in the previous part – mainpage.html and mainstyle.css.

With this in mind, we can proceed with assimilating our existing code into the WordPress theme template. To do this, we split up sections of the code and save them into different files. We can download a theme of our choice and upload it to our hosting panel so that we can use it as the base. The HTML code we have created makes its way to several PHP files in the theme. A lot of these files will not be needed or use most of the time, so don’t be intimidated by the long list:

• index.php – the file that indicates the homepage
• header.php – the file that defines a common template for all page headers
• sidebar.php – the file that describes a common sidebar across all pages on the website
• footer.php – the file for a uniform footer area
• comments.php – the file that outlines how comments behave
• front-page.php – the file for a static website front page
• single.php – the file that comes into play whenever a single post is to be rendered. In its absence, index.php is the fall-back option
• tag.php – the file for displaying tags
• archive.php – the default file for displaying author, category or date, when queried. IT can be overridden by the specific files below if they are present
• category.php – the file that displays categories
• date.php – the file that displays date and time when required
• author.php – the file for displaying author info
• search.php – the file needed to perform a search
• attachment.php – the file used when viewing an attachment on its own
• image.php – the file used when the attachment in question is an image
• 404.php – the file used to define the error message that is shown when the page queried cannot be found
• and many others.

On the other hand, the CSS code is contained in the style.css file. Once the code has been replaced in all the files of the basic theme, check the changes and your website design by loading up the live website in the browser.

WordPress Tags and Functions

WordPress uses a lot of tags that can be found in the comprehensive official documentation.

If you used an existing WordPress theme as the base of your new theme, some of the existing tags and functions of the base theme will be carried over and you can use them for your website. If, however, you chose to create one from the ground up, the tags will have to be added in the correct place in the corresponding pages of your theme.

The official list of WordPress tags can be found here.

In Conclusion

This brings our series on PSD to WordPress conversion to a close, and we hope it’s been informative, actionable and useful – it can be quite daunting for the uninitiated.

Throughout this process, we’ve seen that it takes a knowledge of Photoshop, HTML, CSS, PHP and WordPress to successfully pull off a tricky PSD to WordPress conversion. While this is by no means impossible for a determined and skilful website owner, it is also one more thing to learn which detracts from the main business and activities of the website. We understand if it’s not for everyone.

This is why we at Vipe Studio have an expert and dedicated team for seamless and best-in-class PSD to WordPress conversion.

More on The Topic

• Enhancing User Interaction on WordPress Sites with Innovative Design
• Custom WordPress Themes: Crafting Unique Digital Identities for Businesses
• Navigating the Future of Web Design with WordPress at the Helm
• The Advantages of Custom WordPress Themes for High-Performance Websites
• Unlocking the Full Potential of Gutenberg for Corporate Website Design