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.

The Accidental Blogging Millionaires

The Accidental Blogging Millionaires

Get Inspired By The Most Popular Bloggers Online! If You Want To Skyrocket Your Success With Business And Improve Your Overall Life You Need To Have A Look At The Accidental Blogging Millionaires! Business can be a fight, particularly when you’re trying to establish one online and like all fights, to succeed you must find the winning techniques and apply them.

Get My Free Ebook

Post a comment