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.

How to Convert HTML Website into WordPress Business Theme

June 16, 2021

11 Min Read
html to wordpress

Many businesses still rely on simple HTML websites for their online presence. These HTML websites are usually static, meaning that you’ll need to edit the code to change even a minor detail on the website. To avoid that, though, you can convert your HTML website to WordPress.

In this tutorial, I’ll teach you how to convert HTML to a WordPress business theme. This keeps all the HTML elements intact and gives you the flexibility of WordPress to customize any element easily.

If you are familiar with both HTML and WordPress, then this tutorial is good for you. If you are a newbie, try doing this with a dummy website on your localhost like XAMPP.

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

Converting HTML Site to WordPress Theme

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, just drop a comment or an email, and I will be happy to respond.

Let’s move on. First, take a look at your HTML theme and markdown the header, main body, and footer elements.

Header: The header will include the top section part.

header

Main Body: It’s a long page, so I zoomed out to take a screenshot, but the whole center part is included in the main body.

main body

Footer: The footer section will include the bottom part.

footer

Step 1: Prerequisites

I hope you already have WordPress installed on your localhost like XAMPP (i.e., your computer). If not, we have already covered a detailed guide to help you install and set up WordPress locally.

Step 2: Create Your Theme Folder

For this tutorial, I’m using XAMPP, and my WordPress site is installed under the htdocs folder. To create a WordPress theme, you need to access your themes folder and create a new folder.
Now, open XAMPP folder > htdocs > WordPress folder (in my case it’s testing) > wp-content > themes.

In the Themes folder, you will see all your installed WordPress themes. Create a new folder and name your theme.

create theme folder

Step 3: Create PHP Files

The newly created theme folder is empty, and you need to create some files to make it functional. For this, you need to launch your code editor (VS Code) and open the entire WordPress theme folder (in my case, farhan-wordpress-theme).

Now create the following essential WordPress files to organize your theme better.

  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)

wordpress files

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

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

html folders

After moving to your new WordPress theme folder, it will look like this:

wordpress folders and files

Step 5: Activate a New WordPress Theme

Now, you have added the important folders that are required for any wp theme. Next, open your WordPress site on your browser and log in to your Dashboard. Navigate to Appearance > Themes, and you will see your new theme has been added to this section.

activate wordpress theme

This theme looks empty. To add the information and banner for the newly created theme, open your style.css file (created earlier) and paste the following code and save it (ctrl+s).

/*

Theme Name: Farhan WordPress Theme

Author: Farhan

Description: Convert HTML to WordPress theme.

Version: 1.0

*/

For the banner, you need to add an image file to your new theme folder. The image size should be 800 by 600, and the image name should be Screenshot (png format).

adding scrrenshot png file

Once you added the screenshot.png file, refresh your wp-admin dashboard, and the image banner will appear.

wordpress theme image

Now, you can view the theme information when you click on the banner.

theme details

Next, simply click on Activate.

Step 6: Convert HTML Code into Header, Index, and Footer

The header, footer, and main body are marked with HTML comments to easily add it to your WordPress PHP files and convert the code.

Now copy the header code from the index.html of the downloaded theme into the header.php file you created in the WordPress themes folder. You need to copy from <!DOCTYPE html> till </header> and save it.

header php file

Similarly, Copy over the footer and main body elements from index.html into footer.php and index.php, respectively.

For the footer, copy from <footer> (in my case, there’s a class name defined in the footer tag, so don’t get confused) till </html> into the footer.php file and save it.

footer php file

Next, copy all the code after the </header> tag and just before the <footer> to index.php and save it.

index php file

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

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

Add the following code at the top of the index.php file and save it.

<?php get_header(); ?>

adding heard at the top of index file

To call in a footer, insert the following code at the end of the index.php code and save it.

<?php get_footer(); ?>

add footer at the bottom of index file

Now, visit your site, and you will see something like this.

site without css and js

Step 7: Configuring CSS

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

You have already copied over the CSS folder from the HTML theme to your WordPress theme folder. Now, you need to call these CSS files to complete the look of the theme.

Keep in mind that the names of your CSS files might differ — so double-check before conducting this process.

You will find your CSS stylesheets in the header.php file, so you need to search for “rel=”stylesheet” ” by CTRL+f.

css stylesheet in header file

After that, remove the Google font stylesheets because we don’t need them. Now, I just need to register the actual CSS stylesheet i.e. <link rel=”stylesheet” href=”assets/css/style-starter.css”>.

WordPress doesn’t understand the regular CSS stylesheet structure; that’s why I need to enqueue and register the CSS stylesheet. Go to the functions.php file and add the following code.

<?php

function add_css()

{

   wp_register_style('first', get_template_directory_uri() . '/assets/css/style-starter.css', false,'1.1','all');

   wp_enqueue_style( 'first');

}

add_action('wp_enqueue_scripts', 'add_css');

register css file

The  wp_register_style will help you register your CSS stylesheet.

The get_template_directory_uri() . ‘/href’ is used to get the current template directory path. It will concatenate the current path with the respective file. So here, you need to define the location of your CSS file (href). You can see how I defined the path of that CSS file: get_template_directory_uri() . ‘/assets/css/style-starter.css‘.

Now, we can remove the CSS stylesheet link from the header.php file and replace it with the following code and save the file.

<?php wp_head(); ?>

The wp_head() is an essential WordPress hook that is defined under the <head> </head> section of header.php.

wordpress header hook

When you visit your WordPress site, you will notice that the CSS files are actually enqueued to your new WordPress theme, but still, the design is not in order. It is because you haven’t configured the JS scripts yet.

after adding css file

In the header.php, I have one CSS stylesheet, and I registered it only in functions.php. But what if you have multiple stylesheets? In that case you need to define wp_register_style() for each stylesheet. Don’t worry! You can take an example from the next step, where I have multiple JS scripts. The process is the same so it will clear your queries and help you understand how you will do that job.

Step 8: Configure JavaScript

The HTML theme you are working with is using JavaScript, and in the footer.php file, JavaScript files are already being called in HTML format. To run these JS files, all you need to do is follow the same actions you performed in the previous step.

Open your footer.php file and search for “<script src=“ by “CTRL+f”. This will help you find all the JS files that you have. In my case, I have five, and here I need to register and enqueue all of them.

searching for js files

Next, you need to open your functions.php file and paste the following code:

function add_script()

{

   wp_register_script('js-script', get_template_directory_uri() . '/assets/js/jquery-3.3.1.min.js', array ( 'jquery' ), 1.1, true);

   wp_enqueue_script( 'js-script');

   wp_register_script('change', get_template_directory_uri() . '/assets/js/theme-change.js', array ( 'jquery' ), 1.1, true);

   wp_enqueue_script( 'change');

   wp_register_script('popup', get_template_directory_uri() . '/assets/js/jquery.magnific-popup.min.js', array ( 'jquery' ), 1.1, true);

   wp_enqueue_script( 'popup');

   wp_register_script('carousel', get_template_directory_uri() . '/assets/js/owl.carousel.js', array ( 'jquery' ), 1.1, true);

   wp_enqueue_script( 'carousel');

   wp_register_script('bootstrap', get_template_directory_uri() . '/assets/js/bootstrap.min.js', array ( 'jquery' ), 1.1, true);

   wp_enqueue_script( 'bootstrap');

}

add_action('wp_enqueue_scripts', 'add_script');

You can see that the code structure is the same as you did earlier in the CSS configuration part. But here, you will use wp_register_script instead of style. You register and enqueue each JS file in the same function.

enqueue js scripts

Now, you can remove all the JS script links (I have five) from the footer.php file, then paste the following line of code at the end of the code (above </body> tag) and save the file.

<?php wp_footer(); ?>

wordpress footer hook

Now, open your site on your browser, and you will notice that the new WordPress theme is working fine, but still, it has a few missing images.

theme after js and css

Step 9: Configure Images

This process is straightforward, and here, you need to define the path of the images.

First, open your index.php file and search for “<img src=” by “CTRL+f”. This will help you find all the image files that you have. In my case, I have eight, and here I need the path for all of them.

search image files

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

<img src="<?php echo get_template_directory_uri().'/assets/images/p1.jpg'; ?>" alt="" class="img-fluid radius-image" />

<img src="<?php echo get_template_directory_uri().'/assets/images/p2.jpg'; ?>" alt="" class="img-fluid radius-image" />

<img src="<?php echo get_template_directory_uri().'/assets/images/p3.jpg'; ?>" alt="" class="img-fluid radius-image" />

<img src="<?php echo get_template_directory_uri().'/assets/images/p4.jpg'; ?>" alt="" class="img-fluid radius-image" />

<img src="<?php echo get_template_directory_uri().'/assets/images/p5.jpg'; ?>" alt="" class="img-fluid radius-image" />

<img src="<?php echo get_template_directory_uri().'/assets/images/p6.jpg'; ?>" alt="" class="img-fluid radius-image" />

calling images in wordpress

Now, your theme will look similar to the HTML theme and fetch all the images.

wordpress image files

But, it will lack WordPress features, such as changing site title and WordPress navigation menu.

Step 10: Enable Custom Title in WordPress

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

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

wordpress title

And similarly, you need to use WordPress built-in function bloginfo() with the parameter “name” between the h1 tags in the header.php file and save the file.

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

h2 title

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

wordpress site title

Step 11: Add WordPress Navigation Menu in WordPress

When you visit the WordPress admin of your site and navigate to Appearance, you will not see an option for Menu.

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

add_theme_support( 'menus' );

add theme menus

This will enable the Menu functionality in your theme, but it needs some configuration to manage menus from your WP dashboard.

wordpress menu section

First, find where your HTML theme navigation menu is and then replace it using WordPress built-in function wp_nav_menu(); You can read more about this function here.

In this theme, the header.php contains the navigation menu.

Find the following lines of code:

<ul class="navbar-nav mx-lg-auto">

<li class="nav-item active">

<a class="nav-link" href="index.html">Home <span class="sr-only">(current)</span></a>

</li>

<li class="nav-item @@about__active">

<a class="nav-link" href="about.html">About</a>

</li>

<li class="nav-item @@contact__active">

<a class="nav-link" href="contact.html">Contact</a>

</li>

</ul>

wp menu code

Replace above lines with:

<?php wp_nav_menu( array( 'menu_class' => 'navbar-nav mx-lg-auto', 'container' => 'ul', )); ?>

Your WordPress menu will now show up on your theme and add flexibility to your WordPress business theme.

Wrapping Up!

I hope this article helped you understand how to convert an HTML template or site to a WordPress theme. This is a detailed tutorial where I’ve covered eleven steps to demonstrate the process.

If you have any questions and queries, feel free to ask anytime in the comment section below.

Q. Can I convert HTML to WordPress?

The process of converting HTML to WordPress involves the following steps:

1) Create a new folder for the theme
2) Copy the CSS code in the styles.css file
3) Separate the HTML code into header.php, sidebar.php, and footer.php files
4) Convert the header.php and footer.php files into the required WordPress format
5) Generate a screenshot (this will be used as a theme preview)
6) Zip the folder and upload it to the WordPress website

Q. How do you add HTML to WordPress?

To add HTML to a WordPress page or post, go to the page/post and add the HTML code to the text tab.

Q. How do I open an HTML file in WordPress?

You can open an HTML file by uploading the zipped HTML file(s) to the server and then open it in the server’s File Manager.

Q. Does WordPress use HTML?

WordPress extensively uses HTML to render and format information on various pages and posts.

Share your opinion in the comment section. COMMENT NOW

Share This Article

Customer Review at

“Beautifully optimized hosting for WordPress and Magento”

Arda Burak [Agency Owner]

Farhan Ayub

Farhan is a community manager at Cloudways. He loves to work with WordPress and has a passion for web development. Mostly, he spends his time interacting with the people in the WordPress community. Apart from his work life, Farhan spends his time gaming and playing sports. Feel free to contact him at [email protected]

×

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

Thankyou for Subscribing Us!

×

Webinar: How to Get 100% Scores on Core Web Vitals

Join Joe Williams & Aleksandar Savkovic on 29th of March, 2021.

Do you like what you read?

Get the Latest Updates

Share Your Feedback

Please insert Content

Thank you for your feedback!

Do you like what you read?

Get the Latest Updates

Share Your Feedback

Please insert Content

Thank you for your feedback!