How to Convert an HTML template to a WordPress Theme
— March 2, 2018
• 2 Minutes Read
Years ago, most websites were written in HTML. While still useful and fully functional, the HTML sites need to be completely updated for several reasons. For one, they usually do not look great on smartphones and tablets. As hardware improves, so should the code running on these devices.
A large percentage of websites today are powered by WordPress, an open source and very easy to use platform for users of all skillsets. There is virtually no reason not to convert HTML to WordPress.
Bootstrap is a frontend website framework for developing responsive sites. Many users browse on tablets and smartphones and older, HTML sites often do not display neatly on these devices. There are several Bootstrap HTML templates online. Responsive design elements include modifiable column widths, stack instead of float elements and resized elements for proper viewing depending on the screen sizes.
Convert an HTML template into a WordPress Theme
To convert an HTML template into a WordPress theme using Bootstrap, install WordPress, download and activate Bootstrap. If you are testing at a live WordPress site, you should also install Theme Test Drive plugin. Under wp-contentthemes, create a new folder for Bootstrap. In that folder, create the following files necessary for all WordPress themes:
- index.php
- style.css
- header.php
- footer.php
- sidebar.php
When you convert HTML to WordPress, first copy everything from your existing index.html file till above div class =”main” into header.php. Next, copy everything from the class=”sidebar” tag to sidebar.php. Finally, everything below the sidebar tag gets copied into footer.php. You are done with index.html file for now.
Another important tag to be added to header.php is wp_head():<?php wp_head(); ?>. If this tag is missing some plugins might not work. Also add a corresponding wp_footer() call to footer.php.
In the new index.php file, add the calls to the other PHP files placer the header call at the top and the sidebar and footer calls toward the bottom.
|
1 2 3 4 5 |
<?php get_header(); ?> <?php get_sidebar(); ?> <?php get_footer(); ?> |
Next, find the links to the CSS and replace those calls with the WordPress tag to link to the Bootstrap CSS for every page on the site.
|
1 |
<link href="<?php bloginfo("stylesheet_url');?">" rel="stylesheet"> |
Modify style.css file with the following:
|
1 2 3 |
@import url('bootstrap/css/bootstrap.css'); @import url('bootstrap/css/bootstrap-responsive.css'); |
Some other pertinent function calls are:
• wp_list_pages()
• get_sidebar()
• the_permalink()
• the_title()
• the_time()
• comments_template()
Once you have created the WordPress theme, you can customize and modify pages more easily. You do not need to go to each HTML page and make the edits. WordPress websites tend to load faster because the Javascript has likely been downloaded by the browser already and thus loads from the cache.
To get the content into the new WordPress site, you can use HTML Import 2 plugin. This tool will import a directory of well-formed, static HTML into the WordPress pages.
If you prefer not to use Bootstrap, you may choose to put all the formatting code in style.css as Bootstrap is a framework for CSS. Bootstrap allows you to prototype your site and see what it would look like before activating your new theme. Converting your HTML website to a WordPress powered site also makes optimization easier on all levels. This also means that search engines can also easily index your website.
Create Faster WordPress Websites!
Free eBook on WordPress Performance right in your inbox.
Susmita from CyberChimps is an engineer, a writer and a dancer - not necessarily in that order! Ever since she discovered WordPress, she has not ceased to be amazed by how this community-driven platform brings people together - in more ways than one. And yes, she loves binge-watching movies!
