HTML To WordPress

Migrating from a HTML based website to a WordPress website is easy and should only take a couple of minutes. It’s easy because the presentation layer of WordPress is built using HTML and CSS while the back end is based on PHP. The presentation layer is called WordPress themes while the back end is known as the Content Management System – or CMS. So if you are new to WordPress and would like to migrate your existing HTML website then it is important to know these terms as we will be using them quite often.

This HTML to WordPress tutorial is based on the following assumptions:
- the user is knowledgeable in HTML & CSS
- the user knows the basics of WordPress
- the user is familiar with WordPress themes and knows how to install them
- the HTML website does not have any backend functions
- the HTML website has the same header & footer design for all pages
- the WordPress site is newly installed

Prior to doing the actual migration itself, it’s best to understand how WordPress hold things together. And the best place to see that is when you log in to the CMS. On the dashboard’s menu located on the left, click on Appearance. This will expand to show a series of sub menu items. Then click on Editor. This will load and show the Edit Themes page. On the right most side called Templates, is a list of almost all the files that your current theme is using.

Now since we are working on the assumption that this WordPress website is a newly installed website, the first thing you need to do is to make your front page a static one. If you still don’t have a WordPress website, then follow our WordPress tutorial in order for you to set up one.

The second thing you need is to choose a minimalistic theme. You want to work on a theme that has minimalistic features. This basically means that the theme would be mostly HTML and CSS and that there would be less codes which will make it easy for you to migrate your HTML website. A suggested theme would be the Sandbox theme or our very own HTML WordPress theme. If you need a refresher on how to install and activate WordPress themes, just visit our tutorial on this.

Once you have done this, then go back to the Editor menu which will bring up the Edit Themes page in WordPress. As mentioned earlier, the right side will contain most of the files that the theme is using. With the present configuration, the files that you will be modifying are the following:

- header.php
- page.php
- footer.php
- stylesheet.css
- sidebar.php (optional)

Most themes would have the following structure – html, header and body tag are found in header.php, while the closing html tags for body and html are found in footer.php. The file page.php is where you put the main content of your web page. If you notice, page.php calls header.php and footer.php by calling the following commands


<?php get_header();?>
"
"
"
<?php get_footer(); ?>


The page.php file also calls the sidebar.php file. The sidebar essentially contains the widgets. At this point it’s probably best to comment this out and as you get familiar with WordPress’ code then maybe that’s the time to venture out to sidebar.php. To comment the code, look for the following:


<?php get_sidebar(); >


and comment it out. It’s usually located just above the call to the footer.

Once you have done that then you are ready to go. First migrate the header section of your HTML webpage to header.php. This design will propogate to all the web pages on your WordPress website. Then migrate the footer HTML codes from your old website to footer.php.

And then migrate the main styling to page.php. And notice the enphasis on styling. Page.php is a template page. So any styling of the div tags, span tags, etc. will be used by WordPress when you create a new page in its Dashboard. And that is where you put the contents in.

And there you go. It’s easy to migrate from HTML to WordPress once you understand how the files all fall into place.