Introduction: Convert PSD to WordPress in 5 Steps: a Definitive Guide

By ipraxa
About: At Ipraxa, it is the brain power not the man power that assesses the brilliance of ideas and the conceptualization of thought. All of our websites are coded using standards compliant XHTML and CSS. For website…

Creating a website needs two important things, first an attractive, user-friendly design, second, an efficient and functional website code. Both are incomplete without each other and excelling in both is utmost necessary to create a good website. Creating a good design is a test of creativity which not everyone is born with; coding the design on the other hand requires deep knowledge of PHP, HTML, JavaScript and CSS. Thus most people can create an image PSD of their design but coding it is often a challenge.

For non-programmers, the open source community has gifted WordPress, an open source website building tool and content management system that is highly user friendly and can be used efficiently to create a quality website. But in WordPress also, creating a custom website is not that easy. Therefore to alleviate this problem here we give you 5 concrete steps to convert PSD design to WordPress template.

Step 1: Slicing PSD

The first step in PSD to WordPressprocess is slicing. Slicing means to cut and divide an image design file into multiple design files each having the different design component of the overall design. This is important because the whole design is not coded in a single image. In a website, multiple images are sewn together seamlessly, in which each component and feature has its own functionality and use.

The slicing is usually done in image editing software and most designers usually prefer Adobe Photoshop or comparable. But in the end the point is to cut the pixel perfect images and this can be performed using any image editing software including Microsoft paint. But,  Adobe Photoshop only  makes the job easier to perform and easier to organize.

Now, most designers make a design using a graphic software that allows layered image creation, again like Photoshop, and create design files that are already divided into different components in its layers. This effectively makes the process of slicing obsolete but still it is important to know how to do it.

Another thing to note here is that even though some features like buttons and embedded images have to cut in entirety as they cannot be created dynamically, other features like solid color background, header and footer color, or solid design features, that can be created dynamically, are not required to be cut in full. It is up to the designer and coder what they want to create dynamically and what not.

Step 2: Creating Index.html and Style.css

The next step is to code the sliced images into HTML or XHTML format and style it using CSS. This process requires a deep knowledge of CSS and HTML. For this purpose most coders use website creating software such as Dreamweaver and Fireworks but again it is up to the developer to decide whatever software they wish to use.

The main aim is to code the sliced images into an HTML and CSS format, with complete rollover effects and pixel perfect placement. This is also the step where you decide whether the site will be responsive or not by modifying the CSS accordingly. For convenience it is better to name the CSS file as Style.css and HTML file as index.html.

To learn CSS and HTML here are a few resources

•W3Schools:- This website is a complete web developers guide to CSS programming. It has many detailed examples on CSS and HTML coding and even has an online compiler on which you can practice CSS and HTML.

•TutsPlus:- Tutsplus offers a complete video tutorial series aimed at teaching HTML and CSS programming for free.

•https://developer.mozilla.org/en-US/learn/css: - Created by open source community behind Mozilla Firefox browser, this page contains a step by step guide list to tutorials and articles for the purpose of making the reader a CSS master.

•CSS Basics:- The best resource for beginners to learn the basic concepts of CSS.

•http://make.wordpress.org/core/handbook/coding-standards/css/:- A complete guide of CSS coding standards that is important for making search engine friendly and cross browser compatible WordPress website. This standard is provided by the WordPress community itself.

Step 3: Break Index.html According to WordPress Theme File Structure

The process of creating a custom WordPress website is actually the process of creating a WordPress theme that would be uploaded into the WordPress software. Thus the main focus of the PSD to WordPress process is to actually convert aPSD design into WordPresstheme and then adding functionality to that theme using WordPress tools and plugins.

Therefore to get the most out of WordPress, it is important to design your initial HTML file according to WordPress theme’s file structure and break your single HTML file into multiple HTML files according to the theme file structure.

A typical WordPress theme comprises of many PHP files such as archive.php, Header.php, Footer.php, Index.php, single.php, page.php, Sidebar.php, category.php, search.php, 404.php, comments.php, and comments-popup.php. Out of these, index.php along with style.css are two necessary files for a theme to function. However most WordPress themes consist of nearly all the above mentioned files to facilitate better compartmentalization and theme coding.

Thus the next step is to break up your index.html into index.php, header.php, footer.php, sidebar.php and other necessary feature files.

For understanding more about WordPress theme anatomy and creating WordPress themes from scratch you can refer to this post.

Step 4: Adding WordPress Tags

The most important part about WordPress is the hundreds of inbuilt functions that can be used to add all the basic functionalities to the WordPress theme. You don’t need a complex HTML codes. Just add WordPress inbuilt function tags in the theme files to get the desired functionality and the job is done. The WordPress will take care of the workings. And that is the beauty of WordPress.

In the previous step we have broken up the HTML into a WordPress file structure. Now we will add WordPress PHP tags to these WordPress files and make it a combined WordPress theme. For a complete list of WordPress tags and functions refer to these pages

•http://codex.wordpress.org/Template_Tags:- The page contains a full list of all the WordPress tags. Every tag is explained in detail in a dedicated page for that tag.

•http://codex.wordpress.org/Function_Reference:- This page is a reference guide to all the functions in WordPress software. Just like tags, each function enjoys a dedicated page which contains detailed description about the function along with examples.

These files are then stored in a single folder that has the same name you wish to give to your theme, and the folder it’s placed into --/wp-content/themes/ folder that could be found in your WordPress installation. For example if your WordPress is installed in a folder named WordPress-testing, the theme name is theme-test, your files will go to location WordPress-testing/wp-content/themes/theme-test/

After this step you now have a custom theme that would be working in your WordPress software. You can activate it through the WordPress dashboard.

Step 5: Adding Functionalities

Now that you have created and activated a theme, the full magic of WordPress becomes apparent. If you want to add any other functionality into the website, or you wish to modify any existing functionality you just have to install a plugin or configure the existing structure using the highly user friendly WordPress dashboard.

That means you no longer have to spend time and energy in changing the core HTML code, and no longer need to go line by line to make the theme compatible with the new change. If you want a new slider or a new style of a drop down menu, you don’t have to learn JavaScript and then go through the process of embedding it. Just download a plugin, install it, and let it take over.