Turning HTML into a Theme

WordPress theme files are basically HTML pages with some strategically placed, WordPress-specific PHP functions. While some PHP developers criticize the mingling of languages, preferring a strict separation of logic and layout, the WordPress system is flexible and easy to learn, once you figure out the Loop, which I'll go over in a bit.

A theme is a collection of files in a directory, which will be stored in wp-content/themes in the WordPress directory (unless you have changed this location in wp-config.php). The directory must contain at least two files: style.css, with a header containing some information about the theme, and index.php. There are a number of other optional files that can be used to vary the site's appearance throughout its various sections: archives, pages, search results, and so on.

The best way to demonstrate how a theme file works is to start with a familiar HTML page and show you the tags required to transform it into a WordPress theme file. Listing 6-2 shows the simple XHTML template you'll turn into a theme.

Listing 6-2. A basic XHTML file

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-US"> <head>

<title>My Site</title>

<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8" />

<meta name="description" content="A site about foo." /> <link rel="stylesheet" href="style.css" type="text/css" /> </head> <body>

<div id="header"> <h1>My Site</h1> </div> <!-- #header -->

<div id="main"> <h2>Foo.</h2>

<p>Lorem ipsum dolor sit amet, consectetaur adipisicing elit, sed do tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea consequat.</p> </div> <!-- #main -->

<li><a href="#">Page <li><a href="#">Page <li><a href="#">Page </ul>

<p>&copy; 2010 My Site.</p> </div> <!-- #footer -- >

The changes are noted in bold in Listing 6-3.

Listing6-3. The WordPress equivalent

One</a></li> Two</a></li> Three</a></li>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" <?php language_attributes(); ?>> <head>

<title><?php bloginfo('name'); ?><?php wp_title(); ?></title>

<meta http-equiv="Content-Type" content="text/html; charset="<?php bloginfo('charset'); ?>" /> <meta name="generator" content="WordPress <?php bloginfo('version'); ?>" /> <!-- leave this for stats -->

<meta name="description" content="<?php bloginfo('description'); ?>" /> <link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" /> <link rel="alternate" type="application/rss+xml" title="RSS Feed" href="<?php bloginfo('rss2_url'); ?>" />

<link rel="alternate" type="application/atom+xml" title="Atom Feed" href="<?php bloginfo('atom url'); ?>" />

<link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" /> <?php wp_head(); ?>

<h1><?php bloginfo('name'); ?></h1>

</div> <!-- #header -- > <div id="main">

<?php if (have posts()) : while (have posts()) : the post(); ?> <h2 id="post-<?php the_ID(); ?>" class="<?php post_class(); ?>">

<a href="<?php the permalink() ?>" rel="bookmark" title="Permanent link to <?php the title attribute(); ?>"><?php the title(); ?></a>

<?php the_content(); ?> <?php wp_link_pages(); ?> <div class="commentblock">

<?php comments_template(); ?> </div><!--commentblock--> <?php endwhile; ?> <div class="navigation">

<div class="alignleft"><?php posts_nav_link(); ?></div> <div class="clear"><!-- --></div> </div><!-- .navigation --> <?php else: ?> <h2>Not Found</h2>

<p>The posts you were looking for could not be found.</p> <?php endif; ?>

<div id="sidebar">

<?php if ( !dynamic_sidebar('Sidebar') ) : endif; ?>

</div> <!-- #sidebar -- > <div id="footer">

<p>&copy; <?php echo date('Y '); bloginfo('name'); ?></p>

</div> <!-- #footer -- > <?php wp_footer(); ?>

I'll go over each section in turn.

Newbies Guide To Online Hobby Profits

Newbies Guide To Online Hobby Profits

Many people are passionate about their hobbies. They make time in their lives for them, spend lot of money on them, and even sometimes move their homes, families and jobs just to be closer to their hobbies. But even if you just enjoy your hobby and perhaps wouldn't class yourself as a fanatic, wouldn't it be great if you could earn money online possibly even a full-time income, from simply telling others people about your passion?

Get My Free Ebook

Post a comment