Convert an Existing Website to Responsive WordPress Using Bootstrap

Responsive Web Design, sometimes just called RWD, is definitely one of the most important aspects of web design today. According to a recent Google survey, over 82% of sites on the web take advantage of this amazingly effective technique to deliver users the best viewing and interaction experience possible across a wide variety of devices, ranging from tiny mobile devices to giant computer monitors.

Even though WordPress is world’s easiest CMS to install, use and manage, converting an existing site to a responsive WordPress theme has always been a great challenge for theme developers. Thanks to Bootstrap that makes developers’ lives easier by allowing them to create beautiful WordPress themes easily and quickly. This easy-to-follow guide shows you how to turn a static HTML site into a fully-functional responsive WordPress Theme using Bootstrap.

Let’s start!

Step 1: Download and Unzip Bootstrap:

First things first, log on to http://getbootstrap.com and download the latest stable release of Bootstrap from there. After the download is complete, extract files from the downloaded .zip file. Inside the extracted folder, you’ll find three subfolders - css, fonts and js.

Step 2: Create Index.html and Style.css Files:

Although you already have both HTML and CSS files of your static HTML site, I recommend you create a new index.html and a style.css file. Doing so would simplify the entire coding process to a great extent since building a webpage from scratch gives you much more freedom and customization options, which is quite crucial in the case of developing themes with a front-end framework like Bootstrap. Even though this route takes longer time as compared to starting with an existing HTML template, it boosts your creativity to unimaginable heights.

Let’s imagine your newly created 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 >Hello WordPress!< /p >

< /body >

< /html >

To make Bootstrap work for you, you’ll have to initialize it in the section of your index.html file as 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 >Hello WordPress!< /p >

< /body >

< /html >

And if you’re planning to incorporate any JavaScript-powered functionality – like Bootstrap tabs, alerts and so on - into your theme, then you must also include jQuery and the associated JavaScript (bootstrap.min.js) in the section of your index.html file:

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

Now on the basis of your existing site design and taking advantage of Bootstrap components, you can code up your new “Bootstrap-powered” HTML template. Remember, no custom CSS will work on the HTML template unless you reference the new style.css file in the section of your index.html file.

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

Thus, you not only can style each and every element of your HTML page to fit your needs but also can harness the power of CSS Media Queries to make your template fully responsive across a wide range of devices!

Step 3: Break Index.html File According to WordPress Theme Structure:

Since WordPress is written using PHP, a dynamic scripting language, it doesn’t support static HTML pages. Therefore, you have to convert your static HTML template to a dynamic WordPress theme which you’ll later be able to upload to the WordPress dashboard. This static to dynamic conversion can be easily done by breaking the index.html file into multiple PHP files in accordance with WordPress theme’s file structure.

A typical WordPress theme is made up of various .php template files such as index.php, header.php, footer.php, sidebar.php, archive.php, comments.php and so on. Out of these all templates, the most critical one is index.php which in association with style.css file makes it possible for a WordPress theme to function properly. However, to make theme coding easy and to provide better compartmentalization, most of the WordPress themes consists of numerous PHP templates including all the above mentioned ones. Thus, this step includes breaking index.html down into various PHP files.

Step 4: Add Multidisciplinary WordPress Tags:

Now let’s come to the juicy part – incorporating custom functionalities to a WordPress theme. From the previous step, we got various PHP files such as index.php, header.php and footer.php etc. Now, it’s time to add WordPress Template Tags to these all PHP files in order to display information dynamically. WordPress offers a myriad of inbuilt functions that you can use to add any custom functionality to a WordPress theme without complex HTML codes. For example, you can use the < ?php bloginfo('name'); ? > function to show your site's title with < h1 > tag.

< h1 >< ?php bloginfo('name'); ? >< /h1 >

For another example, you’ll have to use wp enqueue style () function to load stylesheets in the function.php file:

//
To load the main stylesheet

wp_enqueue_style( ''wpbootstrap-style', get_stylesheet_uri() );

// To load the Bootstrap stylesheet

wp_enqueue_style( 'wpbootstrap', get_template_directory_uri() . '/css/ bootstrap.min.css);

Likewise, using a right set of various functions offered by WordPress, you can bring any required functionality to your WordPress theme.

After adding all essential functions and tags, you’ll need to place all PHP template files in a single folder that has the same name as your WordPress theme. Once you done that, you’ll get a fully-functioning responsive WordPress theme in your hands.

And to finish, navigate to --/wp-content/themes/ folder in your WordPress installation, place the theme folder there and activate the theme via WordPress dashboard. Alternatively, you can convert the theme folder to a zip file, then upload and activate it directly via Dashboard.

Step 5: Add Functionalities:

Now that you have activated your new responsive theme, it’s time to leverage the immense power of WordPress. The best thing about WordPress is that it offers a wide range of free and paid plug-ins to let you incorporate any functionality into your website without having to change the core HTML code. All you need to do is to install, activate and configure a plug-in via WordPress dashboard and you’re good to go!

So that’s all about the process of existing site to responsive WordPress theme conversion using Bootstrap. Hopefully, this guide will provide you the simplest way to convert a static HTML site to a responsive WordPress theme. However, if you still have any doubts or even face any problem during the conversion, please let me resolve them via comment section give below.