Thursday, October 31, 2013

PSD to Wordpress Conversion in easy 5 steps


Creating website and blogs are very easy today through a wide range of online (free) platform like Blogger, Wix, 1&1, build your site, weebly and WordPress, Bloggers and WordPress are famous among others and are widely used platform to have your own personal as well as public website/blog. Today we’re going to discuss about WordPress. Making your site is easy there but to design your website needs some technical functionality on your behalf if you are thinking to design and upload it on WordPress all by yourself. To make this step easy we’ve broke all the process in 5 simple steps which will help you to understand this scenario. (But you should know at least know about some basics of designing and coding process before doing so).



Step 1 Cutting your Design

At the very first step in converting your design from a PSD to wordpress theme you’ll cut your design into further small parts in Photoshop (recommended) or any other photo editing software. Cutting your design into further more parts will help you to code each of them separately so that they can be used in different functions in your website as uploading your whole design to wordpress is not a good idea or doesn't work perfectly.


Step 2 Coding



Now it is the time to code your designs (sliced earlier in step 1) in HTML or XHTML and CSS formats. And for doing so there are 2 famous and widely software are recommended which are Dreamweaver and Firework. But you can use any other software of your desire. Keep this thing in mind that your codes should be perfectly linked to the sliced images (design). Give them appropriate name e.g. index.html for HTML file and style.css for CSS file. This will save you a lot of time and keep you away from any confusion.
Step 3 Breaking into Wordpress structure file
Now after coding them according to the formats described earlier, break them into the Wordpress theme files’ structure 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. So the in this step you’ll mainly be converting your Index.HTML file into these PHP files mentioned above.

Step 4 Adding Wordpress Tags 


Here in step 4 add all the inbuilt tags into the wordpress theme which can be used to insert the entire essential functionalities to the WordPress theme. Just add them and from there Wordpress will handle it automatically and this is the great point about Wordpress. To understand this step these links may prove useful to you in this regard http://codex.wordpress.org/Template_Tags : this link keeps a complete list of all the tags used in wordpress. Each tag is explained with a detail and further information on it. http://codex.wordpress.org/Function_Reference : this link gives you all the references to each and every tag used in wordpress.


Step 5 Adding Functions


Huh! Congrats, now you are done with this process. You have uploaded your designed them to WordPress. Now if you want to make further changes in the functionality then you are no longer required to HTML or CSS codes. Wordpress contains a very easy-to-understand and user-friendly dashboard which enables you to add more functions to your theme if you want it.