Last updated on September, 2017
How To Convert A Static HTML Site To Responsive WordPress Site? A Guest Post By Jason.
Responsive website design has become an important aspect of the website design today. According to a recent report, it has been shown that more than 45% of the websites’ traffic is driven by smartphones. And the number is growing every day.
The evolution of various devices and screen sizes has taken the online world by storm. Designing a website does not only include browser compatibility but also device compatibility today. This has made it extremely difficult for websites, especially those who are built using HTML or traditional platforms, to keep up with this design trend.
As per a survey conducted by Google, more than 82% of the websites leverage this extremely useful technique to render amazing user experience and user interfaces across a range of devices, differing from giant desktop computers to small screen mobile phones. Moreover, Google has recently announced that Google search engine has been updated to use mobile-friendliness as an important ranking factor.
Responsive website design has become an important aspect of the website design today via pvariel.com
Click To Tweet
So if your websites are built using static HTML and are not responsive, you probably be looking to convert it to the most popular responsive platform – WordPress.
Three Ways to Convert a Static HTML website to a WordPress website.
Your personal preferences, time management and level of coding skills will determine which way you want to convert your static HTML website to a WordPress website. Apart from these factors, I want to put light on the best three ways to convert a static HTML website to a Responsive WordPress website. However, it does depend on you to take the way at your own convenience and flexibility.
These are the main three ways,
● Create a WordPress Theme manually based on your static HTML website
This is for those who are code nerds as you need to get into your code. First, you need to access the current website directory via FTP and make use of your initial code as a starting point. After this complex step, you need to recreate all the necessary files that are required for a WordPress theme. Also, you might need to copy some of the codes from the WordPress Codex and GitHubs. If you have some experience in the coding of HTML, CSS and a bit of PHP, then this will be simple and easy for you to handle.
● Choose a Premium WordPress Theme and Migrate Simply
This is one of the best options if you’re looking at the simplicity and easiness of the task. For this reason, this is the most popular way used by most of the people. All you need to do is spend some bucks and you’re good to go for a simple process of migration. For importing the content, you just need to select an importing plugin from WordPress Plugin Repository.
● Choose an HTML to WordPress Conversion service
Well, this is the easiest solution to them all. Hire an HTML to WordPress Conversion Service and they will do all the legwork for you. However, the cost will vary as per the industry norms. In the rest of the post, I am not going to discuss anything about this point. But if you have a good budget, you should consider this point as it will ensure the quality of the work done for your website.
In today’s post, we are going to show you an easy to follow guide on converting your static HTML website to a fully responsive WordPress website with the help of Bootstrap
An easy to follow guide on converting static HTML website to a fully responsive WordPress website
Click To Tweet
1. Download and unzip Bootstrap
Since we are going to convert the website using Bootstrap, we need to first download the Bootstrap and unzip it. Navigate to Getbootstrap.com and download the latest version of the Bootstrap. Once the download is complete, extract the files from the .zip folder. You will notice 3 subfolders inside the extracted folder – js, fonts, and CSS.
2. Create index.html and style.css files
Even though you already have these two files in your static HTML website, it is still recommended to create index.html and style.css file in order to streamline the whole process of conversion. Moreover, it allows you to customize the look and feel of your website as per your specific needs.
However, if you do not have enough time and skills to create these two files from scratch, you can, of course, proceed with your default index.html and style.css files.
Let’s assume your index.html file looks something like this.
< !DOCTYPE html >
< html lang=”en” >
< head >
< meta charset=”utf-8″ >
< meta name=”viewport” content=”width=device-width, initial-scale=1.0″ >
< title >My WordPress Theme< /title >
< /head >
< body >
< p >This is my homepage!< /p >
< /body >
< /html >
To use Bootstrap for your website, you have to add a single line of code to your index.html files after <title> tag as shown follows.
< !DOCTYPE html >
< html lang=”en” >
< head >
< meta charset=”utf-8″ >
< meta name=”viewport” content=”width=device-width, initial-scale=1.0″ >
< title >My WordPress Theme< /title >
< link href=”css/bootstrap.min.css” rel=”stylesheet” media=”screen” >
< /head >
< body >
< p >This is my homepage!< /p >
< /body >
< /html >
Note: if you are using your default index.html file, just add this line of code
< link href=”css/bootstrap.min.css” rel=”stylesheet” media=”screen” >
below your <title> tag.
Similarly to recreate your style.css file, you just have to add the link of your new style.css file in your index.html file as shown below:
< !DOCTYPE html >
< html lang=”en” >
< head >
< meta charset=”utf-8″ >
< meta name=”viewport” content=”width=device-width, initial-scale=1.0″ >
< title >My WordPress Theme< /title >
< link href=”css/style.css” rel=”stylesheet” media=”screen” >
< link href=”css/bootstrap.min.css” rel=”stylesheet” media=”screen” >
< /head >
< body >
< p >Hello WordPress!< /p >
< script src=”https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js” >< /script >
< script src=”js/bootstrap.min.js” >< /script >
< /body >
< /html >
If you have noticed the code closely, you would see these lines of code:
< script src=”https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js” >< /script >
< script src=”js/bootstrap.min.js” >< /script >
inside <body> tag. These lines of code can be added, if you are using Javascript-powered functionality.
3. Divide index.html file into WordPress theme files
WordPress is written using PHP and it does not support static HTML pages. Thus it becomes imperative to convert your index.html file into WordPress structure. As a matter of fact, WordPress theme structure consists of many files including index.php, header.php, content.php, archive.php, comments.php, sidebar.php, footer.php, function.php and so much more. Thus you need to break your single index.html file into all these files to follow the WordPress theme’s basic file structure.
Index.php is the most critical file which in accordance with style.css file enables your WordPress theme to function properly. So make sure your files are separated carefully.
Also if you are new to PHP, you better make yourself familiar with its structure, syntax and coding standards. For the basics, each file should start and end with <? ?> tags.
4. Adding WordPress tags
Now it’s time to integrate custom functionalities to your WordPress theme. You have different files for your WordPress theme including index., header., footer.php and more. Since WordPress is dynamic, you have to make your theme load information dynamically by adding WordPress tag.
WordPress comes with a variety of inbuilt functions that can be used in any WordPress theme to make it function accordingly.
As an instance, you can use wp_enqueue_style() function to load stylesheets.
wp_enqueue_style( ”-style’, get_stylesheet_uri() );
Similarly, there are various other inbuilt functions that can be used to add functionality to your WordPress theme.
5. Creating theme folder
Once you have all your PHP files with you, you need to place them in a single folder that would have the same name as that of your theme. Copy and paste all your .php, .css and .js files into this folder, where .css files would go in the CSS folder and .js files would go in the js folder.
Place this folder inside –/wp-content/themes/ folder. Go to your WordPress dashboard and activate this theme to know whether it is working fine or not.
6. Adding additional functionalities
After activating your WordPress theme, it’s time to use the power of WordPress in its full glory. WordPress has a huge database of many useful and powerful plugins that can be downloaded and installed to add additional functionalities to your website. From adding a simple slider to complex functionality such as converting your blog into an e-commerce store, you will easily find a range of WordPress plugins that you just have to install, activate and configure and you are all set to go.
Conclusion
Converting a static HTML website to fully functional and dynamic WordPress theme can be a challenging task provided you know how to go about it. We have tried to explain each and every step in detail to help you convert your existing HTML website to WordPress theme.
We hope you find it useful and if you have any question related to this, you can always shoot a comment in the comments below.
A Guest Contribution from Jason Dazkewicz of WordSuccor Ltd. Read more about him in the Author Bio below. Thanks Jason for this wonderful contribution to #Philipscom.
Author Bio: Jason Daszkewicz works for WordSuccor Ltd. as a WordPress developer. He is an expert on converting HTML website to responsive WordPress theme with proven track records. He is also a blogger and loves to share his knowledge through WordPress tutorials. You can follow him on Twitter and Facebook
Related articles
The post How To Convert A Static HTML Site To Responsive WordPress Site? appeared first on Philipscom.