7 days of unlimited WordPress themes, plugins & graphics - for free!* Unlimited asset downloads! Start 7-Day Free Trial
Advertisement
  1. Web Design
  2. WordPress

How to Convert HTML to a WordPress Template

Scroll to top
Read Time: 10 mins

User-friendly systems such as WordPress have completely revolutionized the way we create online content. Now, it’s possible to build a high-performing, professionally designed website without having to write a single line of code. However, this wasn’t always the case!

Before systems such as WordPress, it was pretty standard to create a website using HTML, with some JavaScript and CSS thrown in. If you own an HTML website, then you may be considering making the switch to WordPress.

The good news is that you don’t have to start from scratch. It is possible to convert your outdated HTML code into a modern WordPress website. In this post, we’ll cover two different methods.

What We'll Be Covering

Firstly, I’ll show you how to create a blank theme and then paste each piece of HTML into the appropriate WordPress theme file. Although it's not essential, some basic CSS and HTML knowledge can make this process easier. 

I’ll then share a less technical approach, which involves finding a parent theme that closely resembles your HTML website. You can then create a child theme, and use this to recreate your HTML site’s look and feel.

Regardless of which method you choose, by the end of this article you’ll have made the leap from time-consuming coding to a user-friendly Content Management System (CMS).

Step 1: Create a Local Theme Folder

To start, you'll need to create a local folder where you’ll store all of your theme files. We’ll be working in this directory throughout this tutorial, so it makes sense to place it within easy reach, for example on your desktop. Eventually, we’ll be uploading this folder to your website, so assign it a descriptive name.

Inside this directory, create the following files:

  • style.css. This is the file where you’ll create all the rules that'll define your new WordPress site’s design and layout.
  • index.php. This file is a fallback, which WordPress will only use when there isn’t a more appropriate temple available. Some theme developers use index.php as a way to provide a generic template, which is suitable for displaying any content.
  • header.php. This defines the content that will be displayed as part of your site's header, such as its title and description.
  • footer.php. This defines the contents of your site’s footer, which appears below the main content area.
  • sidebar.php. This is the content that'll be displayed in your website’s sidebar, which is the vertical column that features prominently in many WordPress websites.

At the moment, you can leave all of these files blank. We’ll be populating them in the next few steps.

Step 2: Copy Your Existing CSS Into Your WordPress Stylesheet

Assuming that you want to retain your original web design, you’ll need to copy your current CSS across to WordPress. You can add this code to the style.css file that you created in the previous step.

To start, open the style.css file and add the following, being sure to replace the values with your own information:

You can now paste your HTML site’s CSS into the bottom of this file. Then, save your changes and close the style.css file.

Step 3: Separate Your HTML

Each file we create in this tutorial is designed to tell WordPress what content to display and where. To achieve this, you’ll need to divide your site’s existing HTML and paste it into the various files we created earlier. 

To start, open your HTML site’s index.html file. We’ll need to copy specific sections of index.html, and paste them into your local theme files: 

  1. Copy everything from the top of the index.php file, right down to the opening div class="main" tag.
  2. Open the header.php file on your local computer, and paste the copied text into this file. Save your changes, and close the header.php file.
  3. Now, switch back to your website’s index.html file. This time, copy the aside class="sidebar" element.
  4. On your local computer, open the sidebar.php file.
  5. Paste the copied text into the sidebar.php file. Save your changes, and then close sidebar.php.
  6. In your index.php file, copy everything after your sidebar.
  7. Open the local footer.php file, and paste the copied text into this file. Save your changes, and then close footer.php.
  8. In your index.html file, copy the main content section. Basically, this is everything that’s left over!
  9. Paste all of this text into your local index.php file.
  10. Finally, we need to make sure index.php can interact with all of the other files that will make up your new WordPress website. At the very top of your local index.php file, add the following PHP:

11. At the very bottom of the index.php file, add the following:

You can now save your changes, but don’t close the index.html file just yet! We still have one more piece of code to add.

Step 4: Create Your Loop

The Loop is the primary PHP code that WordPress uses to display your content to visitors.

In your local index.php file, add the following code within the content section:

Now, you can safely save and close the index.php file. Your theme is now finished, and you’re ready to upload it to your WordPress website.

Step 5: Upload Your Theme

To start, connect to your WordPress website using a File Transfer Protocol (FTP) client. I’m using FileZilla, although the steps should be largely the same for most FTP clients.

In the client, navigate to your site’s /wp-content/themes folder.

The FileZilla FTP client.The FileZilla FTP client.The FileZilla FTP client.

Next, drag and drop your local theme folder into the /wp-content/themes directory. FileZilla will now upload this theme to your WordPress website.

Converting HTML to a WordPress template, using FileZilla.Converting HTML to a WordPress template, using FileZilla.Converting HTML to a WordPress template, using FileZilla.

Your final task is activating your custom theme. In the WordPress dashboard, navigate to Appearance > Themes.

The WordPress Theme dashboard.The WordPress Theme dashboard.The WordPress Theme dashboard.

You can now activate your theme. Congratulations—you’ve just converted your static HTML website into a dynamic WordPress site. You can now start populating your new WordPress site with your old site's content.

Create a Child Theme

Alternatively, you can convert your HTML site to WordPress by creating a child theme. This approach gives you more freedom to customize your new site’s design to closely match your old HTML website. It also doesn’t require as much technical knowledge as the previous method.

To start, you’ll need to choose a theme that will serve as your parent. Your child theme will inherit its core functionality and style from the parent theme. To make your life easier, it helps to choose a parent that closely resembles the WordPress website that you want to create.

After installing and activating your chosen parent theme, connect to your site using an FTP client such as FileZilla. Then, navigate to your site’s wp-content/themes directory.

You can now right-click anywhere inside this directory, and select Create directory.

Creating a new directory via an FTP client. Creating a new directory via an FTP client. Creating a new directory via an FTP client.

When prompted, give this folder the same name as your parent theme, but with -child added to the end. For example, if you’re using twentytwentyone as your parent theme, then you’ll name this directory twentytwentyone-child.

A child theme, in a File Transfer Protocol (FTP) client.A child theme, in a File Transfer Protocol (FTP) client.A child theme, in a File Transfer Protocol (FTP) client.

Next, open this directory and create a style.css file. This child theme needs to pull all of its functions and styles from the parent. To establish this relationship, add the following to your style.css file:

Make sure you update the above code with your own information. In particular, ensure Template references the exact name of your parent theme directory. This is how WordPress identifies your parent theme, so it’s vital that there are no discrepancies between these names.

If you’re unsure, then you can double-check the name of the parent directory, by navigating to wp-content/themes in your FTP client.

After adding all of this code, save your changes and then close the style.css file.

The next step is telling WordPress that your child theme is dependent on the parent theme’s CSS. In your FTP client, open your child theme’s directory and create a functions.php file. In this file, you’ll define your theme’s dependencies and hierarchy, using the wp_enqueue_style() PHP call.

Ideally, the parent theme will load both the parent and child’s stylesheets simultaneously. Unfortunately, not all themes are coded with multi-tasking in mind. To find out exactly what’s happening with your particular theme, open the parent theme’s folder in your FTP client. Then, open the functions.php file and locate the wp_enqueue_style() call.

An example functions.php file.An example functions.php file.An example functions.php file.

If the theme is loading its style using a function starting with get_stylesheet, then your child theme will need to load both the parent and child stylesheets. For example, in the above TwentyTwentyOne snippet, we can see that the theme is using get_stylesheet_directory(), so we’ll need to load both of these stylesheets.

When writing this piece of code, it’s vital that you use the same handle as the parent theme. This handle is the first parameter of the wp_enqueue_style() call. In our TwentyTwentyOne example, we can see that this is twenty-twenty-one style.

The WordPress wp_enqueue_style() call.The WordPress wp_enqueue_style() call.The WordPress wp_enqueue_style() call.

Now that you have all of this information, switch back to your child theme’s functions.php file. You can then add the following, being sure to replace twenty-twenty-one-style with the parameter of your chosen parent theme.

As I previously mentioned, not all parent themes load stylesheets in the same way. If your parent theme loads its style using a function starting with get_template, then you’ll need to load the child style only. This means adding the following to your child theme’s functions.php file:

As before, make sure you replace parenthandle with your parent theme’s parameter.

This is all you need to create a basic child theme! You can now continue to work on this theme to ensure it closely matches the design of your previous HTML website.

When you’re happy with the results, save your changes and close all of the child theme’s files. You can then switch to your WordPress dashboard and navigate to Appearance > Themes. Your child theme should be waiting for you, and you can activate it just like any other WordPress theme.

With this step complete, you’re now ready to start the task of copying your HTML into your new WordPress website.

Conclusion

In this post, I covered two different ways to convert an HTML website into a WordPress template. If you’ve been following along, then you can now create, edit, and delete your webpages via WordPress's user-friendly dashboard, rather than having to write HTML code.

WordPress is designed to be an intuitive and beginner-friendly platform. However, you may still benefit from some expert advice! Why not check out some of our other WordPress tutorials for more tips, tricks, and best practices? 

Advertisement
Did you find this post useful?
Want a weekly email summary?
Subscribe below and we’ll send you a weekly email summary of all new Web Design tutorials. Never miss out on learning about the next big thing.
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.