Converting HTML Sites to WordPress Sites

This is why to avid WordPress users like myself, it’s almost hard to believe that in 2018 someone might still be operating a static HTML website instead of a WordPress website with a theme and plugins. But the fact is there are still a significant amount of active HTML only sites out there. (Or HTML with a bit of CSS. convert html to wordpress theme for free

Converting HTML Sites to WordPress Sites

html to wordpress theme

In the beginning (of the web) all websites were made with nothing but text and static HTML. Now though, over 20 years later, the web is a much different place. Websites are much more complex. They provide richer and more enjoyable experiences for site creators and visitors alike.

This is in large part thanks to open source projects like WordPress. Which, over the last ten years or so, has succeeded in its core mission to democratize online publishing (and a lot more in the process) so that anyone with a WordPress install and the right theme/plugins can have a modern website with advanced design and functionality. No coding–not even HTML!–required.

This is why to avid WordPress users like myself, it’s almost hard to believe that in 2018 someone might still be operating a static HTML website instead of a WordPress website with a theme and plugins. But the fact is there are still a significant amount of active HTML only sites out there. (Or HTML with a bit of CSS.)

Granted, these site owners may have good reasons for not upgrading or converting. Maybe their site content never changes and the simple formatting and design already in place is serviceable? Or maybe it’s less of a hassle than worrying about keeping a WordPress site updated? Both are valid reasons (among others). Prime examples of, “Don’t fix what isn’t broken.”

However, I have a feeling that these might not be the primary reason some (perhaps many) haven’t made the leap. The most obvious one being that they simply don’t know how to convert their HTML site into a WordPress site. Especially without losing content or needing to do excessive formatting on a page by page basis.

Thankfully, as is often the case with WordPress, there are a number of ways to go about solving this problem. I’ve compiled some options below.

Your Options for Converting a Static HTML site to a WordPress site

How you choose to convert your static HTML site into a WordPress site will no doubt depend upon your personal preference, desired time/monetary investment, and skill level with code. You will have to be the one to decide which is best for you, but with the summaries below you should be able to decide quickly and skip straight to the most relevant information in this post for your specific situation.

There are three main options:

1. Manually create a WordPress theme based on your current static HTML site.

This will require you to get into your code. You will have to access your current site directory via FTP and use your existing code as a starting point. From there you will need to create the necessary files for a WordPress theme and copy bits of code from the WordPress codex. This is fairly simple and straight forward if you have some experience with HTML, CSS, and a bit of PHP.

2. Install a pre-made theme and simply migrate your content.

This is probably the best option at the intersection of simplicity and value. Assuming you already have to host for your current website, you will only need to spend money if you choose to purchase a premium theme. The plugin we will use for importing content is freely available in the official WordPress Plugin Repository.

3. Paying to have an HTML to WordPress conversion service re-create your site.

This is the easiest solution, as it doesn’t require you to do much of anything. However, it will not do much for familiarizing you with WordPress and the cost will vary depending on who you choose to hire. I won’t be covering this option in the sections below because if this is the route you are interested in, you can simply do a quick search for service providers and they will take care of the rest.

Preparing for HTML to WordPress Conversion

No matter which route you decide to take below, there are a few things you will want to do before diving in.

The first is choosing a hosting plan. You’ll want to look over the options that are out there and decide on a package that best fits your needs. Or perhaps you’d like to create a local WordPress installation instead? You can always migrate it to a hosting service later.

Once you’ve chosen, you will need to install WordPress and log into WP Admin. This is the point at which our two possible paths divide.

Manually Converting Your Static HTML Site to WordPress

If your goal is to not only get your content from your static HTML site into WordPress but also duplicate your current design, this means you will need to create your own custom theme. Thankfully, that is not as scary as it might sound at first. It only involves creating a few folders and files, a bit of copy and paste, and then uploading the result.

You’re going to need a code editor such as Sublime or Notepad++ and access to both your HTML site’s directory and your new WordPress install’s directory.

For this tutorial, I have picked up a free HTML business theme from html5.com. The techniques will remain the same while converting any business theme. If you have questions regarding your business theme, feel free to drop a comment or an email and I will be happy to respond.

Moving on, first, we need to take a look at our HTML theme and mark down what elements are the header, main body, and footer.

Step 1: Prerequisites

I hope you already have WordPress installed on your hosting account or localhost (i.e., your computer). You can also signup for the Cloudways managed WordPress hosting platform to install in just a single click.

Step 2: Name Your Theme

Access your WordPress installation through an FTP client (like, FileZilla) and navigate to WP Content > Themes.

In the Themes folder, create a new folder and name your theme.

Step 3: Create PHP Files

Every WordPress installation has two mandatory files style.css and index.php. We will create more files to better organize our theme. Create the following:

  1. style.css (contains theme details and CSS files)
  2. index.php (serves the main content if other optional files are not declared)
  3. header.php (contains the header elements of the theme)
  4. footer.php (contains the footer elements of the theme)
  5. functions.php (contains functions that on in the WordPress theme)

We will go through each of that file one by one.

Confused between choosing the theme & plugins?

Step 4: Copy CSS, Images, and JavaScript (JS) Folders

From your HTML theme (downloaded above), copy over CSS, JS, and images folders to your new WordPress theme folder.

Step 5: Breakdown HTML into Header, Index, and Footer

Luckily, the theme I picked for this tutorial is well-coded. The header, footer, and main body are marked with HTML comments.

What we are going to do is copy over HTML <head> from index.html of downloaded theme into our header.php file that we have created in WordPress themes folder. Copy from <!DOCTYPE html> till </head>

Similarly, we are going to copy over footer and main body elements from index.html into footer.php and index.php respectively. Copy from <footer> till </html> into footer.php file.

We also need to add “content” and “body” code into the index.php. Copy from <body id=”page1″> till </section>, just before <!– footer –>

Add WordPress function get_header() at the top and get_footer() at the end of the index.php file.

get_header() is a built-in function that calls in header.php and similarly, get_footer() is a function that calls footer.php.

<?php get_header(); ?>

<?php get_footer(); ?>

To call in a footer, insert the following code at the end in index.php

Now, visit your WordPress admin dashboard. Navigate to Appearance > Theme and activate your newly created theme. Visit your site and you will see something like this.

Step 6: Configuring CSS

The fact that our theme looks weird is because the CSS files are not applied to the theme.

We have already copied over the CSS folder from HTML theme to our WordPress theme folder. Now, we need to call these CSS files in order to complete the look of the theme.

Keep in mind, names of your CSS files might differ. So double check before conducting this process.

One more thing, in the header.php file, we need to call in CSS stylesheet.

In the header.php, replace the following lines:

<link rel="stylesheet" href="css/reset.css" type="text/css" media="screen">

<link rel="stylesheet" href="css/style.css" type="text/css" media="screen">

<link rel="stylesheet" href="css/layout.css" type="text/css" media="screen">

With these ones:

<link rel="stylesheet" href="<?php echo get_template_directory_uri().'/css/layout.css'; ?>" type="text/css" media="screen">

<link rel="stylesheet" href="<?php echo get_template_directory_uri().'/css/reset.css'; ?>" type="text/css" media="screen">

<link rel="stylesheet" href="<?php echo get_template_directory_uri().'/css/style.css'; ?>" type="text/css" media="screen">

get_template_directory_uri() is used to get the current template directory path. It will concatenate the current path with the respective file.

Step 7: Configure JavaScript

The HTML theme that we are working with is using JavaScript. We can easily configure that too.

In the header.php file, JavaScript files are already being called. All we need to do is to play it safe and concatenate them with the current directory path. In Part 2, we will use wp_enqueue_script() WordPress built-in function to call in JS files to add more flexibility in future.

Your JavaScript final code in header.php should look like this.

<script src="<?php echo get_template_directory_uri().'/js/jquery-1.6.min.js'; ?>" type="text/javascript"></script>

<script src="<?php echo get_template_directory_uri().'/js/cufon-yui.js'; ?>" type="text/javascript"></script>

<script src="<?php echo get_template_directory_uri().'/js/cufon-replace.js'; ?>" type="text/javascript"></script>

<script src="<?php echo get_template_directory_uri().'/js/Open_Sans_400.font.js'; ?>" type="text/javascript"></script>

<script src="<?php echo get_template_directory_uri().'/js/Open_Sans_Light_300.font.js'; ?>" type="text/javascript"></script>

<script src="<?php echo get_template_directory_uri().'/js/Open_Sans_Semibold_600.font.js'; ?>" type="text/javascript"></script>

<script src="<?php echo get_template_directory_uri().'/js/tms-0.3.js'; ?>" type="text/javascript"></script>

<script src="<?php echo get_template_directory_uri().'/js/tms_presets.js'; ?>" type="text/javascript"></script>

<script src="<?php echo get_template_directory_uri().'/js/jquery.easing.1.3.js'; ?>" type="text/javascript"></script>

<script src="<?php echo get_template_directory_uri().'/js/FF-cash.js'; ?>" type="text/javascript"></script>

To give a path to images; add the following PHP code within src tags.

<img src="<?php echo get_template_directory_uri().'/img/tm.jpg';?>" alt="Image" >

Now, our theme will look similar to our HTML theme. But, it will lack WordPress features, such as changing site title, showing the latest blog posts on the homepage, and custom navigation menu.

Step 8: Enable Custom Title in WordPress

If we go into the WordPress admin panel and change the website’s title, then it will not have any effect on the title of the site. To enable this feature, we can use WordPress built-in function bloginfo() with parameter “name” between the title tags in the header.php file.

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

Now, our theme will pick up the title that we set in Settings -> General-> Site title inside WP-admin panel.

Step 9: Add Custom Navigation Menu in WordPress

First thing, when you will visit the WordPress admin of our site and navigate to Appearance, you will not see an option for Menu.

We need to enable Menu first by adding the following line of code in functions.php file.

<?php
add_theme_support( 'menus' );
?>

This will enable the Menu functionality in our theme, but we need to define where to show our custom menu.

To do this, we need to first find where our HTML theme navigation menu is and then replace it by using WordPress built-in function wp_nav_menu(); You can read more about this function here.

In our theme, our index.php contains the navigation menu. Find the following lines of code:

<li><a class="active" href="index.html">Home Page</a></li>

<li><a href="news.html">Our News</a></li>

<li><a href="services.html">Our Services</a></li>

<li><a href="products.html">Our Products</a></li>

<li class="last-item"><a href="contacts.html">Contact Us</a></li>

Replace above lines with:

<?php wp_nav_menu( array( 'sort_column' => 'menu_order', 'container_class' => 'menu-header' ) ); ?>

Our custom menu will now show up on our theme and add flexibility to our WordPress business theme.

Step 10: Adding the latest posts to display on the homepage

Most of you might have seen WordPress powered sites usually showing the latest posts on the homepage.

The theme we are working with has a section under Recent News. We can use it to display our latest WordPress blog posts.

To do this, we need to first locate static HTML code to display the posts. You will find it in index.php under Recent News.

The static HTML is:

<time class="tdate-1 fleft" datetime="2011-05-29"><strong>29</strong>may</time>

<div class="extra-wrap">

<h5>Utatse eudui pretium</h5>

sodales proin fermen<br>

tum condimentum eros quis tincidunt fraesent eleifend tempor nisi, in adipiscing... <a href="#">more</a> </div>

</div>

<div class="wrapper">

<time class="tdate-1 fleft" datetime="2011-05-24"><strong>24</strong>may</time>

<div class="extra-wrap">

<h5>Felis molestie vitae</h5>

Sed massa justo pellen<br>

tesque turpis lorem, ornare sit amet vulpate at, consectetur vitae nunc... <a href="#">more</a> </div>

Replace the entire code with:

<ul>

<?php $the_query = new WP_Query( 'showposts=2' ); ?>

<?php while ($the_query -> have_posts()) : $the_query -> the_post(); ?>

<li><a href="<?php the_permalink() ?>"><?php the_title(); ?></a></li>

<li><?php echo substr(strip_tags($post->post_content), 0, 100);?></li>

<?php endwhile;?>

</ul>

WP_query(); is a WordPress class that is used to call in details of WordPress posts and pages. We can use the above loop to display the latest blog posts under the Recent News section.

The quick explanation of functions used in the above code:

    • the_permalink() calls in URL of the blog post
    • the_title() calls in the title of the post

What's Your Reaction?

like
0
dislike
0
love
0
funny
0
angry
0
sad
0
wow
1