WordPress Template Tutorial
One of the WordPress strong points is the wide range of templates it’s users have to choose from. I am sure that this large number of ported templates is available because of WordPress’ extremely clean output and easy templating system (calls).
It’s just too easy to learn how to convert a CSS template to WordPress, and I’m sure it’ll take you an hour at the most the first time (it helps to know a little bit about HTML an CSS).
Ok, let’s get started! First we’ll need a CSS template so we’ll get one from my favourite site, Freecsstemplates.org. The Papyrus template looks good to me, so let’s download it.
*note: I uploaded a ported version of the Papyrus to themes.wordpress.net in case you want to compare it. (the theme is no longer available online and unfortunately I haven’t kept a local copy)
Although their designs are free, they are released under a Creative Commons License; this means that you can use the work for free for anything you want (even commercial purposes) as long as you leave the link in the footer intact. Play fair and leave it, just as I have for this site.
Another requirement for this tutorial is a HTML & PHP editor, such as Adobe Dreamweaver. You can download a free trial or choose another editor, just choose what suits you best.
Here’s what you do next:
1. Extract the folder “papyrus” into the “/wp-content/themes/” folder of your WordPress installation.
2. In the “papyrus” folder create 4 new files: index.php, header.php, sidebar.php and footer.php.
3. Rename the “default.css” file to “style.css”.
4. Open index.html, style.css, index.php and the other files in Dreamweaver.
Header.php
5. Copy the first 37 lines from the index.html to header.php. Line 37 is <div id=”content”>, which defines the start of the container div for the content and sidebar divs – it needs to be in the header.php file.
Now, in the header.php file we’ll have to delete some code and then write other code in it’s place.
5.1. Delete lines 2 through 12 – this is the commented part of the template. We’re still going to keep the link at the bottom, so I’m sure the guys over at freecsstemplates.org won’t mind 
.
5.2. Delete lines 4 through 8 or what’s between the <head> and </head> tags.
5.3. On lines 8 and 9 there are 2 headings. Delete everything between the heading tags.
5.4. Delete lines 12 through 18, but make sure <div id=”search”></div> stays in place.
5.5. Copy the following code between the <head> and </head> tags:
<meta http-equiv=”content-type” content=”<?php bloginfo(‘html_type’); ?>; charset=<?php bloginfo(‘charset’); ?>” />
<title><?php bloginfo(‘name’); ?> <?php if ( is_single() ) { ?> » Blog Archive <?php } ?> <?php wp_title(); ?></title>
<link href=”<?php bloginfo(‘stylesheet_url’); ?>” rel=”stylesheet” type=”text/css” />
<link rel=”alternate” type=”application/rss+xml” title=”<?php bloginfo(‘name’); ?> RSS Feed” href=”<?php bloginfo(‘rss2_url’); ?>” />
<link rel=”pingback” href=”<?php bloginfo(‘pingback_url’); ?>” />
<style type=”text/css” media=”screen”>
@import url( <?php bloginfo(‘stylesheet_url’); ?> );
</style>
<?php wp_get_archives(‘type=monthly&format=link’); ?>
<?php //comments_popup_script(); // off by default ?>
<?php wp_head(); ?>
5.6. Between the heading 1 tags:
<a href=”<?php bloginfo(‘url’); ?>/”><?php bloginfo(‘name’); ?></a>
The bloginfo(‘url’) part represents the url of your blog and bloginfo(‘name’) is the name of the blog.
5.7. Between the heading 2 tags:
<a href=”<?php bloginfo(‘url’); ?>”><?php bloginfo(‘description’); ?></a>
This will be the description of the blog. If you prefer not to have it as a link just put <?php bloginfo(‘description’); ?> and nothing else.
5.8. Save the header.php file and close it, we won’t need it anymore. However, keep index.html open.
Index.php
6. Copy lines 38 through 65 from index.html to index.php.
6.1. There is a little cleaning to be done but it would take too much space so I’ll just paste the code you should end up with (feel free to copy and paste it in the index.php file):
<div id=”colOne”><div>
<h2 class=”title”></h2>
<h3 class=”posted”></h3>
<div class=”story”></div>
</div><div style=”clear: both; height: 1px;”></div></div>
6.2. Time to write the loop. The loop is what lets you see the content – it tells WordPress where to start displaying posts and where to stop so it is essential that we get this right. The following line should be posted after <div id=”colOne”><div>, on the second line:
<?php if (have_posts()) : ?> <?php while (have_posts()) : the_post(); ?>
This should be posted on the second to last line, just after the </div> tag:
<?php endwhile; ?> <?php endif; ?>
6.3. Let’s put in the call to the post title, between the heading 2 tags:
<a href=”<?php the_permalink() ?>” rel=”bookmark” title=”Permanent Link to <?php the_title(); ?>”><?php the_title(); ?></a>
the_permalink() is the full link to the post and the_title() is the title of the post. If you want you can delete the rel and title attributes of the link, as they’re not important.
6.4. The date, author, category and other info must be pasted between <h3 class=”posted”> and </h3>:
Posted on <?php the_time(‘F jS, Y’) ?> by <?php the_author() ?> and filed under <?php the_category(‘, ‘) ?> <strong>|</strong> <?php edit_post_link(‘Edit’,”,’<strong>|</strong>’); ?> <?php comments_popup_link(‘No Comments »’, ’1 Comment »’, ‘% Comments »’); ?>
6.5. The call for the actual content of the post:
<?php the_content(‘Read the rest of this entry »’); ?>
<?php comments_template(); ?>
As you can see all the calls are pretty much self explanatory, so if you don’t want something there (let’s say to display the time of the posting) you can move it around or even delete it. However, don’t delete things that are needed for the good function of WordPress – it’s just not smart…
6.6. The last step is to paste in the includes for the rest of the files. Looking at the code in index.html we can see that first there is the header, then the content for the index.php file, then we have the sidebar and footer. Here is how the final code for index.php will look like:
<?php get_header(); ?>
<div id=”colOne”><div>
<?php if (have_posts()) : ?> <?php while (have_posts()) : the_post(); ?>
<h2 class=”title”><a href=”<?php the_permalink() ?>” rel=”bookmark” title=”Permanent Link to <?php the_title(); ?>”><?php the_title(); ?></a></h2>
<h3 class=”posted”>Posted on <?php the_time(‘F jS, Y’) ?> by <?php the_author() ?> and filed under <?php the_category(‘, ‘) ?> <strong>|</strong> <?php edit_post_link(‘Edit’,”,’<strong>|</strong>’); ?> <?php comments_popup_link(‘No Comments »’, ’1 Comment »’, ‘% Comments »’); ?></h3>
<div class=”story”>
<?php the_content(‘Read the rest of this entry »’); ?>
<?php comments_template(); ?>
</div>
<?php endwhile; ?>
<?php endif; ?>
</div><div style=”clear: both; height: 1px;”></div></div>
<?php get_sidebar(); ?>
<?php get_footer(); ?>
6.7. Save the index.php file and then close it.
Sidebar.php
7. Go back to index.html, select lines 66 to 114 and then copy and paste all that code in the sidebar.php. Here’s how it’s supposed to look after the clean up (and a little addition):
<div id=”colTwo”>
<ul><li><h2>Pages</h2>
<ul></ul></li>
<li><h2>Categories</h2>
<ul></ul></li>
<li><h2>Archives</h2>
<ul></ul></li>
<li><h2>Blogroll</h2>
<ul></ul></li>
<li><h2>Meta</h2>
<ul></ul></li></ul>
<div style=”clear: both;”> </div>
</div>
Time to add the calls for the sidebar. Remember to add each one after it’s appropiate heading, between the <ul> and </ul> tags.
7.1. The pages list:
<?php wp_list_pages(‘depth=1&title_li=’); ?>
7.2. The categories list:
<?php wp_list_cats(‘sort_column=name&hierarchical=0′); ?>
7.3. The archives list:
<?php wp_get_archives(‘type=monthly’); ?>
7.4. The blogroll list:
<?php get_links(-1, ‘<li>’, ‘</li>’, ”, FALSE, ‘name’, FALSE, FALSE, -1, FALSE); ?>
7.5. The meta info:
<?php wp_register(); ?> <li><?php wp_loginout(); ?></li> <?php wp_meta(); ?>
7.6. Save the file and then close it.
Footer.php
8. Select lines 115 through 120 from index.html, copy and then paste them into footer.php. To add a nice little touch change “Papyrus” to “<a href=”<?php bloginfo(‘url’); ?>/”><?php bloginfo(‘name’); ?></a>” – this way every time you change the blog name this will be reflected in your footer.
8.1 Save the file.
Style.css
9. Open the style.css file and write the following at the top, before everything else:
/*
Theme Name: Papyrus
Theme URI: http://needforcontent.com
Description: A really stylish template made by Freecsstemplates.org and adapted by Needfocontent.com.
Author: Need for content
Author URI: http://needforcontent.com
*/
Of course, complete it with your own details if you want. This step is necessary because this is where WordPress gets its information about the template.
10. Log in the WordPress administration, go to the Presentation section and click on “Papyrus” to activate the template.
11. One extra, but not required, step: after you enable the theme take a screenshot, resize it to a width of 300 pixels (height not important) and save it with the name “screenshot”. The extension can be either gif, jpg or png; maybe more but I haven’t tried.
This is the end of the tutorial. If you think it needs improvement please contact me with your suggestions!