How to Convert HTML to WordPress

Ready to upgrade your HTML site to WordPress? This tutorial walks you through each step, making the switch to WordPress simple and hassle-free.
calendar_today
Published: December 4, 2023
Technical Writer
AI Tools For WordPress Creators
Code, learn, troubleshoot, and secure WordPress sites with the CodeWP platform and our custom AI.
Start for Free
Contents

So, you've got this static HTML site that's been working really well. But now, you're thinking about switching to WordPress for more flexibility and features. 

The question is, where do we even begin?

If you have some experience with WordPress, PHP, and HTML, then the transition should be easy.

In this tutorial, we’ll walk you through exactly how to do that without losing your site's original style and layout. By the end, you'll have a WordPress site that's not just easy to manage but also refreshes and boosts your brand.

Prerequisites

Make sure you already have WordPress installed on your local machine or preferred hosting provider.

Installing WordPress is a straightforward process and should only take you a few minutes. However, you might find this a daunting task if you’re totally new to WordPress. But no worries, there are several tutorials available online to help you out.

Several hosting providers offer automatic WordPress installation. That means you only need to set this up on your hosting’s control panel. For instance, you can follow this tutorial on how to install WordPress on Bluehost.

You can also have WordPress directly installed on your computer. This setup is perfect if you just want to play around with the CMS software. 

There are several localhost services you can use to install WordPress. Here are some of the popular options (click each link below to learn how to install WordPress locally):

  • WAMP (best for Windows)
  • MAMP (best for macOS)
  • LAMP (best for Linux)
  • XAMPP (best for Windows, macOS, or Linux) 

Steps to Convert Your HTML Site to WordPress

For this tutorial, we’re going to use WAMP to access our WordPress site locally. We’ll also use VS Code to edit our theme. Feel free to use any localhost services or code editors based on your preferences.

Then, follow the steps below:

1) Create a New Theme Folder

First, you need to access the core files of your WordPress site. You can find this on your hosting provider’s file manager. 

If you’re using a WAMP server, simply open the folder where you’ve installed your WordPress. The default location is C:\wamp64\www\your-website

Then, go to wp-content > themes and add a new folder. We’re going to name this folder ‘my-theme.’

WordPress theme folder

2) Create CSS and PHP Files

Next, we’re going to add the following files to our new theme folder (use your code editor to add these files):

  • style.css
  • index.php
  • header.php
  • footer.php
  • functions.php

Later, we’ll add codes to these files. For now, leave them open in your editor.

WordPress theme files

3) Copy the Assets Folder

The assets folder typically contains the images, font styles, logo, CSS, and JavaScript files of your chosen theme.

For this example, we’ve downloaded a free template from Free CSS. Here’s an overview of what our template looks like:

Now, we’re going to extract the file, copy the assets folder, and paste it inside our ‘my-theme’ folder.

Your theme folder should now look like this:

WordPress theme folder

4) Copy the Header, Body, and Footer Codes

Open the index.html file of your theme in the code editor. 

The index.html file generally contains the HTML code of a website’s homepage. This includes the header, the main content body, and the footer. What we’re going to do is transfer each block of code to our PHP files.

First, we’ll need to copy the header code. On the index.html file, highlight the code starting from <!DOCTYPE html> to </header> and copy it. 

Note: Do not confuse the <head> tag with the <header> tag. These two elements are not the same.

Then, open the header.php file we’ve previously created and paste the code here.

WordPress header code

Next, copy the block of codes right after the </header> tag up to the line before the <footer>. This is your homepage’s main content. Open the index.php file in your theme folder and paste the code here.

WordPress index file

Finally, copy your site’s footer, starting from the <footer> tag up to the </html> tag. Paste this code into your footer.php file.

WordPress footer file

5) Add WordPress Functions

In WordPress, every part of a page is broken into separate files for better organization and reusability. So, instead of writing the same header and footer HTML codes in every template file, you’ll only need to write it once in the header.php and footer.php files. 

Then, you simply call these files when needed. To do that, we’ll be adding the get_header() and get_footer() functions to the index.php file.

To add the header to our homepage, we’ll need to copy this code on top of the index.php code:

PHP
<?php get_header(); ?>
WordPress getheader()

Then, we’ll add the footer by copying this code at the end of the index.php file:

PHP
<?php get_footer(); ?>

Your index.php file should now look like this:

WordPress getfooter()

6) Add the CSS Stylesheet

Next, we're going to add the CSS codes to apply the style of our chosen theme on WordPress.

First, we’ll need to add the following information to our style.css file:

Markdown
/*

Theme Name: My WordPress Theme

Author: Christy

Description: This code converts HTML to WordPress.

Version: 1.0

*/

Note: Make sure to replace the theme name and author.

Now, we’ll need to add an image to represent our new theme on the WordPress installation area. This image should be 800x600 pixels and in PNG format. Name the image screenshot.png and add it inside the theme folder, as shown here:

WordPress screenshot.png

Log in to your WordPress dashboard and go to Appearance > Themes. You should see the new theme added here. 

WordPress theme installation

Click it to view the theme information.

activate WordPress theme

When you click the ‘activate’ button and check your homepage on the browser, you should only see plain texts and links. To apply the style, we need to copy the CSS codes of our theme. 

WordPress front-end with no CSS

Once again, open the index.html file of your theme. Look for the rel="stylesheet" enclosed within the <link> tab. 

WordPress CSS files

In HTML, this attribute is used to link the CSS files (you should see these files inside your ‘asset’ folder).

However, WordPress doesn’t understand this structure. We need to enqueue the stylesheets by adding these codes to the functions.php file:

PHP
<?php

function add_css() {

    wp_enqueue_style('favicon', get_theme_file_uri('/assets/logo/favicon.png'));

    wp_enqueue_style('font-awesome', get_theme_file_uri('/assets/css/font-awesome.min.css'));

    wp_enqueue_style('linear-icons', get_theme_file_uri('/assets/css/linearicons.css'));

    wp_enqueue_style('animate', get_theme_file_uri('/assets/css/animate.css'));

    wp_enqueue_style('flaticon', get_theme_file_uri('/assets/css/flaticon.css'));

    wp_enqueue_style('slick', get_theme_file_uri('/assets/css/slick.css'));

    wp_enqueue_style('slick-theme', get_theme_file_uri('/assets/css/slick-theme.css'));

    wp_enqueue_style('bootstrap', get_theme_file_uri('/assets/css/bootstrap.min.css'));

    wp_enqueue_style('bootsnav', get_theme_file_uri('/assets/css/bootsnav.css'));

    wp_enqueue_style('theme-style', get_theme_file_uri('/assets/css/style.css'));

    wp_enqueue_style('theme-style-responsive', get_theme_file_uri('/assets/css/responsive.css'));

}

add_action('wp_enqueue_scripts', 'add_css');

In the codes above, we’ve created a function called add_css() (you can name this in any way you want). Inside the function, we’ve used the wp_enqueue_style() to enqueue each of our stylesheets, as shown above.

The get_theme_file_uri() function is used to retrieve the path of our CSS files within the theme directory. This function is useful because it automatically handles the correct URL path of our files, regardless of where the WordPress installation is located.

Now, once you’ve enqueued all your CSS files, you can delete them from the header.php. Then, add this code just before the </head> line:

PHP
<?php wp_head(); ?>

When you open your homepage on the browser, you should now see the theme style applied.

7) Update the Paths of Image Files

After adding your CSS files, you’ll notice that it doesn’t look complete. That’s because we haven’t updated the path of the images.

WordPress theme without images

First, open the file containing the codes of your homepage (index.php) and look for the <img> tags. These tags contain the src attribute which points to the folder location of the images.

HTML image tags

Instead of just adding the file path, we’ll need to use the get_template_directory_uri() function to ensure we’re getting the correct file path, regardless of the location of your WordPress theme installation.

Make sure to enclose the function within PHP tags and echo the correct path. Do this to all your images. Example:

JavaScript
<img src="<?php echo get_template_directory_uri(). '/assets/images/explore/e1.jpg" alt="explore image'; " ?>

Save the changes. You should now be able to see all the images on your homepage.

WordPress theme with images

8) Add the JavaScript Files

The JavaScript files add interactive and dynamic features to our WordPress website. This can include sliders, pop-up forms, AJAX-based loading of content, and many others.

Open the index.html file and look for the attributes enclosed within the <script> tag. These are your JavaScript files.

WordPress script files

Just like CSS, we need to enqueue the script files to our functions.php file. But instead of wp_enqueue_style(), we’ll be using the wp_enqueue_script() function, as shown below:

PHP
function add_script() {

    wp_enqueue_script('main-js', get_theme_file_uri('/assets/js/jquery.js'), array('jquery'), '1.0', true);

    wp_enqueue_script('modernizr', 'https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.js', array('jquery'), '1.0', true);

    wp_enqueue_script('bootstrap', get_theme_file_uri('/assets/js/bootstrap.min.js'), array('jquery'), '1.0', true);

    wp_enqueue_script('feather', get_theme_file_uri('/assets/js/feather.min.js'), array('jquery'), '1.0', true);

    wp_enqueue_script('counter-js', get_theme_file_uri('/assets/js/jquery.counterup.min.js'), array('jquery'), '1.0', true);

    wp_enqueue_script('waypoints', get_theme_file_uri('/assets/js/waypoints.min.js'), array('jquery'), '1.0', true);

    wp_enqueue_script('slick', get_theme_file_uri('/assets/js/slick.min.js'), array('jquery'), '1.0', true);

    wp_enqueue_script('ajax', 'https://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.4.1/jquery.easing.min.js', array('jquery'), '1.0', true);

    wp_enqueue_script('custom-js', get_theme_file_uri('/assets/js/custom.js'), array('jquery'), '1.0', true);

}

add_action('wp_enqueue_scripts', 'add_script');
add script files to WordPress functions.php

Once you’ve added these codes, you can delete the JavaScript links from the footer.php. Then, paste this code just before the </body> tag:

PHP
<?php wp_footer(); ?>
add JavaScript files to WordPress footer.php

Finally, save the changes and check your site’s front-end.

Here’s the final look at our homepage:

Wrapping It Up

You’ve just converted your simple HTML site into a WordPress theme!

Now that your site is up and running on WordPress, you can further customize it by adding plugins. 

WordPress has an extensive ecosystem of plugins for virtually every need. Whether your goal is to optimize SEO, strengthen security, or elevate the overall user experience, there's a plugin available just for that purpose. 

But if you’re up for the challenge, consider adding custom codes to tweak your website. CodeWP can help you with that. This AI-powered tool is trained specifically for WordPress development and can generate code snippets quickly and efficiently.

So, what's next for your WordPress site? Plugins, custom codes, or a bit of both? Let us know in the comments!

About The Author
Christy Cañete
Technical Writer
More By Christy Cañete
Christy is a front-end developer and technical writer with expertise in JavaScript, React, Node.js and other web technologies. As a writer for CodeWP, she breaks down complex AI and WordPress concepts into easy-to-understand tutorials so anyone can leverage the platform's advanced capabilities. Christy's experience spanning web development, IoT, and embedded systems enables her to clearly explain technical topics to empower WordPress creators of all levels. Her passion is making the latest innovations accessible through beginner-friendly writing.
More
Tags
HTML UI/UX WordPress

More Reading

Make WordPress Easy With AI
© WPAI, Inc. 2024 | d.b.a CodeWP