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:

forager.zip

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

WordPress.Theme.iPirateMinimal.zip

First Week: header.php and style.css

header.php

<!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" />
 
</head>
<body>
    <!-- Begin container -->
    <div id="container">
		<!-- Begin Navigation -->
		<div id="navigation">
			<ul>
            	<?php wp_list_pages('post_title&depth=1&title_li=&link_after='); ?>
			</ul>   
		</div> 
		<!-- End Navigation -->
		<div id="main"><!-- Begin Main -->
            <!-- Begin Logo -->
            <div id="logo">
                <h1>
                    <span>
                        <?php bloginfo('name'); ?>
                    </span>
                    <a href="<?php echo get_option('home'); ?>/">
                    	<img src="<?php bloginfo('template_directory'); ?>/images/logo.gif" alt="<?php bloginfo('name'); ?>" />
                    </a>
                </h1>
            </div>
            <!-- End Logo -->
            <!-- Begin Tagline -->
            <div id="tagline">
                <p><?php bloginfo('description'); ?></p>
            </div>
            <!-- End Tagline -->
            <!-- START MIDDLE -->
            <div id="middle">

style.css

http://zephir.seattlecentral.edu/~aeivy/wordpress/wp-content/themes/forager/style.css

Leave a Reply

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

Web Development Courses, Rants, Tutorials and Hacks