Skip to content

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

Posted in Technology/Software, and WordPress And SEO

Last updated on June 25, 2019

Last updated on June 24, 2019

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

Responsive WordPress Site

Responsive WordPress Site design has become an important aspect of the website design today.   According to a recent report, Responsive WordPress Site 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.

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 Share on X

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 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 the 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 Share on X

1. Download and unzip Bootstrap

Responsive WordPress Site

Since we are going to convert the website using Bootstrap, we need to first download the Bootstrap and unzip it.

Navigate to 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

Responsive WordPress Site

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, Responsive WordPress Site 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=”” >< /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=”” >< /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

Responsive WordPress Site

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, the 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. Responsive WordPress Site – Adding WordPress tags

Responsive WordPress Site

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 a 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. Responsive WordPress Site – Creating a theme folder

Responsive WordPress Site

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 To Responsive WordPress Site


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


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

Updated on June 24, 2019.

Published on: Oct 12, 2016 @ 17:01

Disclaimer:  This is a guest contribution to Philipscom and the tips tricks, strategies mentioned in it does not reflect the view and opinions of P V Ariel or Philipscom blog. For More Information Read This


Dear Readers, Your Attention Please!

Thank you so much for your valuable time.
I appreciate and love your feedback/comments!
 I accept feedback from my readers and often I do reciprocate.
Your feedback negative or positive, I would like to hear from you.
But there is a slight restriction/rule in this regard.
Please read our comment policy before you make a comment,
otherwise, you may miss the mark and your comments may not get approved!
So please do share your views in the comment box keeping the comment policy of Philipscom.

In short, Philipscom will not approve comments that

 1.  Are One word or one line.
2.  Are abusive, intimidating, threatening or inflammatory
3.  Make offensive generalizations
4.  Ramble without a point
5.  Use offensive or insensitive language
6.  typed all in CAPITAL Letters.
7.  typed in a language other than English
8.  Are irrelevant to the post in question
9.  Contain self-promotional materials or links
10.  Give unnecessary, advice to Philipscom
Philipscom also reserves the right to edit comments or to remove material that does not conform to our comment policy.
If time permits please do visit this post related to blogcomments.

Check your domain ranking


  1. Hi Jason,
    Bootstrap has changed the game, I have been using bootstrap for a long time ahs it is really good, It saves me a lot of time. Although. This post of your was good enough to read.
    Thanks for sharing.
    have a good week ahead.

    October 12, 2016
  2. Palash td
    Palash td

    Hi Bro,
    This is an excellent guide for me. Because I have a little knowledge of HTML and CSS. I’m able to make HTML site. But I don’t try to upload them to WodPress. Now I would try.
    Thanks for sharing your guide.

    October 13, 2016
  3. friendship day quotes
    friendship day quotes

    Hello Philip,
    Happy to visit your page today.
    It is amazing to note that you have a website which is working well and looks fantastic too!
    No doubt very rapidly it is growing and am sure it will be well-known and will be one of the top one in the near future.
    Keep supporting the new writers and their activities, I appreciate your willingness to do this liberally. Your other posts show it well about that!
    Thank you so much.
    Hope you do drop our page.

    October 14, 2016
  4. Vashishtha Kapoor
    Vashishtha Kapoor

    Hi Philip and Jason
    It is such a nice post about wordpress
    for the sake of honest feedback, I would say that it does not contain the exact information as written in the title.
    It is more like “How to create your own wordpress theme?”
    Do you think using bootstrap only can make a site responsive? It has a lot of homework to do to get things work.
    You need to do better use of columns and rows. And have to be familiar with the latest version of bootstrap as well.

    I was expecting something advanced like use of @media in the CSS. However, it is well written.
    But it is also a fact that all website can not be converted into wordpress from HTML in the same way.

    Still confused and half agree..
    Have a profitable time ahead.

    October 14, 2016
  5. Eddie McHam
    Eddie McHam

    Thanks for this simple step-by-step guide/tutorial.
    I may give it a try for my own WP site in the not too distant future.

    October 14, 2016
  6. Sk Imran Hossain
    Sk Imran Hossain

    This is indeed an effective tutorial for all blogger.
    The author well explained the method.
    I appreciate. This is an added advantage to the bloggers.
    Thanks for sharing.
    Imran Hossain

    October 15, 2016
  7. Being a developer I know how much bootstrap has saved our life and your tutorial is very much attractive and easy to understand
    Anyone can use it. BTW nice and easy tutorial… Thanks for sharing. Have a wonderful day.

    October 16, 2016
  8. Hey Jason and Philip,
    What a great post! Especially for those who love to dive in the technical stuffs. Loved the way you detailed everything in it.

    Indeed, having a responsive theme is must now for better ranking. Personally, I noticed the effect of this factor on some sites I managed.

    Thanks for sharing this informative post!


    October 16, 2016
  9. Deebak

    Hello Jason and Philip, it is very nice article from you. I liked and felt easy to understand as you explained it in detail. This information helped me in clearing all my doubts on this conversion. Thanks Jason for sharing very useful information.

    October 18, 2016
  10. Richa

    Nice post :) it is really very informative and helpful.
    There are various tools that are used for the purpose of marketing, advertising, SEO, CRO, Saas, web development, infographic, analytics etc. available

    October 19, 2016
  11. Aakshisingh

    Hello Philip..its a very helpful and informative post for designing websites within less time in attractive way…I really appreciate you

    October 21, 2016
  12. Kaushal Patel
    Kaushal Patel

    I was searching for html to wordpress convertor as i want to convert one html template in to wordpress. I read many posts but was not able to understand the complex process they defined. This blog has very simple language which help me to understand the process very easily,

    October 21, 2016
  13. Siddharth

    Nice article, Great help for trial but I think the linking of different page to the index file or say the main layout should be explained in little more detail like how to use the header or footer in multiple pages.
    Also the explanation of separating html file into multiple wordpress files must be cleared with more details if possible. but for general purpose this article is really helpful at least to the beginners.hope for more details to be updated. thanks.

    November 18, 2016
  14. You have a website which is working well and looks fantastic too. It is very nice article from you .This information helped me in clearing all my doubts. This is an added advantage to the bloggers.

    July 20, 2017
  15. Rahul Wordpress Developer
    Rahul Wordpress Developer

    Hello Jason,
    Thanks for sharing very useful information about converter. This information helped me in clearing all my doubts on this conversion.

    August 2, 2017
  16. I recommend people who want to set up a new WordPress site to see this article first because you have explained it very succinctly.

    October 9, 2017
  17. Susmita Debbarma
    Susmita Debbarma

    From a long time I can convert HTML to WordPress theme but now after posting this article, I will convert it.
    Thanks for sharing this timely post.

    October 11, 2017
  18. Jasper

    Thanks for this guide, it’s really useful. I just wonder if you tried some automatic tools like htmltowordpress convertor or cms2cms?

    June 25, 2019
  19. Anuj

    Your post is always Informational.
    Is it better to change the code from static to responsive VS Using free responsive theme. Would like to hear from you.

    June 28, 2019
  20. Hi Jason,
    great guide here. Truly WP can’t be beat when it comes to design, functionality and even SEO.
    HTML sites can’t keep up, simple as that.

    July 10, 2019
  21. Thanks for sharing this article, I was struggling to make my wordpress site responsive since a long time, I think this will help a lot!!
    Keep writing.
    All the best.

    July 10, 2019

Leave a Reply

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

CommentLuv badge

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Let's Connect On YouTube