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.

CloudwaysCDN — a powerful solution that offers superior performance and satisfied global audience for your business. Read More

How to Create WordPress Business Theme from HTML

Updated on  7th February

9 Min Read
html to wordpress
Reading Time: 9 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.

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

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 Theme 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 and install a WordPress site 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.

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:

With these ones:

get_template_directory_uri() is used to get the current template directory path. It will concatenate 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.

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

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.

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.

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:

Replace above lines with:

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:

Replace the entire code with:

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

Our Clients Love us because we never compromise on these

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

THERE’S MORE TO READ.