WP Tutorial: 1.5 theme cheat sheet
With WordPress 1.5.1.2 out now, there are a lot of people still confused with the new theme system in WP 1.5. Here's a quick cheat sheet to use when designing a new theme.
Note: This cheat sheet will only help you with the actual code and where it should go. It contains only the bare minimum for creating a new WP theme. It assumes that you understand xhtml and the basics of creating a website layout. It does not offer any CSS styles, so don't come crying to me because your lists don't look like you want them to. Take that up with W3C.
First, complete your xhtml layout like you would for any other website. Make sure you leave room for your title, sidebar, and content/posts. Save your layout as index.php.
Next, copy and paste the following snippets of code into the appropriate slots in your layout...
(note: copy and paste into a text editor - if you paste into a word processor/rich text editor, I'll only say "I told you so" when it copies all my acronyms and auto links in the code boxes below)
Header - replace your header (everything above the opening <body> tag) with the following:
<!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 profile="http://gmpg.org/xfn/11"> <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> <meta name="generator" content="WordPress <?php bloginfo('version'); ?>" /> <!-- leave this for stats --> <link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" media="screen" /> <link rel="alternate" type="application/rss+xml" title="RSS 2.0" href="<?php bloginfo('rss2_url'); ?>" /> <link rel="alternate" type="text/xml" title="RSS .92" href="<?php bloginfo('rss_url'); ?>" /> <link rel="alternate" type="application/atom+xml" title="Atom 0.3" href="<?php bloginfo('atom_url'); ?>" /> <link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" /> <?php wp_get_archives('type=monthly&format=link'); ?> <?php wp_head(); ?> </head>
Sidebar - plug in this snippet where you want your sidebar to appear:
<ul>
<!-- START PAGES LIST -->
<?php wp_list_pages(); ?>
<!-- END PAGES LIST -->
<!-- START CATEGORIES -->
<li id="categories"><h2><?php _e('Categories:'); ?></h2>
<ul>
<?php wp_list_cats(); ?>
</ul>
</li>
<!-- END CATEGORIES -->
<!-- START SEARCH -->
<li id="search"><h2><?php _e('Search:'); ?></h2>
<ul>
<li>
<form id="searchform" method="get" action="<?php echo $_SERVER['PHP_SELF']; ?>">
<div>
<input type="text" name="s" id="s" size="15" /><br />
<input type="submit" value="<?php _e('Search'); ?>" />
</div>
</form>
</li>
</ul>
</li>
<!-- END SEARCH -->
<!-- START ARCHIVES -->
<li id="archives"><h2><?php _e('Archives:'); ?></h2>
<ul>
<?php wp_get_archives('type=monthly'); ?>
</ul>
</li>
<!-- END ARCHIVES -->
<!-- START META -->
<li id="meta"><h2><?php _e('Meta:'); ?></h2>
<ul>
<?php wp_register(); ?>
<li><?php wp_loginout(); ?></li>
<li><a href="feed:<?php bloginfo('rss2_url'); ?>" title="<?php _e('Syndicate this site using RSS'); ?>"><?php _e('<abbr title="Really Simple Syndication">RSS</abbr>'); ?></a></li>
<li><a href="feed:<?php bloginfo('comments_rss2_url'); ?>" title="<?php _e('The latest comments to all posts in RSS'); ?>"><?php _e('Comments <abbr title="Really Simple Syndication">RSS</abbr>'); ?></a></li>
<li><a href="http://validator.w3.org/check/referer" title="<?php _e('This page validates as XHTML 1.0 Transitional'); ?>"><?php _e('Valid <abbr title="eXtensible HyperText Markup Language">XHTML</abbr>'); ?></a></li>
<li><a href="http://gmpg.org/xfn/"><abbr title="XHTML Friends Network">XFN</abbr></a></li>
<li><a href="http://wordpress.org/" title="<?php _e('Powered by WordPress, state-of-the-art semantic personal publishing platform.'); ?>"><abbr title="WordPress">WP</abbr></a></li>
<?php wp_meta(); /* do not remove this line */ ?>
</ul>
</li>
<!-- END META -->
<!-- START LINKS LIST -->
<?php get_links_list(); ?>
<!-- END LINKS LIST -->
</ul>
Content - add this where you want your main content/posts to show up (based on kubrick):
<?php if (have_posts()) : ?>
<?php while (have_posts()) : the_post(); ?>
<div class="post" id="post-<?php the_ID(); ?>">
<h2><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title(); ?>"><?php the_title(); ?></a></h2>
<small><?php the_time('F jS, Y') ?> <!-- by <?php the_author() ?> --></small>
<div class="entry">
<?php the_content('Read the rest of this entry »'); ?>
</div>
<p class="postmetadata">Posted in <?php the_category(', ') ?> <strong>|</strong> <?php edit_post_link('Edit','','<strong>|</strong>'); ?> <?php comments_popup_link('No Comments »', '1 Comment »', '% Comments »'); ?></p>
</div>
<?php comments_template(); ?>
<?php endwhile; ?>
<p align="center"><?php next_posts_link('« Previous Entries') ?> <?php previous_posts_link('Next Entries »') ?></p>
<?php else : ?>
<h2 align="center">Not Found</h2>
<p align="center">Sorry, but you are looking for something that isn't here.</p>
<?php endif; ?>
Footer - add this to the very bottom of your layout, just above the closing </body> tag:
<?php do_action('wp_footer'); ?>
Theme info in CSS - insert this at the very top of your style.css file (WP uses this to define your theme in the Presentation menu):
/* Theme Name: Your Them Name Theme URI: http://your_url.com/ Description: Your theme description Version: Version number Author: Your Name */
Comments - save the following as comments.php:
<?php if ( !empty($post->post_password) && $_COOKIE['wp-postpass_' . COOKIEHASH] != $post->post_password) : ?>
<p><?php _e('Enter your password to view comments.'); ?></p>
<?php return; endif; ?>
<h2 id="comments"><?php comments_number(__('No Comments'), __('1 Comment'), __('% Comments')); ?>
<?php if ( comments_open() ) : ?>
<a href="#postcomment" title="<?php _e("Leave a comment"); ?>">»</a>
<?php endif; ?>
</h2>
<?php if ( $comments ) : ?>
<ol id="commentlist">
<?php foreach ($comments as $comment) : ?>
<li id="comment-<?php comment_ID() ?>">
<?php comment_text() ?>
<p><cite><?php comment_type(__('Comment'), __('Trackback'), __('Pingback')); ?> <?php _e('by'); ?> <?php comment_author_link() ?> — <?php comment_date() ?> @ <a href="#comment-<?php comment_ID() ?>"><?php comment_time() ?></a></cite> <?php edit_comment_link(__("Edit This"), ' |'); ?></p>
</li>
<?php endforeach; ?>
</ol>
<?php else : // If there are no comments yet ?>
<p><?php _e('No comments yet.'); ?></p>
<?php endif; ?>
<p><?php comments_rss_link(__('Comments <abbr title="Really Simple Syndication">RSS</abbr>')); ?>
<?php if ( pings_open() ) : ?>
<a href="<?php trackback_url() ?>" rel="trackback"><?php _e('TrackBack <abbr title="Uniform Resource Identifier">URI</abbr>'); ?></a>
<?php endif; ?>
</p>
<?php if ( comments_open() ) : ?>
<h2 id="postcomment"><?php _e('Leave a comment'); ?></h2>
<?php if ( get_option('comment_registration') && !$user_ID ) : ?>
<p>You must be <a href="<?php echo get_option('siteurl'); ?>/wp-login.php?redirect_to=<?php the_permalink(); ?>">logged in</a> to post a comment.</p>
<?php else : ?>
<form action="<?php echo get_option('siteurl'); ?>/wp-comments-post.php" method="post" id="commentform">
<?php if ( $user_ID ) : ?>
<p>Logged in as <a href="<?php echo get_option('siteurl'); ?>/wp-admin/profile.php"><?php echo $user_identity; ?></a>. <a href="<?php echo get_option('siteurl'); ?>/wp-login.php?action=logout" title="<?php _e('Log out of this account') ?>">Logout »</a></p>
<?php else : ?>
<p><input type="text" name="author" id="author" value="<?php echo $comment_author; ?>" size="22" tabindex="1" />
<label for="author"><small>Name <?php if ($req) _e('(required)'); ?></small></label></p>
<p><input type="text" name="email" id="email" value="<?php echo $comment_author_email; ?>" size="22" tabindex="2" />
<label for="email"><small>Mail (will not be published) <?php if ($req) _e('(required)'); ?></small></label></p>
<p><input type="text" name="url" id="url" value="<?php echo $comment_author_url; ?>" size="22" tabindex="3" />
<label for="url"><small>Website</small></label></p>
<?php endif; ?>
<!--<p><small><strong>XHTML:</strong> You can use these tags: <?php echo allowed_tags(); ?></small></p>-->
<p><textarea name="comment" id="comment" cols="100%" rows="10" tabindex="4"></textarea></p>
<p><input name="submit" type="submit" id="submit" tabindex="5" value="Submit Comment" />
<input type="hidden" name="comment_post_ID" value="<?php echo $id; ?>" />
</p>
<?php do_action('comment_form', $post->ID); ?>
</form>
<?php endif; // If registration required and not logged in ?>
<?php else : // Comments are closed ?>
<p><?php _e('Sorry, the comment form is closed at this time.'); ?></p>
<?php endif; ?>
Once you finish, save your layout (index.php) and your stylesheet (style.css). If you reference any images in the layout, make sure to use the template_directory code below. Put all of your files one main folder - make sure index.php and style.css are in the main folder (your theme folder). Images and scripts can go anywhere within that folder/subfolder.
You should have:
- ./your-theme
- style.css
- index.php
- comments.php
- ./images
- all your images
Upload that folder to your ./wp-content/themes directory. Activate your theme.
Of course, when you get more comfortable with php and theming, you can split the files up, including separate header, footer, and sidebar files, and adding different templates for pages, archives, and more. This makes for easy sectioning, and editing of your theme.
When you get more comfortable with php, and the parts of the theme, visit the WP Codex and take a look at the Template Tags to customize the output of your blog content.
Other pieces of code that you may or may not want to include where appropriate:
<?php bloginfo('url'); ?>
/* calls the url of the blog
use this in your a href="" */
<?php bloginfo('name'); ?>
/* displays the blog name */
<?php bloginfo('description'); ?>
/* displays the blog tagline/description */
<?php bloginfo('template_directory'); ?>
/* used for referencing images in your layout */
Putting it together:
<a href="<?php bloginfo('url'); ?>">
<img src="<?php bloginfo('template_directory'); ?>/images/header.jpg" width="700" height="200" alt="<?php bloginfo('name'); ?>" />
</a>
<p><?php bloginfo('description'); ?></p>
comments