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

Last updated on September, 2017

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

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. You can follow him on Twitter and Facebook

 

Check your domain ranking

by Philip Verghese 'Ariel'

A Multilingual Freelance Writer, Editor, Blogger, Roundup Expert, Translator, Internet Marketer And A Social Campaigner. Manages different sites in English as well as in Malayalam. Born And Brought Up In Kerala. Now Based At Secunderabad, Telangana, India. Can Reach At: philipscom55(@)Gmail [.] Com twitter: @PVAriel Skype Philva6

18 comments

  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.

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

  3. 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.
    Regards
    Lino

  4. Hi Philip and Jason
    It is such a nice post about wordpress
    but
    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..
    Thanks
    Have a profitable time ahead.

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

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

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

    Regards
    Hussain

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

  9. Hello,
    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

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

  11. 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,

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

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

Leave a Reply

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

CommentLuv badge

Follow Us

PLEASE LIKE, COMMENT AND SHARE!

The Indian Blogger Awards 2017

ADVERT




People Who Honored Philipscom

Featured In The Huffington Post

The Huffington Post - Philipscom

FEATURED IN ALLTOP

Featured in Alltop

Philipscom Is Hosted On A2Hosting