Create a Responsive Wordpress Theme from a Photoshop File

In today’s cutthroat web design world, a successful website requires two significant things: first, an easy to use, compelling and responsive user interface design and second, an efficient and well-functioning code. Where an attractive responsive design requires you to be an extraordinarily creative professional, on the other hand, coding requires you to have deep knowledge of various web programming languages such as HTML, CSS, PHP and jQuery. Thus anyone can create a Photoshop design file (PSD) of their design, but coding it is not everyone's cup of tea.

For those, who aren't programmers, WordPress CMS has been emerged as a huge boon. Being open-source and extremely user friendly, WordPress makes website creation a breeze for anyone. But again, creating a custom responsive website in WordPress is not as easy as you think. It also requires you to have enough mastery over various programming languages, especially over CSS media queries. Therefore to overcome this problem, I’ve come up with this comprehensive guide that will teach you how to convert a Photoshop file into a well-functioning responsive WordPress theme in just six simple steps.

Let’s start!

Slicing the Photoshop File:

This is the first step that you should follow while you’re going to convert the Photoshop file into a fully-functional responsive WordPress theme. Maybe you are a little bit confused with the term “slicing”, but don’t worry, it’s nothing except cutting and dividing a single image design file into multiple design files that contain different design components of the entire design. When you design a WordPress theme, sliced images are sewn together in such a way that each of its features and components has their own unique functionality and use. This is the most crucial step in the entire conversion process since it’s not possible to code the whole design from a single image file.

The Slicing can be done using an image editing software such as Adobe Photoshop, which is the most preferred choice of web and graphics designers for this task, or comparable. Although a simple application such as Microsoft paint can be used to accomplish the same, but I highly recommend you use Photoshop because it retains the capabilities to make the job easier to perform and organize. Whatever software you wish to use, the main point you must keep in your mind is to come out with pixel-perfect images for various sections such as Header, Footer, Sidebar, Navigation, and Body etc.

Preparing the Front-End:

Once the image design file is duly sliced, the next step is to create index.html and style.css files. To achieve this, you have to code the sliced images into a markup language such as HTML or XHTML and styling them using CSS (Cascading Style Sheets). This is one of the most imperative steps of conversion since Photoshop file are static and cannot be accessed directly on web browsers. For that reason, to make them dynamic, it’s vital to perform the coding. However, as I’ve already mentioned above, this process requires you to have in-depth knowledge and expertise in HTML and CSS.

To accomplish this task, like most of the coders, you can take advantage of website creation software such as Dreamweaver. Whichever software you prefer to use, in the end the point is to code every web component with complete pixel-perfect placement as well as rollover effects. In addition, it would be convenient for you if you name the HTML file as index.html and CSS file as style.css.

Below are some resources to learn CSS and HTML:

W3Schools: This website is dedicated to provide detailed tutorials and examples on various web development topics including CSS and HTML. It also has an online compiler where you can see your HTML/CSS in action.

Codecademy: Codecademy covers the basics of CSS/HTML and offers free coding classes to beginners.

HTML5 Rocks: One of the best resources for coders where they can find in-depth tutorials on specific features of HTML5.

Mozilla Developer Network: Created by an open community of Mozilla Firefox developers, this web page contains great tutorials and articles on open web technologies including HTML and CSS.

WordPress Coding Standards: A complete guide provided by the WordPress community to help developers learn how to code a WordPress site using best practices.

Creating Responsive.css file:

After coding the sliced images into an HTML theme, now it’s time to make it responsive using CSS media queries. This can be achieved by creating another CSS file named responsive.css containing media queries for different devices. Because different devices support different media queries, you have to target a particular device in accordance with its screen resolution. For instance, the media query below prevents CSS styles from rendering to 767px or less screen size.

@media only screen and (max-width: 767px) {
body {width: 300px;padding: 22px 28px 50px;}
}

Likewise, you can use media queries for other devices as per your requirements. For your convenience, below is an exhaustive list of media queries for popular devices:

1. Large Screens @media only screen and (min-width: 1824px)
2. Desktops and Laptops @media only screen and (min-width: 1224px)
3. iPads: Landscape @media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: landscape)
4. iPads: Portrait @media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: portrait)
5. iPads: Portrait and Landscape @media only screen and (min-device-width: 768px) and (max-device-width: 1024px)
6. iPhone 5: Landscape @media only screen and (min-device-width: 320px) and (max-device-width: 568px) and (orientation: landscape)
7. iPhone 5: Portrait @media only screen and (min-device-width: 320px) and (max-device-width: 568px) and (orientation: portrait)
8. iPhone 5: Portrait and Landscape @media only screen and (min-device-width: 320px) and (max-device-width: 568px)
9. iPhone4 @media only screen and (-webkit-min-device-pixel-ratio: 1.5), screen and (min-device-pixel-ratio: 1.5)
10. Smartphones: Landscape @media only screen and (min-width: 321px)
11. Smartphones: Portrait @media only screen and (max-width: 320px)
12. Smartphones: Portrait and Landscape @media only screen and (min-device-width: 320px) and (max-device-width: 480px)
    

Integrating Front-End into WordPress:

The main purpose of entire Photoshop file to responsive WordPress conversion process is to create a custom responsive WordPress theme that could be uploaded into the WordPress software. Therefore to make the most of WordPress, it’s crucial to design the initial index.html file with WordPress theme file structure in mind and then break it into multiple HTML files according to the file structure of the theme. Doing so you’ll be able to make the theme live and add various functionalities via WordPress tools and plug-ins.

As WordPress is written in PHP, a typical WordPress theme consists of numerous PHP files such as index.php, search.php, category.php, header.php, footer.php, comments.php, sidebar.php, archive.php and many more. Most of WordPress themes have these all files to facilitate better theme coding and categorization. However, you just need two files index.php and style.css to make a WordPress theme live and functional.

Thus in this step, you have to break your index.html file into necessary feature files on the ground of WordPress theme file structure.

Incorporating Multidisciplinary WordPress Tags:

What makes WordPress powerful is a myriad of built-in functions, which you can use to add all desired functionalities to a custom theme without teasing your mind with difficult HTML codes. Just by including the right set of WordPress inbuilt function tags in theme files, you can bring any functionality to your WordPress theme.

So this step involves adding WordPress PHP tags to various theme files (that you’ve got in the previous step by breaking index.html), and then combine them to procure a functional WordPress theme. All these files would be placed in a single theme folder that could be found in /wp-content/themes/ folder in the WordPress installation.

To get more information about WordPress tags and functions, please go through following pages:

• Template Tags: Here you can find a complete list of WordPress tags. Every tag on this page has a dedicated page where you can find full details about that tag.
• Function Reference: Once this step is completed, you would be able to have a well-functioning custom responsive WordPress theme that can be activated via WordPress dashboard. After activating the theme, you can check whether implemented media queries are working properly or not.

Augmenting the Theme with Additional Features & Functionalities:

After creating and activating the custom responsive theme, now it’s time to experience the true magic of WordPress platform by adding desired functionalities to your theme. WordPress offers a wide range of free and paid plug-ins, which can be installed and configured via WordPress dashboard, through which you can add any kind of functionality to your site.

Apart from this, if you want to make some changes to existing functionality, you just need to modify the existing file structure through dashboard. Means, to add extra functionalities, you won’t be required to spend your valuable time and energy in modifying the core HTML code. All you need to grab, install and activate a relevant plug-in and WordPress will take care of the rest.

That’s all about developing a responsive WordPress theme from a Photoshop file!

Conclusion:

Hopefully, this guide would provide you the most simplified way of converting any Photoshop file to a beautiful responsive WordPress theme . However, if you face any kind of difficulties while converting, then it would be better for you to hire a professional WordPress developer  for the same purpose.