Wordpress Theme Development Cheatsheet

There are some flaws in certain snippets (e.g. the comments-template). Sorry about that. Can still be used as a quick reference.

The beginning: CSS-file (theme details)

/*
Theme Name: Twenty Ten
Theme URI: http://wordpress.org/
Description: The 2010 default theme for WordPress.
Author: wordpressdotorg
Author URI: http://wordpress.org/
Version: 1.0
Tags: black, blue, white, two-columns, fixed-width, custom-header, custom-background, threaded-comments, sticky-post, translation-ready, microformats, rtl-language-support, editor-style, custom-menu (optional)

License:
License URI:

General comments (optional).
*/

Base for index.php

<!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
	
	<meta charset="<?php bloginfo('charset'); ?>" />
	
	<title><?php wp_title(); ?> <?php bloginfo('name'); ?></title>
	
	<link rel="stylesheet" type="text/css" media="screen" href="<?php echo get_stylesheet_uri(); ?>" />
	<link rel="stylesheet" type="text/css" media="screen" href="<?php echo get_stylesheet_directory_uri(); ?>/custom-styles.css" />
	
	<link rel="profile" href="http://gmpg.org/xfn/11" />
	<link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" />
	<?php if(is_singular() && get_option('thread_comments')) wp_enqueue_script('comment-reply'); ?>
	
	<?php wp_head(); ?>
	
</head>
<body>
	
	<!-- ... -->
	
	<?php wp_footer(); ?>
	
</body>
</html>

Post loop

<?php if(have_posts()): while(have_posts()): the_post(); ?>
	
	<div <?php post_class(); ?>>
		
		<?php
		//Post thumbnails need this in functions.php: `add_theme_support('post-thumbnails');`
		if(has_post_thumbnail()) the_post_thumbnail(array(100,100));
		?>
		
		<h2 id="post-<?php the_ID(); ?>">
			<a href="<?php the_permalink(); ?>" title="Permanent link to <?php the_title(); ?>"><?php the_title(); ?></a>
		</h2>
		
		<div class="post-metadata">
			<p>Posted on <?php the_time('F jS, Y'); ?> by <?php the_author(); ?> in <?php the_category(', '); ?></p>
			<p><?php edit_post_link('Edit','','|'); ?> <?php comments_popup_link('No Comments &raquo;', '1 Comment &raquo;', '% Comments &raquo;'); ?></p>
		</div>
		
		<div class="post-content">
			<?php the_content('Read the rest of this entry &raquo;'); ?>
			<?php /* the_excerpt(); */ ?>
		</div>
		
		<div class="post-tags">
			<?php the_tags(); ?>
		</div>
		
	</div>
	
<?php endwhile; ?>
	
	<div class="post-navigation">
		<div><?php posts_nav_link('', 'Next Entries &raquo;', ''); ?></div>
		<div><?php posts_nav_link('', '', '&laquo; Previous Entries'); ?></div>
	</div>
	
<?php else: ?>
	<!-- No posts found -->
<?php endif; ?>

Loading jQuery, etc.

<?php

/* Call this before `wp_head` */
wp_enqueue_script('jquery');

?>

<!-- Add custom JavaScript from theme directory -->
<script type="text/javascript" src="<?php echo get_template_directory_uri(); ?>/custom-javascript.js"></script>

Adding custom sidebars

<?php

if(function_exists('register_sidebar')) {
	register_sidebar(array(
		'name' => 'Left Sidebar',
		'id' => 'left-sidebar',
		'description' => 'This is a widgetized area.'
	));
}

?>

<?php if(function_exists('dynamic_sidebar') && dynamic_sidebar('left-sidebar')): else: ?>
	<!-- Show default sidebar -->
<?php endif; ?>

Adding custom menus

<?php

//Not needed, but in case: add_theme_support('menus');

add_action('init', 'register_custom_menus');

function register_custom_menus() {
	register_nav_menus(array(
		'footer-links' => 'Footer Links'
	));
}

/* Only <li>'s */
wp_nav_menu(array(
	'theme_location' => 'footer-links',
	'container' => '',
	'items_wrap' => '%3$s'
));

?>

A basic comments template

<?php if('comments.php'==basename($_SERVER['SCRIPT_FILENAME'])) die('Please do not load this page directly. Thanks!'); ?>

<?php if(!empty($post->post_password) && $_COOKIE['wp-postpass_'.COOKIEHASH]!=$post->post_password): ?> 
	<!-- Comments are password-protected -->
<?php else: ?>
	<?php if(have_comments()): ?>
		<h1><?php comments_number('No comments', 'One comment', '% comments'); ?></h1>
		<?php wp_list_comments('type=comment&callback=custom_comment_callback'); ?>
	<?php endif; ?>
<?php endif; ?>

<?php

function custom_comment_callback($comment, $args, $depth) {
	$GLOBALS['comment'] = $comment;
	$GLOBALS['comment_depth'] = $depth;
	?>
	
	<?php $author_comment = ''; if($comment->user_id == 1) $author_comment = 'author-comment'; } ?>
	
	<li id="comment-<?php comment_ID(); ?>" <?php comment_class($author_comment); ?>>
		
		<?php echo get_avatar($comment->comment_author_email, '96', 'path_to_default'); ?>
		
		<div class="comment-metadata">
			<span class="comment-author"><?php comment_author_link(); ?></span>
			<span class="comment-date"><?php comment_date(); ?></span>
		</div>
		
		<?php if($comment->comment_approved == '0'): ?>
			<div class="unapproved">
				Your comment is awaiting moderation
			</div>
		<?php endif; ?>
		
		<div class="comment-content">
			<?php comment_text(); ?>
		</div>
		
		<?php
		comment_reply_link(array_merge($args, array(
			'reply_text' => 'Reply',
			'login_text' => 'Log in to reply',
			'depth' => $depth
		)));
		?>
		
	</li>
	
	<?php
}

?>

Post author info box

<div class="post-author">
	<?php echo get_avatar(get_the_author_email(), '96', 'path_to_default'); ?>
	<div class="post-author-name"><?php the_author_meta('display_name'); ?></div>
	<div class="post-author-description"><?php the_author_meta('user_description'); ?></div>
</div>

Custom page templates

<?php
/*
Template Name: Kitten Template
*/

//...

?>

Custom fields

<?php

/* Return an array */
echo '<ul>';
foreach(get_post_meta($post->ID, 'sources', false) as $source) {
	echo '<li><a href="'.$source.'">'.$source.'</a></li>';
}
echo '</ul>';

/* Return a string */
echo get_post_meta($post->ID, 'copyrights', true);

//Check "Custom form fields" below for adding custom fields to edit-page

?>

Custom post types

<?php

/* A minimal example, in which a post type "Movie" is created. */

add_action('init', 'register_movie_post_type');

function register_movie_post_type() {
	
	register_post_type('movie',array(
		'labels' => array(
			'name' => _x('Movies', 'post type general name'),
			'singular_name' => _x('Movie', 'post type singular name')
		),
		'public' => true,
		'menu_icon' => get_stylesheet_directory_uri().'img/movie_icon.png'
	));
	
	register_taxonomy('genres', array('movie'), array(
		'label' => 'Genres',
		'singular_label' => 'Genre',
		'hierarchical' => true,
		'rewrite' => true
	));
	
}

//Check "Custom form fields" below for adding custom fields to edit-page

?>

Custom form inputs while editing post

<?php

/* This code adds a custom input to WP admin, when adding/editing a post */

add_action('admin_init', 'register_copyrights_field');

function register_copyrights_field() {
	add_meta_box('copyrights_meta', 'Post Copyrights', 'copyrights_callback', '[post_type]', 'normal', 'low');
}

function copyrights_callback() {
	global $post;
	$custom = get_post_custom($post->ID);
	$old_value = $custom['copyrights'][0];
	echo '<label>Post Copyrights:</label> <input name="post_copyrights" value="'.$old_value.'" />';
}

add_action('save_post', 'save_copyrights_meta');

function save_copyrights_meta() {
	global $post;
	update_post_meta($post->ID, 'copyrights', $_POST['post_copyrights']);
}

?>

List pages, categories, archives, etc.

<?php

/* Only list-items (no wrapping <ul>) */
wp_list_pages('title_li=');
wp_list_categories('title_li=');
wp_get_archives('type=monthly');

?>

Custom search form

<?php /* This is the the very barebones version of WordPress search form */ ?>
<form method="get" action="<?php echo home_url('/'); ?>">
	<input type="text" name="s" />
</form>

Wordpress theme development

Cheatsheet