Ajeet Yadav

With the release of version 4.1 “Dinah”, WordPress now powers over 60 million websites across the web and is being used by many well-known sites like Forbes, TechCrunch, GigaOM and CNN. Due to the rapid growth in popularity of WordPress in recent years, more and more people are now in favor of moving their static HTML sites to WordPress. Running your site on WordPress platform proves to be beneficial for you in many ways, out of which “easy content management” is the one. In this blog post, firstly I’ll make you familiar with reasons that inspire people to adopt WordPress. After that, I’ll take you through the process of converting an HTML site to WordPress. Later, I’ll be telling you what things you should do after migration. Let’s start! Why to go from Static HTML to WordPress? Below are some solid reasons why people move to WordPress: #Easy to Use: First and foremost reason, WordPress is extremely user-friendly. Anyone having adequate knowledge of computer and internet can setup and manage a WordPress site without any hassle. Regardless of who you are, a professional developer or a non-techie, you can get up and running with WordPress in just five minutes. Strictly speaking, everything from software installation to code modification to content publication is a breeze in WordPress. #SEO Friendly: WordPress is built to embrace search engine spiders and crawlers and therefore, it attracts a huge amount of organic traffic to your site. Having a clean code structure and packed with several search optimization tools, such as permalinks, blogroll and pingback, WordPress ensures your site would get higher rankings in search engine results. In addition, it allows you to take advantage of third party plug-ins for better SEO of your site. #Scalable and Flexible: As WordPress is an extremely customizable and highly expandable CMS, you’ll be able to give your site any look and functionality that you desire. It allows you to choose from a wide range of themes so that you could create any website of your taste. Also, there are a myriad of plug-ins available to let you enhance WordPress’ core functionality. Thus, the possibilities of what can be done with WordPress are endless. #Cost and Time Effective: As WordPress is open-source software, it’ll not affect your bank account unlike traditional websites do. Most of the WordPress themes and plug-ins are available to use for free. Means, you don’t need to spend a lot of time and money on a developer to have minor changes in the design and functionality of your site. With WordPress, you can do them by yourself. #Strong Community Support: WordPress is backed by a large and always growing community. So if you need any help regarding your website, there will always be someone there to assist you. There is no need to call a developer every time you want some editing in the code and content of your site. Just post your problems there and get them resolved by experts for free in minutes. #Trouble-free Upgrades: Websites built with WordPress take less time to upgrade as compared to static ones. In WordPress, using an FTP program such as FileZilla, you can take your website to a whole new level with a few mouse clicks. Unlike classic HTML websites, there is no need to mess with complex firewall settings or any other software. #Multi-User Capability: Being a multi-user capable platform, WordPress lets you control who can do what within your site. You as a site owner can assign a specific role to each of your users, allowing them to perform a set of tasks. For example, you can set up your editor with a user account where he is allowed only to add and edit content to your site. Try this with a static HTML site!! #Safe and Secure: Since its launch, WordPress has been updated more than 25 times. What do these all updates mean? Obviously, security! WordPress team is continuously working hard to make WordPress world’s most secure and reliable CMS. That’s the reason a site built with WordPress is secure enough to deal with any kind of malicious intent. How to Migrate from Static HTML Site to WordPress? If you’re ready to switch to WordPress, below are four steps following which you can move your existing HTML website to WordPress platform efficiently and effectively. #Analyze Your Existing HTML Site: This is the first and foremost step that you should follow before you’re going to convert your static HTML site to a WordPress theme. Check your site for irrelevant or outdated content and if found, clean it up. Examine the existing navigation system and think how it can be improved. Also, don’t forget to dig into hidden elements such as contact page, registration forms and email subscription etc. Doing your HTML site analysis would help you decide what content, features and functionalities should be migrated to WordPress. Consequently, you would have a clear idea about what plug-ins you need to install for getting the same functionality on WordPress platform. Remember, migration is the perfect time to assess whether the content of your site is worthy or not. #Get to Know WordPress: Once you have analyzed your static HTML site, the next step is to familiarize yourself with WordPress. This can be done by installing WordPress on a local computer or with your web hosting provider. WordPress installation is a quite easy process and therefore, I don’t think you would face any kind of trouble. Most web hosts offer one-click quick install and in case you do get stuck, please contact your web host. After finishing the installation, understand how WordPress works and try to find out which plug-ins would prove to be extremely helpful after migration process. Additionally, using “Settings” menu in the WordPress Dashboard, choose your permalink structure and disallow search engines to index your site during migration. #Do a Thorough Backup of Your HTML Site: Even if you have taken back-up of your old static site many times, you must not skip this step. I strongly recommend you to “take a complete backup of your static site once more” in order to avoid any risk of data loss while migrating. Remember, backups take very little effort and time but still are absurdly ignored. Hence as a precaution, have a tested backup saved in multiple locations (such as DVD, hard drive or hosting backup server) so that you could restore your site in case something goes wrong. As well, I suggest you not to tinker with your site in live mode even if you feel whatever you're doing is right. #Migrate to WordPress from Static HTML: Let’s come to Migration, the most juicy and vital part of the entire HTML to WordPress conversion process. May be conversion seems a bit tedious to you but actually it’s not like that. It indeed depends on your proficiency level in WordPress, HTML, PHP, CSS and JavaScript. If you have a passing familiarity with all of them, you can do conversion by yourself. Otherwise, you may need to get a professional HTML to WordPress conversion service for the same. Assuming you have sufficient coding knowledge and your site is small, the best option possible in front of you is to divide your existing HTML code into four sections (header, footer, sidebar and content) and then copy the content of each section into its respective PHP file. In case your site is large, you can take advantage of an HTML to WordPress plug-in, like HTML Import 2, to give your conversion process a boost. What to do after the migration? Once the conversion is completed, you need to do a few things to give your WordPress site the final touch. They are mentioned below: Install Necessary Plug-ins: To supercharge your brand new WordPress site with same functionalities as HTML site, install plug-ins that you found handy. Check and Fix Broken Links: Check your website for broken links (404 errors) and if found, fix them as soon as possible. You can make use of Google Webmaster Tools for this task. Set-up a Custom 404 Error Page: Add a custom 404 error page to take your visitors to important sections of your WordPress site, in case they try to access any URL that doesn't exist. Redirect Links: To inform search engines that your website’s content has been moved to a new web address, set up 301 redirects. For this purpose, you can use Simple 301 Redirect or Redirection plug-in. Enable Search Engine Indexing: Go to “Settings --> Reading” in your WordPress dashboard and check “Allow search engines to index this site” to get your site indexed by search engines. Generate and Submit XML Sitemap: To ensure your site would be included in search engine results as fast as possible, create an XML sitemap using plug-in like Google XML Sitemaps or XML Sitemaps and submit it to Google.

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: Large Screens @media only screen and (min-width: 1824px) Desktops and Laptops @media only screen and (min-width: 1224px) iPads: Landscape @media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: landscape) iPads: Portrait @media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: portrait) iPads: Portrait and Landscape @media only screen and (min-device-width: 768px) and (max-device-width: 1024px) iPhone 5: Landscape @media only screen and (min-device-width: 320px) and (max-device-width: 568px) and (orientation: landscape) iPhone 5: Portrait @media only screen and (min-device-width: 320px) and (max-device-width: 568px) and (orientation: portrait) iPhone 5: Portrait and Landscape @media only screen and (min-device-width: 320px) and (max-device-width: 568px) iPhone4 @media only screen and (-webkit-min-device-pixel-ratio: 1.5), screen and (min-device-pixel-ratio: 1.5) Smartphones: Landscape @media only screen and (min-width: 321px) Smartphones: Portrait @media only screen and (max-width: 320px) 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.