Converting html layout into wordpress theme – part 1
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) 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.
<!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" lang="en" xml: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">
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 bloginfo('name'); ?> <?php wp_title('»', true, 'left'); ?>
And then we need to add this just before the </head> tag:
<?php wp_head(); ?>
Cut this bit and paste them into a blank file:
<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>
And we put the following code in between the <div id=”sidebar”></div> instead:
<?php get_sidebar(); ?>
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:
<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>
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
/**
* @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(); ?>
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
/**
* @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(); ?>
Step 5
Footer part. Copy the following and paste them into a blank file:
</div> <div id="footer"> This is the footer. Put whatever text here. </div> </div> <?php wp_footer(); ?> </body> </html>
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
#2194 vivek says:
very helpful for beginner my suggestion every beginner follow this
#2214 Zakii Aydia says:
Wow awesome tutorial
Thank you for the clue!
Twitter: ZakiiAydia
#2215 Kitty says:
You’re welcome :)
Twitter: nekonette
#2237 Lolo says:
Hey hey,
I tried filling out the survey to download the files but it did not work!
Do you use Mediafire to upload files?
#2252 Kitty says:
You don’t actually need to fill in any surveys, just skip the ads and eventually you’ll reach the page where you can download the file.
Twitter: nekonette
#2239 Sheela Kalawar says:
Great tutorial for newbies like me. Looking forward to converting some splendid free html files that I found on the internet.
Twitter: sheela.kalawar
#2249 asma says:
hi please tell me how to link javascript files in wordpress.?
#2251 Kitty says:
I am assuming you want to include Javascript files into your WordPress theme?
To do this, you will need to include the necessary codes into the theme by pasting them into either the header.php file or footer.php. Usually in this form:
<script type=”text/javascript”>
YOUR JAVASCRIPT CODES HERE
</script>
Or, if the Javascript codes are already hosted elsewhere, you would need to include the link into your header.php file.
<script type=”text/javascript” src=”URL OF SOURCE”>
</script>
Better explanation can be found here: http://codex.wordpress.org/Using_Javascript
Twitter: nekonette
#2308 suraj says:
Not able to download the files, will you please upload on mediafire
Twitter: iamsooraz.com
#2309 Kitty says:
Hi Suraj, I have no problem whatsoever downloading the file. Though if the problem persists, try this link http://uploading.com/bb5afaaf/sourcecode-zip. Click on the blue link that says ‘Download for free’. If this doesn’t work either, do let me know.
Twitter: nekonette
#2310 suraj says:
Wow, Nice to see so quick reply, Thanks a ton! Downloaded..
How Can I contact you in private(of course regarding some doubt :P) regarding some CSS stuff?
Twitter: iamsooraz.com
#2311 Kitty says:
You can email me at kitty(at)nekonette.com if you have any queries regarding the template files.
Twitter: nekonette
#2312 suraj says:
Waiting for your reply!
Thanks!
Twitter: iamsooraz.com