Chat with us, powered by LiveChat

This website uses cookies

Our website, platform and/or any sub domains use cookies to understand how you use our services, and to improve both your experience and our marketing relevance.

Faster WordPress Hosting: An Experiment for the Best Load Time (79ms). SEE HOW

How to Convert Html Website into WordPress Business Theme

Updated on February 7, 2018

7 Min Read
how to convert html to wordpress
Reading Time: 7 minutes

This is the first of a three-part tutorial series.

Part 2: How To Create A WordPress Blog For Business

Part 3: How To Add Custom Widget Area And Theme Customizer API On Your WP Theme

There are many businesses who are still relying on simple HTML websites for their online presence. These HTML websites are usually static in nature. This means that even changing a minor detail on the website is done by editing a coding file to avoid this you can convert website HTML to WordPress.

In this tutorial, I am going to teach how to convert HTML to WordPress business theme. This keeps all the HTML elements intact but also gives you the flexibility of WordPress to customize any element.

If you are good with HTML and WordPress, then this tutorial is good for you. If you are a newbie, try doing this with a dummy website.

In Part 1, we are going to finalize homepage elements.

  • Converting HTML Website to WordPress
  • Which WordPress files you need
  • Configuring CSS, JavaScript, and Images
  • Adding WordPress functions to add functionality

So, let’s start by following below 10 steps.

Breaking HTML Business Theme to WordPress Files

For this tutorial, I have picked up a free HTML business theme from here. 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 Cloudways 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.

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 footer, insert 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 on 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 latest blog posts on the homepage, and custom navigation menu.

Step 8: Enable Custom Title in WordPress

If we go into 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 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 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 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 latest posts to display on 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 latest blog posts under 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 title of the post
  • have_posts() will check for latest blog posts

We will conclude Part 1 here. We have a flexible WordPress powered business theme now that was first a simple static HTML business theme.

In Part 2, we will make more files to display blog posts keeping the theme intact. We will add widget areas, and theme support to change the logo, slider images, and much more to make our WordPress business theme truly flexible.

Share your opinion in the comment section. COMMENT NOW

Ahsan Parwez

Ahsan is the Community Team Manager at Cloudways - A Managed Cloud Hosting Platform. He loves to solve problems and help Cloudways' clients in any aspect he can. In his free time, you can find him playing RTS PC games.

Start Growing with Cloudways Today!

We never compromise on performance, security, and support.

Get Our Newsletter
Be the first to get the latest updates and tutorials.

Do you like what you read?

Get the Latest Updates

Share Your Feedback

Please insert Content

Thank you for your feedback!

THERE’S MORE TO READ.