Week 6: HTML -> WP Theme

Converting an XHTML/CSS site into a WordPress Theme

Our T.A., Raven, has generously volunteered one of his sites to be converted into a WordPress theme. You may download the zipped up files for the site design here:


We will be using the iPirateMinimal WordPress theme as our base–for all the WordPress PHP :)


First Week: header.php and style.css


<!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"><head>
	<head profile="http://gmpg.org/xfn/11">
	<meta http-equiv="Content-Type" content="<?php bloginfo('html_type'); ?>; charset=<?php bloginfo('charset'); ?>" />
	<title><?php wp_title(); ?> | <?php bloginfo('name'); ?> - <?php bloginfo('description'); ?> |</title>
	<meta name="generator" content="WordPress <?php bloginfo('version'); ?>" /> <!-- leave this for stats -->
    <link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" media="all" />
	<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'); ?>" />
    <link rel="shortcut icon" href="wp-content/themes/forager/favicon.ico" />
    <!-- Begin container -->
    <div id="container">
		<!-- Begin Navigation -->
		<div id="navigation">
            	<?php wp_list_pages('post_title&depth=1&title_li=&link_after='); ?>
		<!-- End Navigation -->
		<div id="main"><!-- Begin Main -->
            <!-- Begin Logo -->
            <div id="logo">
                        <?php bloginfo('name'); ?>
                    <a href="<?php echo get_option('home'); ?>/">
                    	<img src="<?php bloginfo('template_directory'); ?>/images/logo.gif" alt="<?php bloginfo('name'); ?>" />
            <!-- End Logo -->
            <!-- Begin Tagline -->
            <div id="tagline">
                <p><?php bloginfo('description'); ?></p>
            <!-- End Tagline -->
            <!-- START MIDDLE -->
            <div id="middle">



Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Web Development Courses, Rants, Tutorials and Hacks