WPKube

How to Create WordPress Themes from HTML

Would you believe me if I told you that you can build your very own WordPress theme without learning PHP first? What if I told you it won’t take an eternity but just 15 minutes. Would still believe me?

Let’s say you already have an HTML website that you wish to migrate to WordPress since you’ve been hearing many great things about the platform. You don’t need to start from scratch, you can migrate your entire site easily.

via lmonk72

Perhaps that’s not the case. Perhaps one of your clients wants you to convert their HTML website to WordPress, and you are wondering how to go about it the easy way. Or perhaps you just want to learn a new skill for your WordPress theme development arsenal.

Whatever reason you’re here, by the time we’re done, you will have the background you need to start creating impeccable WordPress themes from HTML. We will borrow a few PHP codes here and there to put everything together, but basically, you should look forward to working with HTML, and most importantly, having a great deal of fun.

Without wasting another second, let us get to it.

What You Need

First things first…

Create a folder on your desktop where you will store your WordPress theme. Name it whatever. I will name mine WPKubee. All the files we create will live in this folder. It’s the same folder that we will compress, and later upload to our WordPress installation as our new theme.

Also, these are the HTML templates we’re using for this tutorial:

Index.html

<!DOCTYPE html>
	<head>
		<meta charset="UTF-8">
		<title>How To Create WordPress Themes from HTML - WPKube</title>
		<link rel="stylesheet" type="text/css" media="all" href="style.css"/>
	</head>
	<body>
		<div id="wrap">
			<header class="header">
				<p>This is header section. Put your logo and other details here.</p>
			</header><!-- .header -->
			<div class="content">
				<p>This is the main content area. We will replace this with blog posts.</p>
			</div><!-- .content -->
			<div class="sidebar">
				<p>This is the side bar</p>
			</div><!-- .sidebar -->
			<footer class="footer">
				<p>And this is the footer.</p>
			</footer><!-- .footer -->
		</div><!-- #wrap -->
	</body>
</html>

Style.css

#wrap{margin: 0 auto; width:95%; margin-top:-10px; height:100%;}
.header{width:99.8%; border:1px solid #999;height:135px;background-color: #1be;}
.content{width:70%; border:1px solid #999;margin-top:5px;background-color: #999;}
.sidebar{float:right; margin-top:-54px;width:29%; border:1px solid #999;background-color: #1d5;}
.footer{width:99.8%;border:1px solid #999;margin-top:10px;background-color: red;}

 

Naming Your WordPress Theme

WordPress needs to recognize your theme upon installation. As such, we need to name your theme appropriately, or we will never activate it. Using your code editor, create a new style.css file, and save it in your theme folder.

Paste the contents of the existing style.css (the one that came with the html template) into your new style.css, and then add the following code at the very top:

/*
Theme Name: Your theme's name e.g. WPKubee
Theme URI: Your theme's URL e.g. http://yoursite.com
Description: A brief description of your theme
Version: 1.0 or any other version you fancy
Author: Your name or WordPress.org's username
Author URI: Your web address e.g. http://yousite.com
Tags: Tags to locate your theme in the WordPress theme repository e.g. wpkubee, HTML, theme etc
License: GNU General Public License v2.0
*/

This information tells WordPress everything it needs to identify your new WordPress theme. Without this information, you cannot choose and activate your theme via the WordPress dashboard.

The important part is the theme name, but it’s always good practice to include all the other details.

Breaking Index.html into PHP Files

Now, with the WordPress theme name in place, let us split the main HTML template (index.html) into a number of PHP files. While all you need is index.php and style.css to have a complete WordPress theme, it’s best to break your theme into different template files, each with a specialized function, and then put them back together using nifty PHP codes known as function calls.

We will break our HTML template into four template files namely index.php, header.php, sidebar.php and footer.php. These PHP files will house corresponding sections of our new theme i.e. the main content, the header, the sidebar, and the footer in that order.

Header.php

We shall start with header.php, just to build some momentum. Using your code editor, create a new file and name it header.php. Always ensure you get the extensions (e.g. .php, .css etc) right! Otherwise, you will just end up creating useless text files. Choose your extensions from Save as type box when saving your files.

Next, we need to populate this file with relevant code from a credible WordPress theme. The code we will borrow is similar in most themes, but we will use Twenty Fifteen.

Login to your working WordPress installation, and navigate to Appearance -> Editor. This should open the Edit Themes screen. You should see the style.css of your current active theme. If Twenty Fifteen is not your active theme, don’t worry. On the right hand side of the Edit Themes screen, you should see Select theme to edit:. 

Click on the drop down to select Twenty Fifteen, which should take you to Twenty Fifteen’s style.css. We’re not interested in this file.

Scroll down to header.php (shown as Header) under Templates, and once this file loads in the editor, copy the code from <!DOCTYPE html> to the opening <body <?php body_class(); ?>> tag.

The opening tag might look different depending on the theme you’re using, but if you’re using Twenty Fifteen just like yours truly, you should get the above code. Here’s the full code I obtained from the header file in Twenty Fifteen just to save you time:


<!DOCTYPE html>
<html <?php language_attributes(); ?> class="no-js">
<head>
<meta charset="<?php bloginfo( 'charset' ); ?>">
<meta name="viewport" content="width=device-width">
<link rel="profile" href="http://gmpg.org/xfn/11">
<link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>">
<!--[if lt IE 9]>
<script src="<?php echo esc_url( get_template_directory_uri() ); ?>/js/html5.js"></script>
<![endif]-->
<?php wp_head(); ?>
</head>

<body <?php body_class(); ?>>

Paste this code in your header.php and save changes. Then add:


<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" />

…anywhere between the <head> tags to fetch your style.css stylesheet file for the styling. In addition, add:


<title><?php wp_title( '|', true, 'right' ); ?></title>

…under the previous code to take care of your site title. This is the title that appears in the tab or the browser window when your site loads. Don’t worry one bit if all of this feels alien and confusing, I promise everything will make sense in no time.

Save all changes. Your header.php should now look like so:


<!DOCTYPE html>
<html <?php language_attributes(); ?> class="no-js">
<head>
<meta charset="<?php bloginfo( 'charset' ); ?>">
<meta name="viewport" content="width=device-width">
<link rel="profile" href="http://gmpg.org/xfn/11">
<link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>">
<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" />
<title><?php wp_title( '|', true, 'right' ); ?></title>
<!--[if lt IE 9]>
<script src="<?php echo esc_url( get_template_directory_uri() ); ?>/js/html5.js"></script>
<![endif]-->
<?php wp_head(); ?>
</head>

<body <?php body_class(); ?>>

 

Our header.php is now ready. It is time to build the next file, index.php.

Index.php

Let’s construct the main template file, index.php, which is basically the file that puts together the other PHP files to create a complete theme.

From our index.html template, you will notice that we have the header section at the top, the main content area just below it, the sidebar to the right, and the footer at the absolute bottom.

Our theme will have the same structure, and then we will add our blog posts in the main content area. But first, let us build the main structure of index.php.

Open index.php in your code editor and add these three lines:

<?php get_header(); ?>
<?php get_sidebar(); ?>
<?php get_footer(); ?>

We will add some code between the first two lines, but first let’s figure out what these three lines mean. The first will fetch the header.php which we’ve already created, the second will fetch sidebar.php, and the third footer.php. This will put back together our templates files, constructing a full page.

The code that we will add between the first two lines will take care of blog posts, which aren’t accounted for in the other template files.

How to Add Posts

To display posts, we will use a special PHP function known as the loop. It’s nothing big, just a specialized piece of code that combs your WordPress database for posts, and then lists them on your blog. We will add the loop between <?php get_header(); ?> and <?php get_sidebar(); ?> just to be clear. Paste the following code:

<?php if ( have_posts() ) : ?>
 <?php while ( have_posts() ) : the_post(); ?>
 <div id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
 <div class="post-header">
 <div class="date"><?php the_time( 'M j y' ); ?></div>
 <h2><a href="<?php the_permalink(); ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>"><?php the_title(); ?></a></h2>
 <div class="author"><?php the_author(); ?></div>
 </div><!--.post-header-->
 <div class="entry clear">
 <?php if ( function_exists( 'add_theme_support' ) ) the_post_thumbnail(); ?>
 <?php the_content(); ?>
 <?php edit_post_link(); ?>
 <?php wp_link_pages(); ?>
 </div><!--. entry-->
 <footer class="post-footer">
 <div class="comments"><?php comments_popup_link( 'Leave a Comment', '1 Comment', '% Comments' ); ?></div>
 </footer><!--.post-footer-->
 </div><!-- .post-->
 <?php endwhile; /* rewind or continue if all posts have been fetched */ ?>
 <nav class="navigation index">
 <div class="alignleft"><?php next_posts_link( 'Older Entries' ); ?></div>
 <div class="alignright"><?php previous_posts_link( 'Newer Entries' ); ?></div>
 </nav><!--.navigation-->
 <?php else : ?>
 <?php endif; ?>

Note we need to surround the loop with <div> containers from the index.html to cater for styling later on. The final index.php should therefore look like:

<?php get_header(); ?>
<div id="wrap">
<header class="header">
<p>This is header section. Put your logo and other details here.</p>
</header><!--header-->
<div class="content">
 <?php if ( have_posts() ) : ?>
 <?php while ( have_posts() ) : the_post(); ?>
 <div id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
 <div class="post-header">
 <div class="date"><?php the_time( 'M j y' ); ?></div>
 <h2><a href="<?php the_permalink(); ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>"><?php the_title(); ?></a></h2>
 <div class="author"><?php the_author(); ?></div>
 </div><!--.post-header-->
 <div class="entry clear">
 <?php if ( function_exists( 'add_theme_support' ) ) the_post_thumbnail(); ?>
 <?php the_content(); ?>
 <?php edit_post_link(); ?>
 <?php wp_link_pages(); ?>
 </div><!--. entry-->
 <footer class="post-footer">
 <div class="comments"><?php comments_popup_link( 'Leave a Comment', '1 Comment', '% Comments' ); ?></div>
 </footer><!--.post-footer-->
 </div><!-- .post-->
 <?php endwhile; /* rewind or continue if all posts have been fetched */ ?>
 <nav class="navigation index">
 <div class="alignleft"><?php next_posts_link( 'Older Entries' ); ?></div>
 <div class="alignright"><?php previous_posts_link( 'Newer Entries' ); ?></div>
 </nav><!--.navigation-->
 <?php else : ?>
 <?php endif; ?>
</div><!--.content-->

<?php get_sidebar(); ?>
<?php wp_footer(); //Crucial footer hook! ?>
<?php get_footer(); ?>
</div><!--.wrap>

That’s all there is to it. Now let us create the sidebar and footer templates.

Sidebar.php

This is easy work. Just copy the code from <div class=”sidebar”> to </div> to your sidebar.php like so:

<div class="sidebar">
<p>This is the side bar</p>
</div><!--.sidebar-->

Save your changes.

Footer.php

Similarly, copy the code from <div class=”footer”> to </div> to your footer.php like so:

<footer class="footer">
<p>And this is the footer.</p>
</footer><!--.footer-->

Then add the following lines below the closing </footer> tag:

<?php wp_footer(); //Crucial footer hook! ?>
</body>
</html>

Notice the closing </body> and </html> tags in footer.php. Yeah, don’t forget to add those. At this point, your footer.php should look like so:

<footer class="footer">
<p>And this is the footer.</p>
</footer><!--.footer-->
<?php wp_footer(); //Crucial footer hook! ?>
</body>
</html>

Your index.php should look like:

<?php get_header(); ?>
<div id="wrap">
<header class="header">
<p>This is header section. Put your logo and other details here.</p>
</header><!--header-->
<div class="content">
 <?php if ( have_posts() ) : ?>
 <?php while ( have_posts() ) : the_post(); ?>
 <div id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
 <div class="post-header">
 <div class="date"><?php the_time( 'M j y' ); ?></div>
 <h2><a href="<?php the_permalink(); ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>"><?php the_title(); ?></a></h2>
 <div class="author"><?php the_author(); ?></div>
 </div><!--.post-header-->
 <div class="entry clear">
 <?php if ( function_exists( 'add_theme_support' ) ) the_post_thumbnail(); ?>
 <?php the_content(); ?>
 <?php edit_post_link(); ?>
 <?php wp_link_pages(); ?>
 </div><!--. entry-->
 <footer class="post-footer">
 <div class="comments"><?php comments_popup_link( 'Leave a Comment', '1 Comment', '% Comments' ); ?></div>
 </footer><!--.post-footer-->
 </div><!-- .post-->
 <?php endwhile; /* rewind or continue if all posts have been fetched */ ?>
 <nav class="navigation index">
 <div class="alignleft"><?php next_posts_link( 'Older Entries' ); ?></div>
 <div class="alignright"><?php previous_posts_link( 'Newer Entries' ); ?></div>
 </nav><!--.navigation-->
 <?php else : ?>
 <?php endif; ?>
</div><!--.content-->

<?php get_sidebar(); ?>
<?php wp_footer(); //Crucial footer hook! ?>
<?php get_footer(); ?>
</div><!--.wrap>

And your new style.css should look something like:

/*
Theme Name: Your theme's name e.g. WPKubee
Theme URI: Your theme's URL (http://yoursite.com)
Description: A brief description of your theme
Version: 1.0 or any other version you fancy
Author: Your name or WordPress.org's username
Author URI: Your web address (http://yousite.com)
Tags: Tags to locate your theme in the WordPress theme repository e.g. wpkubee, HTML, theme etc
License: GNU General Public License v2.0
*/
body {
    font-family: arial, helvetica, verdana;
    font-size: 0.8em;
    width: 100%;
    height: 100%;
}

.header {
    background-color: #1be;
    margin-left: 14%;
    top: 0;
    border-width: 0.1em;
    border-color: #999;
    border-style: solid;
    width: 72%;
    height: 250px;
}

.content {
    background-color: #999;
    margin-left: 14%;
    margin-top: 5px;
    float: left;
    width: 46%;
    border-width: 0.1em;
    border-color: #999;
    border-style: solid;
}

.sidebar {
    background-color: #1d5;
    margin-right: 14%;
    margin-top: 5px;
    float: right;
    border-width: 0.1em;
    border-color: #999;
    border-style: solid;
    top: 180px;
    width: 23%;
}

.footer {
    background-color: red;
    margin-left: 14%;
    float: left;
    margin-top: 5px;
    width: 72%;
    height: 50px;
    border-width: 0.1em;
    border-color: #999;
    border-style: solid;
}

Screenshot

Now, let’s create a screenshot for your new WordPress theme. It can be anything, but best is to take a screenshot of your theme in action.

A screenshot you can use

That aside, there are a few things to keep in mind. Firstly, your screenshot should be a .png image. Secondly, it should be 600px wide and 450px high. Thirdly, save the image as screenshot.png in your theme folder.

Putting it All Together

By now, you should have a working WordPress theme, albeit a simple one. You can add styling as you deem fit, but this far, you should be able to create a working WordPress theme from HTML.

In part two of this post, we will add navigation menus, widgets and talk about the functions.php file among other things. In other words, most of the features we love in WordPress are inactive in our new theme, since this tutorial covered only the basics.

In the meantime, save all your files including the screenshot in your theme folder, compress the folder into a .ZIP archive, and upload your new theme. You can preview or activate the theme to see it in action!

Final Word

If you have followed these steps successfully, there’s nothing to stop you from creating WordPress themes from HTML. Heck, there’s nothing to stop you from advancing to a fully-fledged WordPress developer in no time.

PHP is not tough, its syntax is just a little different from HTML’s. Once you learn the ropes, especially how different parts of a WordPress theme play together, you will be churning out theme after theme in no time.

We wish you success in your endeavors, and don’t change the dial!

Oh by the way, here are the files again:

Cheers!