How to Convert Any HTML5 Template Into an Awesome WordPress Theme

What do you do when you can’t find the perfect WordPress theme? In all likelihood, you probably turn to a theme framework. However, every once in a while, you probably have this thought flit across your mind: “I should just code an HTML5 template and convert it into a WordPress theme.”

But that’s just a pipe dream right? Let’s be realistic.

The truth is, as long as you have some basic WordPress programming skills, converting an HTML5 template into a WordPress theme is within reach — provided you’re willing to put in the effort. In this post, I’ll show you how.

Continue reading, or jump ahead using these links:

• Why Convert an HTML Template Into a WordPress Theme?
• Setting Up Your Development Environment
  • Step 1: Find a Template or Build Your Own
  • Step 2: Turn the HTML5 Template into a WordPress Theme
  • Step 3: Properly Enqueue Scripts and Styles
  • Step 4: Create Template Partials
  • Step 4: Add the Loop
  • Step 5: Replace Template File Content with WordPress Functions
• Next Steps

Why Convert an HTML Template Into a WordPress Theme?

There are a few good reasons why you might want to take on this project.

• Using an HTML5 template means you have complete control over every minute detail of the appearance of your website. Don’t like some part of the template? Change it. It’s a lot easier to tweak a simple HTML template than a complex WordPress theme.
• Using an HTML5 template means you don’t end up loading up your site with a bunch of features you don’t plan to use.
• If you want a WordPress theme that isn’t being used by thousands of other sites, converting an HTML5 template is one way to end up with a completely custom WordPress theme.
• If you’ve never built a WordPress theme before, converting a template will really stretch your WordPress development muscles — in a very good way.

In this article, I’ll start with a simple HTML5 template and turn it into a full-fledged WordPress theme. Follow along, and you’ll be able to do the same.

Setting Up Your Development Environment

In order to convert an HTML5 template into a WordPress theme, the first thing you’ll need to do is get your development environment set up.

Here are the tools you will need in place before you start work:

• A local server to power WordPress: There are many options to consider. We’ve detailed how to use XAMPP, MAMP, WAMP, VVV, and Vagrant. Pick one and get it working.
• A local WordPress installation: It’s best to build a WordPress theme while you have as few plugins activated as possible, so either create a new installation or use an existing installation after deactivating as many plugins as possible.
• A git repo to keep track of your changes: While this isn’t technically a requirement, it’s a good idea. I’ve used GitHub to track my changes and host the finished product, and Sourcetree to serve an easy-to-use GUI for git.

You’re also going to need to be familiar with how WordPress themes work and have basic PHP coding skills before diving headfirst into this project. If the terms “template hierarchy”, “codex”, and “the loop” are unfamiliar to you, then you need to do some homework before jumping into this tutorial. You can learn what you need to know by taking a course or two, or by reading through our beginner and intermediate WordPress development series.

If you get stuck at any point along the way and want to compare the template files I used with the finished WordPress theme, you can get a copy of the template files from Start Bootstrap and see my WordPress theme’s source code at GitHub.

Step 1: Find a Template or Build Your Own

You can convert any HTML template into a WordPress theme. However, your task will be much easier if you pick a template layout that sticks closely to the core functionality built into WordPress: posts, pages, a sidebar, a header, and a footer. When looking at templates — or coding your own — think about how the parts of the template will translate into a WordPress theme.

That doesn’t mean that you can’t convert any template into a WordPress theme. You can. However, the more non-traditional the template you select, the more work it will take to convert it into a fully-functional WordPress theme.

I’m a minimalist when it comes to web design and a proponent of “mobile-first” design. As a result, a basic blog template based on Bootstrap is exactly the sort of thing I’m looking for.

For this tutorial, I’ve settled on the Blog Post and Blog Home templates from Start Bootstrap.

These templates are free, minimalist, will translate easily to WordPress, and they’re built with Bootstrap. Perfect.

Once you’ve settled on the perfect them, or coded your own, you’re ready to move on to the next step: turning the template into a WordPress theme.

Step 2: Turn the HTML5 Template into a WordPress Theme

At this point, you should have an HTML5 template in hand. It should be composed of a directory that includes an index.html file and subdirectories for CSS and JavaScript resources. Copy the entire theme directory into the wp-content/themes/ directory of your WordPress development site.

The WordPress theme is now located where it needs to be for WordPress to find it. However, to activate the WordPress theme on your development site you have to make two changes:

• Rename index.html as index.php.
• Add a style.css file with a properly formatted theme file header to the theme directory.

Alternatively, you could just move the template’s primary CSS file up one level — out of the /css directory and into the WordPress theme root directory. The key is that there must be a style.css file in the theme root directory, and it must include a proper theme header.

If you’d like to, this would also be the right time to add a theme screenshot to your theme directory.

Once you make those changes, your WordPress theme will be available for activation when you go to Appearance > Themes in the WordPress admin area. Go ahead and activate your WordPress theme and view your site front end.

At this point, your WordPress theme won’t look pretty. Here’s how my site looked at this point:

What’s happening is that all of your theme’s CSS and JavaScript resources are contained in your theme directory, but your HTML template is set up to find the files relative to your site domain. In other words, WordPress theme resources are located in http://yourdomain.com/wp-content/themes/your-theme-directory/, but your site template is looking for those resources in http://yourdomain.com.

Obviously, it’s not finding them. So, the next step is to add CSS and JavaScript resources to our WordPress theme in such a way that WordPress will find them.

Step 3: Properly Enqueue Scripts and Styles

The proper way to add scripts and styles to a WordPress theme is to enqueue them. In order to do that, you will need to create a functions.php file in your theme’s root directory.

Now, take a look at the CSS and JavaScript resources linked to your HTML template. The CSS resources will be added in the template head and the scripts may be added in either the head or just before the closing body tag.

Once you’ve located all of the CSS and JavaScript resources you need to add to your WordPress theme, build a function that enqueues all of the scripts and resources — don’t forget to include your theme’s style.css — and then hook the function into your WordPress theme with the wp_enqueue_scripts hook. You’ll want to add the function and the hook to your theme’s functions.php file.

Your enqueuing function will look somewhat different. However, for reference, here is a look at the enqueuing function I built:

With the CSS and JavaScript resources enqueued, WordPress will now recognize the resources your theme depends on. However, in order to actually insert them into your live site, you need to add two hooks to your WordPress theme’s index.php file:

• wp_head: Must be added just before the closing <head> tag in index.php.
• wp_footer: Must be added just before the closing <body> tag in index.php.

Here’s an approximation of what your index.php file should look like with these tags added:

With those hooks added, and scripts and styles properly enqueued, your WordPress theme should now look just like the original HTML template.

The next step is to we’ll break index.php into the multiple parts so that we can reuse the header, footer, and sidebar with posts, pages, archive pages, and more.

Step 4: Create Template Partials

A template partial is part of a WordPress theme that is only used when it is referenced by one of your theme’s template files.

Let’s look at an example, virtually all WordPress themes break the document head out into a header.php file. That way, the header can be reused with pages, posts, the home page, archive pages, and the 404 and search pages. However, header.php is never called directly. It is only used when it is called by a template file such as index.php.

In most cases, you will want to create at least three template partials:

• header.php
• footer.php
• sidebar.php

Create header.php

Create a new file in your WordPress theme’s root directory and name it header.php. Your theme’s header.php file will include the document type declaration, the opening HTML tag, the entire head element, the opening body tag, and your site navigation — in short, everything you want to appear at the top of every page of your site.

Before you copy over that code, you need to create a file header. Every file in your WordPress theme should include a file header which is simply a brief explanation of the purpose of the file. Take a look at a couple of file headers from themes available from the WordPress theme directory. You’ll see that they all look quite similar. Your file header for header.php should look something like this:

Once you have a file header in place, go ahead and copy over all of the header code from index.php over into header.php. Next, delete all of the header code from index.php and replace it with the get_header() WordPress function like this:

Create sidebar.php and footer.php

Repeat the same process by creating a separate file for all sidebar contents and an additional file for all footer contents. After copying the code from index.php to the relevant files and delete it out of index.php, use the get_sidebar and get_footer WordPress functions to tie all of the template files together.

When you’re done, index.php should begin with a file header and get_header, and end with get_sidebar followed immediately by get_footer. In between those three functions should be the main contents of your page.

Here’s a simplified look at what index.php should look like at this point:

Step 4: Add the Loop

The loop is the function that queries the WordPress database and generates the content displayed on every page of your WordPress website. In general, you will want to have at least two different versions of the loop:

• One version of the loop for your blog page that displays post titles, meta data, the featured image, and a post excerpt.
• A second version for your pages and individual posts that displays the full content of the page or post.

In addition, you may want to refine the loop even further by crafting variations for individual pages, individual posts, search results pages, and more.

At its most basic, here’s what the WordPress loop looks like:

Of course, the comment in that bit of code would have to be replaced with WordPress functions to generate content and HTML tags to render that content properly.

The loop needs to take pages, individual posts, the blog page, the homepage, archive pages, and the 404 and search pages into account. As a result, getting it all done in a single file is a challenge. For this reason, most public themes break the loop out of index.php and put it into multiple separate files with titles like content.php, content-single.php, content-page.php and so forth.

If you decide to put the loop into multiple files, use conditional tags along with the get_template_part function to reference the version of the loop you wish to use.

My recommendation is to start simple and slowly iterate your loop(s) until you’re happy with what shows up on your WordPress site. If all else fails, the following loop should work for virtually every WordPress website, although the result may not be as stunning as you’d like. However, it’s a good jumping-off point if the loop is brand new to you.

Covering the loop in-depth is beyond the scope of this tutorial. However, it’s a topic we’ve covered before and you can learn all about it by reading WordPress Development For Intermediate Users: Queries and Loops.

Step 5: Replace Template File Content with WordPress Functions

This next step may vary considerably from one HTML template to the next. What you want to do is work your way through each template file — header, index, content (if applicable), sidebar, and footer — replacing every piece of static content with an appropriate WordPress function.

Start with header.php. Every time your run into a bit of content, replace it with a WordPress function. If you aren’t sure what function to use, there are two things you can do to find the correct function:

• Take a look at the template files of a well-coded WordPress theme such as Twenty Sixteen and copy what they do. Twenty Sixteen is GPL, copying is fine — even encouraged!
• Use Google to locate the appropriate functions in the WordPress Codex by searching for terms like “WordPress charset function.”

One step that can be particularly tricky is setting up the header menu. Let’s take a minute to look at that step in detail.

Setting Up the Header Menu

Adding a header menu is a two-step process:

• Add the header location to your WordPress theme by adding a function to functions.php.
• Insert the menu into header.php being careful to duplicate the classes and ids employed by the HTML template.

You will need to use the register_nav_menus function to add a menu location to your WordPress heme. In the case of the example WordPress theme, I dropped the following function into functions.php:

Next, you need to use the wp_nav_menu function in header.php to generate your menu. Pay special attention to the classes and ids applied to the menu in your HTML template. You will need to duplicate these selectors so that the template’s CSS will be applied to your new menu. Thankfully, the WordPress function makes that pretty easy. Here’s how the code that adds the menu to my WordPress theme’s header.php looks:

Note that I added two classes to the menu itself, nav and navbar-nav, as well as an ID and two classes to the menu container. I just copied these selectors from the HTML template. This ensures that the menu will pick up the template styles.

Setting Up Widget Areas

You will also need to set up sidebar, header, and footer widget areas as applicable based on the template you’re using. Adding widget areas is a two-step process:

• Use the register_sidebar function to register the widget area in functions.php.
• Use the dynamic_sidebar function to add the widget area to the part of your theme where you want it to appear.

The register_sidebar function accepts an array of values that includes the name of the widget area, the widget area ID, as well as the bits of HTML that should appear before after each widget and the widget title. The register_sidebar function is nested inside of a custom function, and that custom function is hooked into WordPress using the widgets_init hook.

Here’s how the function that registers the sidebar area for my WordPress theme looks in my theme’s functions.php:

With the widget area registered, we can add it to sidebar.php with dynamic_sidebar. The dynamic_sidebar function accepts the widget area ID that we registered with register_sidebar in functions.php.

Here’s how the code adding the widget area to sidebar.php looks in my theme:

Those two functions work together to generate my theme’s sidebar widget area. The widget area will be contained in a div with a class of col-md-4. In addition, each widget will be contained in a div with a class of well, and each widget title will be nested inside of a fourth-level heading element.

You can apply this process to add any number of widget areas to your WordPress theme. All you have to do is:

1. Create a different register_sidebar function with a unique ID for each widget area. You can stack all of your register_sidebar functions inside of a single custom function, and then initialize them all at once using the widgets_init hook.
2. Use the dynamic_sidebar function and the unique widget area ID to load the widget area wherever you want it to appear: in the sidebar, header, or footer.

Next Steps

If you’ve followed along, step-by-step, at this point you have converted an HTML5 template into a functional WordPress theme. Congratulations!

I followed this same process to create this WordPress theme:

If you look back at the template at the top of this tutorial you’ll see that it’s pretty much a spot-on duplicate.

While you’re undoubtedly pleased with what you’ve accomplished so far, there’s a good chance you aren’t completely satisfied with what you’ve created. The next steps you will probably want to take include:

• Creating custom templates and loops for individual posts, pages, search results, and a 404 page template.
• Adding a comments section to your individual posts and pages.
• Building custom widgets that match the styling of the widgets shown in your template.
• Internationalizing your WordPress theme if you plan to make your theme publicly available.

If you’ve made it this far, then you have the skills necessary to take on each of these additional tasks. However, walking you through the process is beyond the scope of this tutorial. If you need help taking on these tasks, take a look at the following resources that teach the concepts necessary to tackle these next steps:

• Creating Custom Page Templates in WordPress
• WordPress Development for Beginners: Widgets and Menus
• The Ultimate Guide to WordPress Translation and Localization

Wrapping up

Converting an HTML5 template into a WordPress theme can be a time-consuming, challenging endeavor. However, going through the process means you will end up with a genuinely unique WordPress theme, and if you’ve never converted a template into a theme before, you’re sure to learn a lot along the way as well.

Have you converted an HTML template into a WordPress theme before? Share your experience with us in the comments section below!

Tags:

• development
• html5
• templates