Convert HTML Template into WordPress Theme in less than 15 Minutes

With the introduction of open source projects like WordPress, the Web Pages are not limited to HTML and CSS only. Content Management System is the major advantage of WordPress.In one hand CMS has made things simpler for users. whereas in another hand the changes have added more complexities for developers. WordPress themes are completely different from the normal HTML themes. So to make the new developers familiar with WordPress we have created this tutorial. In this tutorial, we will show you how to convert HTML template into WordPress theme in less than 15 minutes. To be able to follow this tutorial, you will need the basic knowledge of HTML CSS and PHP.

Convert HTML Template into WordPress Theme in less than 15 Minutes

Steps 1: Create folder and files

First, create a new folder in your computer and give it a name of your choice. Inside the folder create the following files.

Style.css
Index.php
Sidebar.php
Header.php
Footer.php

Upload your theme folder to the wp-content/themes folders of your WordPress directory.

Step 2: Registering the theme

Open your style.css file and copy and paste the following code at the top.

/*
	Theme Name: My Example Theme
	Theme URI: https://mustbeweb.com/
	Author: The Mustbeweb Team
	Author URI: https://mustbeweb.com/
	Description: The theme is for educational purpose. The theme is the very basic starter theme. It is created to teach conversion of HTML to WordPress theme.
	Version: 1.0
	License: GNU General Public License v2 or later
	License URI: http://www.gnu.org/licenses/gpl-2.0.html
*/

This piece of code is to give some introductory information about your theme. Change the above information according to the theme you are making. Give your own theme name, themes URL, author name and author URL. Describe your theme in the description tag and then give it the version number. The above information is enclosed inside the comment tag and kept on top of your main stylesheet.

You can also give a cover picture to your theme. Add a screenshot of your theme or add any picture of size 880*660 and name it screenshot.png. Place the screenshot.png image in the root directory of your theme.

Now if you log in to your WordPress dashboard and navigate to Appearance > Themes, then you can see your new theme in the list. Click the activate button to activate your new theme.

Step 3: Add HTML codes to your WordPress theme

General HTML themes have their header, footer and sidebar codes integrated into the same index file. In any WordPress theme, we have to separate these elements like header, footer, and sidebar and keep them in a separate file. Here is a format of a general web page.

Creating header.html File

As shown in the image above header file should include header elements up to menu items. Our aim is to separate static header from the dynamic main contents. Open up the index file of your HTML theme and copy all the header codes up to menu items. Save the code in the header.html file in your WordPress theme directory.

Although the header codes are placed in the seperate header file, we still have to display the header code in the index file of your WordPress theme. On top of your index.php file of your WordPress theme, add the line following line.

<?php get_header() ?>

Static HTML tags in the header file of your WordPress can be replaced by WordPress built in functions. There are some modifications in the meta tags and the language attribute that you have to make in your theme as shown below.

<!DOCTYPE html>
<html <?php language_attributes(); ?> class="no-js no-svg">
	
	<head>
		<meta charset="<?php bloginfo( 'charset' ); ?>">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<!-- Stylesheets -->
		….
		<?php wp_head(); ?>
	</head>
	
	<body <?php body_class(); ?>>
	….
	<header>
	Menu Here
	</header>

Don’t forget to put <?php wp_head(); ?> just before the closing of the head tag. Also add a function called body_class() in the <body> tag .

Adding Stylesheet and script Links in the Legit Way

Now it’s time to modify the stylesheet and script links. The proper and recommended way of adding stylesheet and scripts in WordPress is by enqueuing. For detail check our article on “How to Add Scripts and Styles in WordPress?”. Although we recommend you that method here is a shortcut way to display the stylesheet.

<link rel="stylesheet" href="<?php echo get_template_directory_uri(); ?>/style.css" />

We are using a WordPress inbuilt function get_template_directory_uri() function to display the path directing to the stylesheet. Use this function and add modify all of your stylesheet and script links.

Displaying Main Menu in your WordPress theme

The menu is another place where you will need some workout. For clear and vivid knowledge about WordPress menu, we recommend you read two articles.

Also Read: How to Add Breadcrumb Navigation Links in WordPress

Here is a quick guide on creating the dynamic menu in WordPress. First create a new file called functions.php. Now paste this code in the file.

<?php 
function awsome_theme_setup(){    
    register_nav_menu('primary', __('Primary Header Navigation'));
}
add_action ('init', 'awsome_theme_setup');?>

This will register your menu with the name Primary Header Navigation. Now in your header file add the following code to display the menu.

<?php
wp_nav_menu( array(
 'theme_location' => 'primary',
 'container_class' => 'primary-menu-class') );
?>

Now you can start adding menu items from the admin dashboard. For more detail guide on adding menu items from admin dashboard, we recommend you check our article “Beginners Guide on Creating WordPress Menu”.

Separating Footer File

In the similar fashion cut the footer codes from the index file of HTML template and paste them in the separate footer.php file in WordPress directory. To display the footer code in the index file of WordPress theme, at the end of index file add the following code.

<?php get_footer() ?>

Getting Sidebar in Order

Not all themes have a sidebar. If your theme has sidebar then here are some basic things you can do set it up. First, you have to register the sidebar. In the function.php file add the following code.


function awsome_widget_setup(){
    register_sidebar(
        array (
            'name' => 'Custom-sidebar',
            'id' => 'sidebar1',
            'description' => 'Custom Sidebar to display widgets',
            'before_widget' => '<div class="widget-content">',
            'after_widget' => "</div>",
            'before_title' => '<h3 class="widget-title">',
            'after_title' => '</h3>',
        )
    );
}
add_action('widgets_init','awsome_widget_setup');

This will register a sidebar called custom-sidebar with id sidebar1. Widget-content and widget-title are the two classes given here you can give your own class according to your theme styling.

Now to display the sidebar, add the following code in the sidebar.php file.


<?php
    if ( is_active_sidebar( 'sidebar1' ) ) :
    dynamic_sidebar( 'sidebar1' );
    endif;
?>

Finally, you have to integrate sidebar.php code file in the index file. This can be done using this simple code in the index file.

<?php get_sidebar() ?>

Now you can start adding sidebar widgets by going to Appearance > Widgets from your dashboard. The sidebar widget you added in your dashboard will be autoatically displyed in your website. For more detail check our article on “How to Add a Custom Sidebar in WordPress”.

Finalizing the index.php File

Finally, to convert HTML template into WordPress theme, we have to work on index file. Your WordPress index file will store the rest of the code from HTML index file.

Here is rough look at what index page looks like.

<?php get_header() ?>
<!--*….Main  Contents….*/ ,-->
<?php get_sidebar()?>
<?php get_footer();

The content of index page right now is static. But you can introduce the dynamicity in the page by using the loop on your website. We will be showing you how to add dynamic contents to your website in coming tutorials.

Conclusion

As WordPress is getting more and more popular, the necessity to learn WordPress development for web developers is getting higher. As more clients are demanding WordPress themes, web developers have no other option other than learning basic WordPress theme development skills. We hope our article on how to convert HTML Template into WordPress Theme gave you some insights on how WordPress themes are created.

Bio
Latest Posts

Kantiman Bajracharya

Kantiman Bajracharya is a freelance web developer. He is a computer geek who has a Bachelor’s degree in Computer Engineering. He has earned lots of satisfied customers while working for numerous successful projects. He is also a WordPress theme creator and web article writer. On free time he likes reading philosophy books, traveling and playing chess.