Someone has requested a tutorial on how to convert HTML layout into WordPress theme. Therefore in this particular post I will be showing you how to do the conversion. We are going to build a simple WordPress theme that does not make use of widgets. [The tutorial is rather long hence it will be divided into a few parts.]
In this tutorial I will be using this HTML file, its stylesheet file and images (sourcecode.zip – 212.6 KB) (these were meant for a website but I never got around to use it and now it’s just sitting on my hard drive like nobody’s business) and by the end of this tutorial, it will be converted into a WordPress theme.
You can use any other layouts if you like, but not the ones using tables, because (for God’s sake) tables are for tabulating data, not for laying out web pages.
Also, it is important to remember that WordPress themes make use of its own template tags. Like any other blogging platform (Blogger, Tumblr, etc), WordPress uses template tags that are unique to that platform.
WordPress themes typically consist of three main types of files, in addition to images and JavaScript files. One is the stylesheet called style.css, which controls the presentation (visual design and layout) of the website pages. The second is the optional functions file (functions.php). The other files are the template files which control the way the site pages generate the information from your WordPress database to be displayed on the site.
– Quoted from WordPress Codex
Step 1
Open the HTML file and we will begin to separate them into 5 parts: header, sidebar, index, single and footer. Now bear in mind that HTML layouts are saved in .htm or .html extension. WordPress theme files, on the other hand, are in .php extension because the files make use of PHP scripts.
Copy the following and open up your text editor (I use Notepad) and paste the codes into it.
[html]
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml” xml:lang=”en” lang=”en”>
<head>
<meta http-equiv=”content-type” content=”text/html; charset=utf-8″ />
<meta name=”description” content=”put description here” />
<meta name=”keywords” content=”put keywords here” />
<meta name=”author” content=”author url here” />
<link rel=”stylesheet” type=”text/css” href=”style.css” media=”screen” />
<title>My First WordPress Blog</title>
</head>
<body>
<div id=”container”>
<div id=”header”>
</div>
<div id=”sidebar”>
</div>
<div id=”body”>
[/html]
Save the file as header.php.
Right, we did the first step but we’re not over with the header file yet. There are still a couple of things need to be added in. We need to change the content of the <title></title> tags. Place this in between those tags:
[php]
<?php bloginfo(‘name’); ?> <?php wp_title(‘»’, true, ‘left’); ?>
[/php]
And then we need to add this just before the </head> tag:
[php]<?php wp_head(); ?>[/php]
Cut this bit and paste them into a blank file:
[html]
<h2>Navigation</h2>
<ul id=”nav”>
<li><a href=”#”>Home</a></li>
<li><a href=”#”>Domain</a></li>
<li><a href=”#”>Owner</a></li>
<li><a href=”#”>Contact</a></li>
</ul>
<h2>Tagboard</h2>
<p>Put tagboard here maybe?</p>
<h2>Friends</h2>
<p>Friend 1<br />
Friend 2<br />
Friend 3</p>
<h2>Credits</h2>
<p>All content owned by Kitty unless otherwise stated.</p>
<p>Blog is powered by <a href=”http://wordpress.org” />Wordpress</a>.</p>
[/html]
And we put the following code in between the <div id=”sidebar”></div> instead:
[php]
<?php get_sidebar(); ?>
[/php]
Step 2
Let’s move on to the next bit. We are going to play around with the sidebar.php.
Remember the codes that we pasted into a blank file? This one:
[html]
<h2>Navigation</h2>
<ul id=”nav”>
<li><a href=”#”>Home</a></li>
<li><a href=”#”>Domain</a></li>
<li><a href=”#”>Owner</a></li>
<li><a href=”#”>Contact</a></li>
</ul>
<h2>Tagboard</h2>
<p>Put tagboard here maybe?</p>
<h2>Friends</h2>
<p>Friend 1<br />
Friend 2<br />
Friend 3</p>
<h2>Credits</h2>
<p>All content owned by Kitty unless otherwise stated.</p>
<p>Blog is powered by <a href=”http://wordpress.org” />Wordpress</a>.</p>
[/html]
Save the file as sidebar.php.
Step 3
The next step is to create an index.php file. This is where the WordPress loops come in (i.e. the codes that publishes your posts).
[php]
<?php
/**
* @package WordPress
* @subpackage My_Theme
*/
get_header(); ?>
<div id=”content” class=”narrowcolumn” role=”main”>
<?php if (have_posts()) : ?>
<?php while (have_posts()) : the_post(); ?>
<div <?php post_class() ?> id=”post-<?php the_ID(); ?>”>
<h1><a href=”<?php the_permalink() ?>” rel=”bookmark” title=”Permanent Link to
<?php the_title_attribute(); ?>”><?php the_title(); ?></a><br /></h1>
<span>Posted on: <?php the_time(‘F jS, Y’) ?> <?php comments_popup_link(‘0
comment’, ‘1 comment’, ‘% comments’); ?></span>
<?php the_content(‘Read the rest of this entry »’); ?>
<div class=”metatags”><?php the_tags( ‘Tagged under: ‘, ‘, ‘, ‘<br />’);
?>Categorised under: <?php the_category(‘, ‘) ?></div>
</div>
<?php endwhile; ?>
<div class=”pagination”>
<?php next_posts_link(‘« Older Entries’) ?> | <?php
previous_posts_link(‘Newer Entries »’) ?>
</div>
<?php else : ?>
<h1 class=”center”>Not Found</h1>
<p class=”center”>Sorry, but you are looking for something that isn’t here.</p>
<?php get_search_form(); ?>
<?php endif; ?>
</div>
<br />
<br />
<?php get_footer(); ?>
[/php]
Ok, that’s done. Move on to the next step.
Step 4
We are going to create single.php file. Now what is this? Single page, as the name implies, is the unique page for each of your post.
Paste the following codes into a blank page:
[php]
<?php
/**
* @package WordPress
* @subpackage My_Theme
*/
get_header(); ?>
<div id=”content” class=”widecolumn” role=”main”>
<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
<div <?php post_class() ?> id=”post-<?php the_ID(); ?>”>
<h1><?php the_title(); ?></h1>
<span>Posted on: <?php the_time(‘F jS, Y’) ?></span>
<?php the_content(‘<p class=”serif”>Read the rest of this entry »</p>’);
?>
<?php wp_link_pages(array(‘before’ => ‘<p><strong>Pages:</strong> ‘, ‘after’ =>
‘</p>’, ‘next_or_number’ => ‘number’)); ?>
<div class=”metatags”><?php the_tags( ‘Tagged under: ‘, ‘, ‘, ‘<br />’);
?>Categorised under: <?php the_category(‘, ‘) ?></div>
</div>
<?php comments_template(); ?>
<?php endwhile; else: ?>
<p>Sorry, no posts matched your criteria.</p>
<?php endif; ?>
</div>
<?php get_footer(); ?>
[/php]
Step 5
Footer part. Copy the following and paste them into a blank file:
[php]
</div>
<div id=”footer”>
This is the footer. Put whatever text here.
</div>
</div>
<?php wp_footer(); ?>
</body>
</html>
[/php]
Save the file as footer.php.
Right, we’ve pretty much finished the basic stuff. We have the header.php, sidebar.php, index.php, single.php and footer.php files. The next post will cover on the other theme elements such adding comment templates, page templates, search functions and theme functions.
Proceed to the next part:
Tutorial: Converting HTML layout into WordPress theme – Part 2