How To Convert A Static HTML Site To Responsive WordPress Site?

How To Convert A Static HTML Site To Responsive WordPress Site?
Like Tweet Pin it Share Share Email

How To Convert A Static HTML Site To Responsive WordPress Site?

How To Convert A Static HTML Site To Responsive WordPress Site? A Guest Post By Jason.

html-to-wordpress-conversion

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 interface 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.

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.

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

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

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

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

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

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

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. 

 

jason

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. If you are about to hire a professional WordPress Developer Jason can prove to be your right choice.  You can reach him via WordSuccor.Com 

How To Convert A Static HTML Site To Responsive WordPress Site?

Comments (0)

Leave a Reply

Your email address will not be published. Required fields are marked *