Convert Your HTML Website to a WordPress One

The world is rapidly moving towards automation, but many businesses still rely on simple HTML-based websites. Most of these websites are static, which means you will have to edit the code to make minor changes. To solve this complication, you can convert your HTML website to WordPress.

While it is entirely okay to have an HTML-based website as the latest version of HTML is compelling and allows you to build quality websites without using a content management system (CMS).

Nevertheless, the increasing market share of WordPress shows that more and more people are switching because WordPress provides an easy interface to manage websites and offers plenty of plugins and themes to enhance the website and add valuable features.

If you are an HTML website owner, you are considering switching to WordPress. Then this article guide you to convert Static HTML to WordPress.

What We’ll Be Covering

This tutorial will guide you to convert an HTML website to WordPress. It also covers the essential files you need to work with WordPress, the configuration of images, and CSS.

By the end of this article, you will have jumped from time-consuming coding to a user-friendly content management system (CMS) WordPress.

Prerequisite

If you have a good understanding of HTML and WordPress, you can start converting your website, but if you are a newbie, I suggest you try it with any other website on your WordPress-installed localhost like XAMPP.

For this tutorial, I’m going to use the HTML theme from here and then convert it into a WordPress website, but the techniques remain the same for any of your websites.

Creating a WordPress Theme From a Static HTML

Let’s start this tutorial by sharing the code of the HTML site and what the output of this code looks like. The below image contains an index.html file, CSS files, images, and Font.

Basically, WordPress is written in PHP, so we have to convert all the below HTML files into PHP files to make them WordPress theme friendly.

The output of the above code looks like this:-

1. Create A Theme Folder And Basic Files

First, you must create a new theme folder by giving it whatever name you want. We’re using the wp_theme folder name for this tutorial, and then you have to open this folder with your favorite code editor. For reference, we’re using VSCode.

After opening the folder into VScode, create the following files with the same name as below:-

style.css
Index.php (serves as the main file)
header.php
sidebar.php
footer.php

The above files use PHP extensions except for the style.css because we have to convert our HTML files into these PHP files.

The style.css file will contain all the CSS rules to design the website layout. The other four files will include a small part of the index.HTML file.

2. Separate Your HTML

Above, we have created several PHP files, and for this part, we’re going to separate index.html into these PHP files. WordPress usually utilizes PHP to pull information from its database so the CMS can put them together.

While separating the HTML file sounds complicated but it s not because all you have to do is copy and paste the parts of your HTML documents into several PHP Files. To show this, we have put an image of a single HTML document.

You can see the long HTML markup in the index.html file on the right side.

Header.php

As the name says, that header.php file contains your code’s <head> section. Also, it will include the body part with the header and the website’s main content.

Open the index.html file and copy the header content of the website by finding the header HTML tag or the container with the header class name of the ID name, and the same goes with the main content copy the content by finding the main class name or ID name.

After pasting the header and main content into the header.php, right before the closing </head> HTML element, copy and paste the below code.

<?php wp_head();?>

The above code guarantees that WordPress plugins work properly and, after finishing, save the file.

sidebar.php

Everything belonging to the <aside> section or the div container with the sidebar class name or ID name goes into the sidebar.php file.

Coincidentally we don’t have any markup related to this, so we’ll leave this empty. If you have the markup related to the sidebar, don’t forget to add it to the sidebar.php file, and after finishing, always remember to save the file.

footer.php

After finishing both files above, all the left code related to footer information goes to the footer.php file. After pasting all the content from the index.html to footer.php, add the below code at the end of the footer.php file.

<?php wp_footer();?>

The above code guarantees that WordPress plugins work properly and, after finishing, save the file.

3. Copy CSS Code and Images

Before we move on to the index.php file and finish the main work, you need to copy all the CSS code and images from the HTML site folder into our wp_theme folder.

In our case, we have a main CSS style file known as style.css, and other than that, several small CSS files include code for small components for ease of management.

Additionally, we have an image and font folder containing several images and fonts. Copy all the into wp_theme.

The essential part is copying all the style.css code from the old HTML website to the new style.css file.

/*
Theme Name: p_theme
Author: Mahesh
Author URI: https://example.com/
Description: A portfolio theme, from static HTML to WordPress
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
*

The above code provides information that it’s a theme stylesheet header to WordPress, and you can edit the details such as author-theme name and description, etc.

The above image shows the style.css file, and on the left side, you can see the CSS folder for other CSS files and the image and font folder.

Before we move forward with the index.php file, I told you not to close the header.php file because we have to update the link tag used to add the CSS style file.

<link rel="stylesheet" href="style.css">

Replace your general link element with the:-

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

In our case, we have several CSS files, and we will add all the files with the above code of line by replacing the path and file name in place of style.css.

Regarding the images, you just have to add a single line of code inside the img src attribute. Like the below code:-

<img src="<?php echo get_template_directory_uri().'/images/2.jpg'; ?>" class="img-responsive" alt="" />

Basically, you can copy the above code line and replace the image path and class name according to your markup, but updating all the image elements of all files is necessary.

4. Complete your Index.php File

Not that you’ve separated all the files, added the CSS code, and linked to the header file, but you now need to make sure they intercommunicate with each other. You’re practically done with your HTML to WordPress conversion when this is done.

index.php should be empty at the moment. So, first, copy and paste these lines of code:

<?php get_header(); ?>

<?php get_sidebar(); ?>
<?php get_footer(); ?>

The space between the call of the header and the sidebar is intentionally omitted because that’s where you’ll add the Loop.

This is an essential aspect of adding dynamic content to your WordPress site.

Copy and paste the below code between the header and sidebar call and save the file.

<?php while ( have_posts() ) : the_post(); ?>
  <article class="<?php post_class(); ?>" id="post-<?php the_ID(); ?>">
	<h2 class="entry-title"><?php the_title(); ?></h2>
	<?php if ( !is_page() ):?>
  	<section class="entry-meta">
  	<p>Posted on <?php the_date();?> by <?php the_author();?></p>
  	</section>
	<?php endif; ?>
	<section class="entry-content">
  	<?php the_content(); ?>
	</section>
	<section class="entry-meta"><?php if ( count( get_the_category() ) ) : ?>
  	<span class="category-links">
    	Posted under: <?php echo get_the_category_list( ', ' ); ?>
  	</span>
	<?php endif; ?></section>
  </article>
<?php endwhile; ?>

You have successfully converted HTML Website to a WordPress theme. Now, you can upload it to your WordPress dashboard.

5. Upload your new theme

After creating the theme, you can upload it to WordPress. All files inside your theme folder must be in the same place. Before uploading to WordPress, you must compress the entire theme folder into a zip file.Open the WordPress admin dashboard, click on Appearances -> Themes, and then click on upload themes inside the add new.

Select your theme zip file and click on install now.

The image below demonstrates our theme’s final look after uploading it to the WordPress themes.

Conclusion

I hope this article helps ease the process. Moving from a static HTML site to a more efficient CMS with demonstrated functionality like the WordPress platform is good.

If you utilized this post as a guide for migrating your website to WordPress, you have joined one of the biggest open-source communities in the world.

24*7 Tracking

We don’t want to keep you in the dark; in fact, we are committed to developing a long term relationship with our clients. We deliver regular updates so that you can keep a track of the progress throughout your Ecommerce Web Design project.

Hire Delphin Technologies for Your WordPress Development Project!