WordPress theme from HTML template in Easy Steps
When you are developing a website you must be looking for some awesome WordPress theme but when you don’t find one, you are likely to turn to a theme framework. Alternatively you can also think of coding an HTML5 template and convert it into a WordPress theme.
If you have some basic WordPress programming skills then converting an HTML5 template into a WordPress theme looks to you quite possible. But for that you need to put in the effort and the steps we are discussing in this article for you.
Why to Convert an HTML Template into a WordPress theme?
There are some good reasons to convert HTML template to WordPress theme which we are discussing now. If you use HTML5 template then you will have complete control over every minute detail of the appearance of your website. If you don’t like some part of the template then you can change it. It is easier to change a simple HTML template than a complex WordPress theme.
If you want a WordPress theme which is not used by thousands of other websites then converting an HTML5 template is one way to get a completely custom WordPress theme.
If you have not built a WordPress theme before then you can learn the process of converting a template into WordPress theme here in this article. Here we will start with a simple HTML5 template and turn it into a full-fledged WordPress theme.
Setting up Your Development Environment
If you want to convert an HTML5 template into a WordPress theme then the first thing you need to do is to set up your development environment.
Some of the tools which you will need are:-
A local server for WordPress
There are many options to consider like XAMMP, WAMP, MAMP etc. You can pick anyone.
A local WordPress installation
It is better to build a WordPress theme while you have less number of plugins activated. Hence either create a new installation or use an existing on after deactivating most of the plugins.
Git to tack your changes
It is a good idea to use Github to tack your changes and host the finished product.
You should also familiar with how WordPress themes work and should have a basic PHP coding skills.
Step 1: Find a Template or Create a new one
You can convert any HTML template into a WordPress theme but your work will be easier if you pick a template layout which matches the core functionality built into WordPress: a sidebar, a header, posts, pages, and a footer. When you are looking for template or you are coding your own just think how the parts of template will translate into a WordPress theme.
There templates are free and will easily translate to WordPress. Once you have found or created the perfect one, you can move on to the next step i.e. Turning the template into a WordPress theme.
Step 2 : Convert the HTML5 Template into a WordPress theme
Step 3 : Properly Add Scripts and Styles
wp_head: Should be added just before the closing<head>tag in index.php.
wp_footer: Should be added just before the closing<body>tag in index.php.
Your index.php file will look like with these tags added:
<!DOCTYPE html> <html lang="en"> <head> <!-- various meta tags, your site title, etc. --> <?php wp_head(); ?> </head> <body> <!-- webpage content --> <?php wp_footer(); ?> </body> </html>
After adding those hooks, scripts and styles, your WordPress theme will look like the original HTML template.
In next step we will break index.php into multiple parts so that you can use the header, footer and sidebar with pages, posts, etc.
Step 4: Creating Template Partials
All WordPress themes break the document head out into a header.php file therefore header can be reused with pages, posts, the home page, 404 pages etc. But the header.php is not called directly. It is only used when it is called by a template file like index.php. You have to create at least three template partials:
You need to create a file header. Each of your file in WordPress theme should include a file header which is a brief of the purpose of the file. Your file header for header.php should look something like this:
<?php /** * The header for our theme. * * Displays all of the <head> section and everything up till <div id="content"> * * @package Simple Blog Theme */ ?>
After you have file header in place now copy over all of the header code from index.php over into header.php. Now delete all of the header code from index.php and replace it with the get_header() WordPress function:-
<?php /** * The main template file * It puts together the home page if no home.php file exists. * * @package Simple Blog Theme */ get_header(); ?> <!-- the beginning of the page or post content -->
Now Creating sidebar.php and footer.php
Create a separate file for all sidebar contents and an additional file for all footer contents. After you copy the code from index.php to the relevant files and deleting it out for index.php, use the get_sidebar and get_footer WordPress functions to tie all of the template files together.
When you are finished, index.php should begin with a file header and get_header, and should end with get_sidebar and by get_footer. Between those three functions should be the main contents of your page. Now look how index.php file will look at this point:
<?php /** * The main template file * It puts together the home page if no home.php file exists. * * @package Simple Blog Theme */ get_header(); ?> <!-- all page or post content should be between the header and sidebar --> <?php get_sidebar(); ?> <?php get_footer(); ?>
Step 5: Adding the Loop
Loop is a function which queries the WordPress database and generates the content displayed on every page of your WordPress site. Normally, you will have two different versions of loop: One version of loop for your blog page which displays post titles, meta data, featured image and a post excerpt. A second version for your individual posts and pages that displays the full content of the page or post. Also you may want to refine the loop even further by doing variations for individual pages, posts, search results pages etc. Below is how the WordPress loop will look like:
<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?> /* insert post content here */ <?php endwhile; else : ?> <p><?php _e( 'Sorry, there doesn\'t appear to be anything here.' ); ?></p> <?php endif; ?>
The comment in that code should have to be replaced with WordPress functions to generate content and HTML tags to display that content properly.
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 etc.
Step 6 : Replacing Temlpate file content with WordPress functions
This step varies from one HTML template to another. Now check each template file – header, index, content, sidebar and footer and replace each static content with an appropriate WordPress function.
Start with header.php and replace it with WordPress function.
Setting Up the Header Menu
This is a two-step process:
In first step add the header location to your WordPress theme by adding a function to functions.php. Then insert the menu into header.php. You have to use the register_nav_menus function to add a menu location to your WordPress theme.
Now you need to use the wp_nav_menu function in header.php to generate your menu. Below is the code that adds the menu to WordPress theme’s header.php looks:
<?php wp_nav_menu( array( 'theme_location' => 'primary', 'menu_class' => 'nav navbar-nav', 'container_id' => 'bs-example-navbar-collapse-1', 'container_class' => 'collapse navbar-collapse', )); ?>
I have added two classes to the menu itself i.e nav and navbar-nav and also an ID and two classes to menu container. By copying these selectors from HTML template will ensure that the menu picks up the template styles.
If you have followed all of the above steps then you have converted an HTML5 template into a functional WordPress theme.
If you just check the template at the top of this tutorial you will see that it is similar to that. You must be happy for what you have accomplished so far.
Although converting an HTML5 template into a WordPress theme looks to be a time consuming and difficult task but if you follow the process carefully then you will get a unique WordPress theme based on which you can build your unique WordPress site. Obviously you must be learning lots of things in this process.
Author Bio: Alex Jones is the author of this post. She is an experienced WordPress developer for hire currently working in Wordprax Ltd, a leading WordPress development company in US. Alex has written many articles and blogs related to WordPress website development and website security.