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.
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 from The Academy 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.
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
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:
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.
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:
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:
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_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.
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,
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_sidebarfunction to register the widget area in functions.php.
- Use the
dynamic_sidebarfunction to add the widget area to the part of your theme where you want it to appear.
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
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 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:
- Create a different
register_sidebarfunction with a unique ID for each widget area. You can stack all of your
register_sidebarfunctions inside of a single custom function, and then initialize them all at once using the
- Use the
dynamic_sidebarfunction and the unique widget area ID to load the widget area wherever you want it to appear: in the sidebar, header, or footer.
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
In addition, I’d be remiss not to mention that I’ve taken two courses from The Academy over the past few months. It was in those courses that I learned the skills necessary to complete this project.
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.Tags: