Converting HTML to WordPress Theme
Converting your HTML file to wordpress theme would be quite simple and easy. The concept is chunking or breaking your mark-up or the HTML codes into several parts and save it as .php file instead of having it .html.
Example:
Usually, this is how HTML file looks like.
index.html
<html>
<head>
<title>Your title here</title>
<link rel="stylesheet" type="text/stylesheet" href="style.css" />
</head>
<body>
<div id="header">
<!--Header contents here..-->
</div>
<div id="content">
<!--Main contents here..-->
</div>
<div id="sidebar">
<!-- Sidebar contents here.. -->
</div>
<div id="footer">
<!--Footer contents here.. -->
</div>
</body>
</html>
Now, after breaking it into parts and saving it as .php file. It will look like this.
header.php
<html>
<head>
<title>Your title here</title>
<link rel="stylesheet" type="text/stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" />
</head>
<body>
<div id="header">
<!-- Header contents here.. -->
</div>
NOTE: Notice that the “href” attribute of the link tag for styelsheet has changed into “”. It’s how you call your css file location on wordpress. WordPress functions will be discussed further in the next part of the tutorial.
Sidebar.php
<div id="sidebar">
<!-- Sidebar contents here.. -->
</div>
footer.php
<div id="footer"> <!-- Footer contents here.. --> </div>
index.php
<?php get_header(); ?>
<div id="cotnent">
<!-- Main contents here.. -->
</div>
<?php get_sidebar(); ?>
<?php get_footer(); ?>
Add some information in your style.css file. With the format below. It should be the first thing in your style.css file
/* Theme Name: Your theme name Theme URI: your theme url Description: short description about your theme Author: Your name Author URI: your website Version: your theme version */
WordPress functions will be discussed further in the next part of the tutorial. Please subscribe for updates.