Continue reading, or jump ahead using these links:<\/p>\n
- \n
- Why Convert an HTML Template Into a WordPress Theme?<\/a><\/li>\n
- Setting Up Your Development Environment<\/a>\n
- \n
- Step 1: Find a Template or Build Your Own<\/a><\/li>\n
- Step 2: Turn the HTML5 Template into a WordPress Theme<\/a><\/li>\n
- Step 3: Properly Enqueue Scripts and Styles<\/a><\/li>\n
- Step 4: Create Template Partials<\/a><\/li>\n
- Step 4: Add the Loop<\/a><\/li>\n
- Step 5: Replace Template File Content with WordPress Functions<\/a><\/li>\n<\/ul>\n<\/li>\n
- Next Steps<\/a><\/li>\n<\/ul>\n
Why Convert an HTML Template Into a WordPress\u00a0Theme?<\/h2>\n
There are a few good reasons why you might want to take on this project.<\/p>\n
- \n
- 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.<\/li>\n
- 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.<\/li>\n
- 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\u00a0theme.<\/li>\n
- If you’ve never built a WordPress\u00a0theme before, converting a template will really stretch your WordPress development muscles \u2014 in a very good way.<\/li>\n<\/ul>\n
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.<\/p>\n
Setting Up Your Development Environment<\/h2>\n
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.<\/p>\n
Here are the tools you will need in place before you start work:<\/p>\n
- \n
- A local server to power WordPress:<\/strong> There are many options to consider. We’ve detailed how to use XAMPP<\/a>, MAMP<\/a>, WAMP<\/a>, VVV<\/a>, and Vagrant<\/a>. Pick one and get it working.<\/li>\n
- A local WordPress installation:<\/strong> It’s best to build a WordPress\u00a0theme 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.<\/li>\n
- A git repo to keep track of your changes:<\/strong> While this isn’t technically a requirement, it’s a good idea. I’ve used GitHub<\/a> to track my changes and host the finished product, and Sourcetree to serve an easy-to-use GUI for git.<\/li>\n<\/ul>\n
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<\/a> and intermediate<\/a> WordPress development series.<\/p>\n
If you get stuck at any point along the way and want to compare the template files I used with the finished WordPress\u00a0theme, you can get a copy of the template files from Start Bootstrap<\/a> and see my WordPress\u00a0theme’s source code at GitHub<\/a>.<\/p>\n
Step 1: Find a Template or Build Your Own<\/h3>\n
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 \u2014 or coding your own \u2014 think about how the parts of the template will translate into a WordPress theme.<\/p>\n
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.<\/p>\n
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.<\/p>\n
For this tutorial, I’ve settled on the Blog Post<\/a> and Blog Home<\/a> templates from Start Bootstrap.<\/p>\n
![\"screenshot](\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2016\/09\/startup-bootstrap-blog-post-template.png\")
<\/div>\nThese templates are free, minimalist, will translate easily to WordPress, and they’re built with Bootstrap. Perfect.<\/p>\n
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.<\/p>\n
Step 2: Turn the HTML5 Template into a WordPress\u00a0Theme<\/h3>\n
At this point, you should have an HTML5 template in hand. It should be composed of a directory that includes an index.html<\/em> file and subdirectories for CSS and JavaScript resources. Copy the entire theme directory into the wp-content\/themes\/<\/em> directory of your WordPress development site.<\/p>\n
The WordPress\u00a0theme is now located where it needs to be for WordPress to find it. However, to activate the WordPress\u00a0theme on your development site you have to make two changes:<\/p>\n
- \n
- Rename index.html<\/em> as index.php<\/em>.<\/li>\n
- Add a style.css<\/em> file with a properly formatted theme file header<\/a> to the theme directory.<\/li>\n<\/ul>\n
Alternatively, you could just move the template’s primary CSS file up one level \u2014 out of the \/css<\/em> directory and into the WordPress theme root directory. The key is that there must be a style.css<\/em> file in the theme root directory, and it must include a proper theme header.<\/p>\n
If you’d like to, this would also be the right time to add a theme screenshot<\/a> to your theme directory.<\/p>\n
Once you make those changes, your WordPress\u00a0theme will be available for activation when you go to Appearance > Themes<\/strong> in the WordPress admin area. Go ahead and activate your WordPress\u00a0theme and view your site front end.<\/p>\n
At this point, your WordPress\u00a0theme won’t look pretty. Here’s how my site looked at this point:<\/p>\n
![\"how](\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2016\/09\/without-styles.png\")
<\/div>\nWhat’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\u00a0theme resources are located in http:\/\/yourdomain.com\/wp-content\/themes\/your-theme-directory\/<\/em>, but your site template is looking for those resources in http:\/\/yourdomain.com<\/em>.<\/p>\n
Obviously, it’s not finding them. So, the next step is to add CSS and JavaScript resources to our WordPress\u00a0theme in such a way that WordPress will find them.<\/p>\n
Step 3: Properly Enqueue Scripts and Styles<\/h3>\n
The proper way to add scripts and styles to a WordPress theme<\/a> is to enqueue them. In order to do that, you will need to create a functions.php<\/em> file in your theme’s root directory.<\/p>\n
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.<\/p>\n
Once you’ve located all of the CSS and JavaScript resources you need to add to your WordPress\u00a0theme, build a function that enqueues all of the scripts and resources \u2014 don’t forget to include your theme’s style.css<\/em> \u2014 and then hook the function into your WordPress\u00a0theme with the
wp_enqueue_scripts<\/code> hook<\/a>. You’ll want to add the function and the hook to your theme’s functions.php<\/em> file.<\/p>\nYour enqueuing function will look somewhat different. However, for reference, here is a look at the enqueuing function I built:<\/p>\n
- Add a style.css<\/em> file with a properly formatted theme file header<\/a> to the theme directory.<\/li>\n<\/ul>\n
- A local WordPress installation:<\/strong> It’s best to build a WordPress\u00a0theme 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.<\/li>\n
- A local server to power WordPress:<\/strong> There are many options to consider. We’ve detailed how to use XAMPP<\/a>, MAMP<\/a>, WAMP<\/a>, VVV<\/a>, and Vagrant<\/a>. Pick one and get it working.<\/li>\n
- Step 2: Turn the HTML5 Template into a WordPress Theme<\/a><\/li>\n
- Setting Up Your Development Environment<\/a>\n
![\"screenshot](\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2016\/09\/completed-blog-post-theme.png\")
<\/div>\n