• /images
• /includes
  • header.php – HTML5 shim, js FOUC fix, conditional body classes for styling versions of IE, page title variable
  • footer.php – jQuery, media queries shim, Google Analytics
  • mobile_detect.php – PHP class to detect mobile devices, for responsive design
• /js
  • script.js – jQuery
• /styles
  • styles.css – CSS reset and some basic styles, practical media queries for a mobile first approach, print styles
• index.php – Page title and active page variables, includes
• subpage.php – Page title and active page variables, includes
• ReadMe (pdf)

This kit will be updated periodically. Please keep an eye out for updates!

Changelog

• Apr. 20, 2012 – updated to v1.3.3: edited the viewport meta to permit user scaling, added caution regarding the use of mobile detection PHP class, deleted comprehensive media queries examples, edited existing media queries to use a mobile-first approach
  
• Feb. 9, 2012 – updated to v.1.3.2: added mobile detection PHP class, tweaked media queries for more consistent rendering
• Feb. 7, 2012 – updated to v.1.3.1: removed nav.php and integrated into header, integrated a few select practical media queries and print styles into main stylesheet to reduce HTTP requests, updated jQuery version to 1.7.x, minor code clean-up

If PHP isn’t your thing, the plain HTML version of the kit can be downloaded at KM Front-End Kit v1.3.

Change the Author Contact Methods

The first thing we’ll do is update the author contact methods. These are fields that are filled in by the user in their User Profile in the back end. By default, they include the user’s e-mail (required), website, AIM, Yahoo IM, and Jabber/Google Talk. For this example, I’m going to replace AIM, YIM, and Jabber with Facebook, Twitter, Google+, and LinkedIn, but you can use whichever networks you’d prefer.

Open your theme’s functions.php file and add the following:

// Update Author Contact Info
function change_contact_info($contactmethods) {
	unset($contactmethods['aim']);
	unset($contactmethods['yim']);
	unset($contactmethods['jabber']);
	$contactmethods['facebook'] = 'Facebook URL';
	$contactmethods['googleplus'] = 'Google+ URL';
	$contactmethods['twitter'] = 'Twitter Username';
	$contactmethods['linkedin'] = 'LinkedIn Username';

	return $contactmethods;
}
add_filter('user_contactmethods', 'change_contact_info');

Note that I am prompting the user for full URIs for Facebook and Google+ versus usernames for twitter and LinkedIn. This is done because of the way these networks currently format their users’ profile URIs.

Some Facebook users have set a pretty URI, but some have not: therefore, we cannot rely on this always being the case, so to be safe, we’re asking for the full URI. This also allows flexibility for people to provide links to FB pages rather than strictly user profiles.

Google+ uses a numerical ID, but since this is a very long string of numbers, it’s probably easier for users to simply copy and paste the entire URI. In addition, they now also have the option to use the links provided by short URL services like gplus.to if they’ve chosen to set something like that up.

It’s important to make note of this because it will affect how you need to display the author meta information in your theme files.

Create an Author Bio template part

Now we want to take the author meta information and display it on a per-post basis. To do this, we’ll create a template part, aka WordPress’s tag for a PHP include.

Create a new PHP file in your theme and name it bio-author.php. This can be called something else if you prefer, but I named it thusly to make sure it isn’t going to interfere with the naming schemes of any of the other theme files.

Note: Do not name your template part author-bio.php! This will cause WordPress to interpret the file as the Author page for a user with the nicename “Bio”. If you need a refresher on how the WordPress theme hierarchy works, take a look at the WordPress Template Hierarchy Map cheat sheet.

In your bio-author.php file, write the code to display the author bio you want to include on each post.

<div id="author-bio" class="author-bio">
	<?php echo get_avatar( get_the_author_meta('ID'), 80 ); ?>
	<p class="author-name">
		Author: <strong><?php the_author_posts_link(); ?></strong>
		<?php if (get_the_author_meta('user_url')) {
			echo '| <a href="' . get_the_author_meta('user_url') . '">website</a>';
		}
		if (get_the_author_meta('twitter')) {
			echo '| <a href="http://twitter.com/' . get_the_author_meta('twitter') . '">twitter</a>';
		} ?>
	</p>
	<p class="author-description"><?php the_author_meta(user_description); ?></p>
</div>

The above code will print the author’s Gravatar and public display name with a link to their author page. If the user has filled in a website URL and twitter username, it will display these with links, separated by pipes. It then displays the user’s description.

You can edit this code to display other parts of the author meta by using the the_author_meta() template tag (displays the information) and the get_the_author_meta() function (returns the information but does not display it, useful for creating links to the new contact methods we set up).

Include the template part on single posts

We’re now ready to include the author bio with our posts. Go to your single.php and/or single-{post-type}.php file(s) and place the template part where you’d like the bio to be included:

<?php get_template_part('bio','author'); ?>

Note: This must be placed inside the loop, otherwise it will not know who the author is and will not work. I like to place it between the post content and the comments.

As you can see, the get_template_part() function works by using the parts of the hyphenated file name to include the appropriate file. You can see how this would be useful if you group your theme’s template parts by related pieces (this can be seen in action in the default WordPress TwentyEleven theme as well as my HTML5 Blank Theme).

Finally, use your theme’s styles.css to style the author bio appropriately.

One more thing: Author Pages

If your theme does not have an Author template (author.php), you should look into creating one. The Author Templates entry in the WordPress Codex will help you get started. You can also ensure that an author’s custom post types are listed on their page by using the method here: WP Authors Custom Post Types.

The simple, classic way of handling login / log out links in WordPress is to place the following code where you want the link to appear:

<?php wp_loginout(); ?>

This generates a “Log in” link when the user is logged out, and a “Logout” link when the user is logged in. The “Log in” link redirects to the dashboard once the user has inputted their username and password successfully, and the “Log out” link redirects to the Login screen.

Redirect login / log out

The wp_loginout() function accepts a $redirect parameter that can send the user to a location other than the defaults.

To send the user to a specific page upon logging in or out, specify a redirect:

<?php wp_loginout( site_url() ); ?>

The above code sends the user to your site (site_url() for home, or use site_url(‘/mypage’) for a page of your site) after they’ve been logged in or out. You can also use an absolute URL in quotes. You may even use get_permalink() to send them to the “current” page they logged in or out from.

Redirect login and log out separately

You can also set different redirects for your login and log out links using the is_user_logged_in() function along with wp_login_url() and wp_logout_url().

is_user_logged_in() is a boolean that returns a true/false value. Therefore, we can use it to hide or display login / log out / admin links. Here is an example of how this is used:

<?php if (is_user_logged_in()) { ?>
	<!-- User is logged in: show Admin and Log out link -->
<?php } else { ?>
	<!-- User is logged out: show Log in link -->
<?php } ?>

To use is_user_logged_in() to show an admin and log out link to a user if they are logged in and a login link only if the user is not logged in:

<ul>
	<?php if (is_user_logged_in()) { ?>
		<li><a href="<?php home_url(); ?>/wp-admin">Admin</a></li>
		<li><a href="<?php echo wp_logout_url( site_url() ); ?>">Log out</a></li>
	<?php } else { ?>
		<li><a href="<?php echo wp_login_url( get_permalink() ); ?>">Log in</a></li>
	<?php } ?>
</ul>

The log in redirects back to the current page, whereas the log out link redirects to the home page. This is the method I personally prefer. As shown above, this link can be a WordPress tag or it can be an absolute URI (including http://). Relative URIs will not work.

This is a beginner’s introduction to the functions.php file in WordPress themes. You do not need experience in PHP to follow along, though you should have solid knowledge of HTML/CSS and be familiar with using WordPress.

What is functions.php?

The WordPress functions.php file is located in your theme’s directory (/wp-content/themes/your-theme/functions.php). The functions file is essentially a within-theme plugin. It is run during WordPress initialization on both the front and back ends, therefore enabling you to add features and customization specific to your theme.

WordPress contains numerous functions that you can take advantage of or alter / filter in your theme. You may, of course, also create your own functions in the functions.php file.

If you are relatively new to PHP and WordPress, it’s best to start with function snippets that have been written by other WordPress developers before you attempt to write your own custom functions. There are many commonly-used functions that should cover nearly all of your basic needs for theme customization. When you’ve thoroughly familiarized yourself with WordPress and learned some PHP, then you can tackle writing your own functions and plugins for more advanced customization.

Plugin or functions.php?

The key difference between putting your code in the functions.php file as opposed to writing a plugin is that plugins are independent from themes. If you are writing in features that are closely tied to other theme files (such as specially-styled post formats, for example), you should use functions.php. This way, the feature, its styles, and its code come packaged with your theme.

The advantage to plugins, alternately, is that they can be activated and deactivated on the fly, and will be persistent when the user changes themes. They can have their own outputted code and styles, all contained within the plugin files, which will be applied, regardless of theme.

It is a judgment call on what route is more appropriate for your needs. However, it is generally accepted that post thumbnails, post formats, custom comment callbacks, and similar theme-related features should be in the functions.php file.

Writing functions.php from scratch

If you are writing a functions file from scratch, create a new .php file in your theme’s directory and call it functions.php.

PHP 101: PHP scripts need to be contained within PHP delimiters, because although the server knows to look for PHP script in a .php file, these files can also contain non-PHP elements. Anything outside PHP delimiters will be interpreted as plain text or HTML.

All functions should go between the delimiters, like so:

<?php
	// all functions will go here
?>

Note: When you are searching online for functions, some sites and blogs will include the delimiters. Others will leave them off, assuming that you know to include them at the beginning and end of the file.

“Must-have” Features

Here are a few features (as of WordPress 3.3, aka “Sonny”) that every theme should seriously consider supporting.

Note: You will want to check if the function exists first for newer features, in case the installation of WordPress is older and doesn’t support the feature yet. This is done by enclosing the function in if (function_exists()) { … } (see examples below).

Menus

“Menus” are dynamic areas that users can populate with pages, posts, archives, etc. of their choosing via settings (Appearance / Menus on the back end). They are created using the register_nav_menus() function.

PHP 101: You can have more than one menu area if you wish, so the function supports an array. Arrays are PHP datatypes that can store multiple pieces of information.

WP workings: If you only want one menu, you can still set up the function the same way. Use an array, but only include one menu in it. Alternately: there is a function in WordPress that generates a single menu (register_nav_menu()), with a shortened format. However, behind the scenes it is actually still using the register_nav_menus() array with only one value. Therefore, it is up to you which option you choose: the outcome is still the same.

You will need to name your menus appropriately, because these names will show up on the back end as customizable areas.

// Register menus
if ( function_exists( 'register_nav_menus' ) ) {
	register_nav_menus( array(
		'primary' => __( 'Primary Navigation' ),
		'secondary' => __( 'Secondary Navigation' )
	));
}

PHP 101: The __( $string ) format is an international translation aid. If you were to leave it off and put something like ‘primary’ => ‘Primary Navigation’ instead, the text would print exactly as it is, even if the WordPress installation’s language was changed.

To display menus on the front end, you would place the following in your theme file:

<?php wp_nav_menu( array('menu' => 'Primary Navigation' )); ?>

By default, this outputs a container div with a class of “menu-{menu-slug}-container”, a ul tag with a class of “menu”, and then encloses each item inside the menu in li tags with additional classes generated by WP.

This is robust HTML output that is easily customizable with CSS, but if you wish to change the way this code is outputted, you should consult the wp_nav_menu() function reference.

Dynamic Sidebar

Dynamic sidebars support “widgets”. Widgets are chunks of content, interaction, etc. that can be customized by dragging and dropping into dynamic sidebar areas on the back end. WordPress comes packaged with some of its own widgets (such as tag clouds, post categories, etc.) and many plugins also provide widgets.

// Add support for dynamic sidebar
if (function_exists('register_sidebar')) {
	register_sidebar(array(
		'name' => 'Navigation'
	));
}

You may register additional sidebars by repeating the register_sidebar() function and assigning different names. (More information on the register_sidebar() array.)

To display sidebars on the front end, place the following code in your sidebar.php file:

<ul>
	<?php dynamic_sidebar('Navigation') ?>
</ul>

You can also place static content that will be loaded if no dynamic content has been placed, or if widgets are inactive. This can be done like so:

<ul>
	<?php if (!function_exists('dynamic_sidebar') || !dynamic_sidebar() ) : ?>
	<li>Static Content</li>
	<?php endif; ?>
</ul>

By default, the sidebar widgets will output a container li with an H2 heading title. You can edit the HTML output by modifying the parameters specified at register_sidebar().

Add Theme Support

Another great use for the functions.php file is adding theme support. The add_theme_support() function allows you to take advantage of some of the optional features WordPress boasts. New WP releases occasionally add new theme features that need to be initialized via the functions.php file if you wish to use them.

Post Thumbnails

Also known as “Featured Images” (this is what the post meta box is titled), post thumbnails are images that “represent” the post and can be displayed in loops. In the past, featured images have been implemented using WordPress’s custom fields capabilities, but now the feature has been built in and can be used via the following functions:

// Add support for Featured Images
if (function_exists('add_theme_support')) {
	add_theme_support('post-thumbnails');
	// (name of the thumbnail, width, height, crop mode)
	set_post_thumbnail_size(150, 100, true);	// Default thumbnail for loop.
	add_image_size('featured-single', 400, 600, false);	// The thumbnail in the single post, linking to the full-size image.
}

// Generate link to full-size image
function get_image_url( $image_id, $image_size ) {
	$image = wp_get_attachment_image_src( $image_id, $image_size );
	return $image[0];
}

With these functions, we have now generated a hard-cropped default post thumbnail (150px x 100px), a soft-proportioned large thumbnail (400px x 600px), and a link to the uploaded full-size image file.

To display featured images on the front end, you can modify a few different theme files depending on where you’d like your featured images to show up.

To display the default post thumbnail with a link to the full post in archive, index, search results, or other queried loops, use the following:

<a href="<?php the_permalink() ?>" title="<?php the_title(); ?>">
	<?php the_post_thumbnail(); ?>
</a>

To display the large thumbnail within a post with a link to view the full-size version, try placing something like this in your single.php file inside the loop, wherever you wish the image to display (normally this is done right above the post content):

<?php if ( has_post_thumbnail() ) :
	$image_id = get_post_thumbnail_id();
	$image_url = get_image_url( $image_id, 'full' );
?>
	<a href="<?php echo $image_url; ?>" title="<?php the_title(); ?> (view larger)"><?php the_post_thumbnail('featured-single'); ?></a>
<?php endif; ?>

Default post thumbnails output with an image class of “attachment-post-thumbnail”. Additional image sizes (like our example “featured-single” image) output with a class of “attachment-{thumbnail-name}”.

Other…

You can also add automatic feed links and post formats with add_theme_support. Most themes benefit from Feed Links, but I feel that Post Formats are a more specialized option and do not qualify as “must-have”s.

Custom Editor Styles

Another exciting new feature is the ability to change the styles of the TinyMCE editor field that WordPress uses to create page and post content. This helps to bridge the gap between what you put into the editor and what you see on your site, making it more of a true “What You See Is What You Get” experience.

To enable this functionality, add the following to your functions.php file:

// Add support for TinyMCE custom editor stylesheet
if (function_exists('add_editor_style')) { add_editor_style( 'editor-style.css' ); }

To display editor styles, you now need to add a stylesheet to your theme’s root folder called editor-style.css. Add any styles that you want to show up in the WYSIWYG editor.

Change the Excerpt [...] to a Permalink

When you use the_excerpt(), content that exceeds the excerpt maximum length will be cut off and replaced with [...]. This is not a link, it is simply an indicator that more content exists.

If you wish to use the_excerpt and would like the [...] converted into a permalink to the full post, you can add the following to your functions.php file:

// Replace excerpt [...] with permalink
function replace_excerpt($content) {
	return str_replace('[...]',
		'<a class="more-link" href="'. get_permalink() .'">read more &raquo;</a>',
			$content
	);
}
add_filter('the_excerpt', 'replace_excerpt');

Custom Comments Callback

By default, WordPress generates the HTML for displaying comments. However, theme-makers frequently wish to modify this code to their own liking. This can be done by adding a custom callback to the wp_list_comments() function.

Add your customized comment HTML to your functions.php file:

// Custom callback for threaded comments to permit HTML editing
function cc_callback($comment, $args, $depth) {
	$GLOBALS['comment'] = $comment; ?>
		<li id="li-comment-<?php comment_ID() ?>" <?php comment_class(); ?>>
			<div id="comment-<?php comment_ID(); ?>" class="the-comment">
			<div class="comment-author vcard">
				<?php echo get_avatar($comment,$size='36',$default='<path_to_url>' ); ?>
				<?php printf(__('<cite class="fn">%s</cite> <span class="says">says:</span>'), get_comment_author_link()) ?>
			</div>

	<?php if ($comment->comment_approved == '0') : ?>
		<em><?php _e('Your comment is awaiting moderation.') ?></em>
		<br />
	<?php endif; ?>

	<div class="comment-meta commentmetadata">
		<a href="<?php echo htmlspecialchars(get_comment_link( $comment->comment_ID )) ?>">
		<?php printf(__('%1$s at %2$s'), get_comment_date(),get_comment_time()) ?></a><?php edit_comment_link( __( '(Edit)' ), ' ' ); ?>
	</div>

	<?php comment_text() ?>

	<?php if($args['max_depth']!=$depth) { ?>
		<div class="reply">
			<?php comment_reply_link(array_merge($args, array('depth' => $depth, 'max_depth' => $args['max_depth']))) ?>
		</div>
	<?php } ?>
	</div>

Edit the HTML to your liking. Do not close the li at the end, as WordPress does this for you to accommodate nested list elements for threaded comments, etc.

To display your custom callback, open your theme’s comments.php file and change wp_list_comments() to use the callback:

<ol class="commentlist">
	<!-- Utilizes a callback to enable customization of comment HTML - see functions.php -->
	<?php wp_list_comments('callback=cc_callback'); ?>
</ol>

Custom Login Logo and Link

This snippet will replace the WordPress login page’s logo with an image you upload to your theme’s /images folder. Keep in mind that the default available dimensions are 326px x 57px, so you will want your logo to be within this size.

// custom admin login logo
function custom_login_logo() {
	echo '<style type="text/css">
		html .login h1 a { background-image: url('.get_template_directory_uri().'/images/custom-login-logo.png); }
	</style>';
}
add_action('login_head', 'custom_login_logo');

Now, the logo will be custom but it’s still linking to wordpress.org. If you’d like to change the URL so that clicking the logo takes you to your site’s homepage, add the following functions:

function custom_login_url() {
  return home_url();
}
add_filter( 'login_headerurl', 'custom_login_url', 10, 4 );

Custom Post Types and Custom Taxonomies

One of the other great things you can do with functions.php is add support for custom post types and custom taxonomies. However, this is an entire topic unto itself, and has been covered in two other posts: Custom Post Types & Taxonomies and Custom Post Types, revisited.

Final Notes

You should avoid modifying WordPress’s core files. The functions.php file should always be used instead. This way, your changes will not affect or compromise the entire installation. When WordPress updates, your changes will not be overwritten.

Browse the web and the WordPress Codex to find out what else you can do with WordPress functions. The possibilities vastly outstrip anything I could even attempt to cover here.

Happy developing!

/*--------------------
      CSS RESET
--------------------*/

/*
HTML5 Reset
Version 1.1
Author: Kim Maida | http://kim-maida.com
Updated: 1-4-2012
*/

html, body, div, span, h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins,
kbd, q, s, samp, small, strike, strong, tt, var, dl, dt,
dd, ol, ul, li, fieldset, form, input, textarea, label, legend, table, caption,
tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
	margin: 0; padding: 0;
	border: 0; outline: 0;
    font-weight: inherit; font-style: inherit; font-family: inherit;
	line-height: 1;
	text-decoration: none;
	vertical-align: baseline;
}

img, input, select { vertical-align: middle; }

ol, ul { list-style: none; }

a,
label,
input[type=button],
input[type=submit],
button { cursor: pointer; }

input, select, textarea { font-family: inherit; }
textarea { overflow: auto; } /* prevents scrollbar from showing up when unneeded in IE */

table {
	border-collapse: collapse;
	border-spacing: 0;
}

caption, th, td { text-align: left; font-weight: normal; }

h1, h2, h3, h4, h5, h6 { font-weight: normal; }

i, em { font-style: italic; }
b, strong { font-weight: bold; }

q:lang(en) { quotes: '“' '”' '‘' '’'; }

article, aside, canvas, details, figcaption, figure,
footer, header, hgroup, menu, nav, section { display: block; }

del { text-decoration: line-through; }

abbr[title], dfn[title] {
	border-bottom: 1px dotted;
	cursor: help;
}

Place the following code in between the title permalink anchor tags in your loop to generate “Untitled Post” text for any post where the user has not entered a title:

<?php
	$title = get_the_title();
	if (strlen($title) == 0) echo 'Untitled Post';
	else echo $title;
?>

Edit the snippet appropriately for your needs.

Features

The theme natively contains support for the following features and improvements:

• HTML5 with shim for unsupported browsers
• Conditional classes for IE7/8
• Threaded comments with custom callback
• Featured Images / Post Thumbnails
• Editor styles
• Dynamic sidebar
• Menus
• Widgets
• jQuery
• Smart caching of style.css and script.js
• Responsive CSS design for mobile / smaller browser viewports
• Uses get_template_part for includes to improve ease of modification

Demo / Preview

You may preview a demo of this theme at Demo KM WordPress.

Custom Post Types & Taxonomies

If you plan on adding custom post types, custom taxonomies, and/or custom meta boxes and custom fields to your theme, the KM Custom Post Type Template plugin and theme files are intended to integrate well with the bare-bones KM-H5 theme. (You will need to remove the featured images functions from the plugin, however, as these functions are duplicated in the theme’s functions.php file.) Keep in mind that these are learning files: their intent is to teach.

If you’d prefer an efficiency-based method to get to the end results, try Custom Post Types, revisited for another way of adding custom CMS functionality to your WordPress installation. This technique is geared toward more real-world production, but leaves out much of the teaching.

Regular Updates

Keep an eye on the blog for improvements! Updates and fixes for the theme will be added when appropriate as new versions of WordPress are released, introducing new features and functionality.

Changelog

• Feb. 18, 2012 – Updated functions.php to call jQuery from Google’s CDN and to remove the WP version number from the head for better security. Minor CSS change to accommodate next/prev links for posts with excessively long titles.
• Feb. 17, 2012 – Added pagination links template part to the loop (Prev/Next with page numbers). Please note that depending on your installation’s permalink / pagination settings, you may have to edit the format. See the documentation: paginate_links.
• Jan. 7, 2012 – Added international translation support.
• Jan. 5, 2012 – Fixed a misplaced end tag in the comments template, broke commonly-repeated elements into template parts (includes), various other small improvements.
• Jan. 4, 2012 – Numerous fixes for styling, structure, and classes. Removed post format support (determined unnecessary and rarely used). Added CSS3 media query for responsive design. Did some major clean-up and added cache-busting for js and main stylesheet without the use of functions.php.
• Jan. 3, 2012 – v1.3 released with support for untitled posts, post formats, enhanced styling, and other minor fixes
• Dec. 31, 2011 – Added intelligent caching of stylesheet, removed version from footer for better security, fixed author page query, added demo
• Dec. 15, 2011 – Fixed editor styles
• Dec. 6, 2011 – Added author support

Questions? Feature requests?

Leave a comment!

The solution is to intelligently cache stylesheets when they haven’t changed, but to reload them when they’ve been updated utilizing the PHP file modification time function filemtime(). Some CMSes do this natively (like Expression Engine), but WordPress doesn’t— yet.

You can add this functionality to your theme by modifying the stylesheet link in the header.php theme file as follows:

<link rel="stylesheet" type="text/css" href="<?php bloginfo('stylesheet_url'); echo '?' . filemtime( get_stylesheet_directory() . '/style.css'); ?>" media="screen">

If you have additional stylesheets or JavaScript files you’d like to apply filemtime() to as well, use the following syntax:

<?php $cachebustFile = '/your-subdirectory/your-file.ext'; ?>
<script src="<?php echo get_template_directory_uri(); echo $cachebustFile . '?' . filemtime(get_template_directory() . $cachebustFile); ?>"></script>

For more information, see Cache busting CSS files other than style.css, Prevent CSS Caching, or Smart Cache-busting for your WordPress Stylesheet.

Note: If you have downloaded my KM-H5 template theme after Dec. 31, 2011, this feature is already included in the core theme files.

Plugin or functions.php? The advantage to using a plugin for Custom Post Types is that plugins will persist if you elect to change your theme. functions.php files are tied to their themes. This isn’t a fool-proof catch-all, as Custom Post Types and taxonomies require certain theme files in order to display, but it will eliminate the need to remember to copy over a significant portion of your theme’s functions if you use a plugin. Using a plugin also allows you to deactivate the CPTs if desired. Ultimately though, the choice is yours.

If you’re writing a plugin to handle your custom posts rather than putting them in your theme’s functions.php file, you need to begin your PHP file with some general plugin information. (Skip this step if you’re using functions.php.)

<?php
/**
 * @package Setup_Custom_Post
 * @version 1.0
 */
/*
Plugin Name: Setup Custom Post Type
Plugin URI: http://blog.kim-maida.com/web-development/wordpress/custom-post-types-revisited
Description: A sample "template" custom post type plugin for editing. 

Author: Kim Maida
Version: 1.0
Author URI: http://kim-maida.com
License: Free
*/

We’ll start by setting up the filter to enable our custom post type to share categories and post tags with standard posts. Leave this off if you do not want this functionality.

// Filter to enable custom post types to share categories and tags with regular posts
//--- Remove this section if your custom post will not be sharing any categories or tags
//--- May require further editing if you will be adding additional custom post types

add_filter('pre_get_posts', 'query_post_type');
function query_post_type($query) {
	if(is_category() || is_tag()) {
		$post_type = get_query_var('post_type');
	if($post_type)
		$post_type = $post_type;
	else
		$post_type = array(
			'post',
			'custom_post'	 // add custom post type(s) here
		);
	$query->set('post_type',$post_type);
	return $query;
	}
}

Set up the custom taxonomies next. The reason we are doing this before initializing the new custom post type is because we want to rewrite the taxonomy slugs to attach them to the custom post type slug. What this means is that taxonomy archives will be rewritten to the format of: URL/custom-post-type/taxonomy/term, instead of: URL/taxonomy/term.

You will want to leave this particular rewrite functionality off if you are sharing custom taxonomies among multiple post types.

Here is some code registering a hierarchical (category-like, with parent/child structure) taxonomy:

//-------------------------- CUSTOM TAXONOMIES
//-------------------------- http://codex.wordpress.org/Taxonomies#Custom_Taxonomies

add_action( 'init', 'create_hierarchical_taxonomy', 0 );
function create_hierarchical_taxonomy()
{
	// The labels that your custom taxonomy will use in the WordPress admin UI
    $labels = array(
    	'name' => _x( 'Hierarchical Taxonomy', 'taxonomy general name' ),
		'singular_label' => _x( 'Hierarchical Taxonomy', 'taxonomy singular name' ),
		'search_items' => __( 'Search Hierarchical Taxonomies' ),
		'all_items' => __( 'All Hierarchical Taxonomies' ),
		'parent_item' => __( 'Parent Hierarchical Taxonomy' ),
		'parent_item_colon' => __( 'Hierarchical Taxonomy' ),
		'edit_item' => __( 'Edit Hierarchical Taxonomy' ),
		'update_item' => __( 'Update Hierarchical Taxonomy' ),
		'add_new_item' => __( 'Add New Hierarchical Taxonomy' ),
		'new_item_name' => __( 'New Hierarchical Taxonomy Name' )
    );

    // http://codex.wordpress.org/Function_Reference/register_taxonomy
	register_taxonomy(
		'h_taxonomy', // internal name
		'custom_post', // object type - what post type can use this taxonomy, can also be an array of post types: array( 'post', 'page')
		array(
			// http://codex.wordpress.org/Function_Reference/register_taxonomy#Arguments
			'labels' => $labels,	// Instructs use of the labels specified above
			'hierarchical' => true, // True: tree-structure like categories
			'rewrite' => array( 'slug' => 'custom-post/hierarchical-taxonomy', 'with_front' => false),	// Applies a rewrite associating this taxonomy with the specified CPT
			'query_var' => true
		)
	);
}

Here is sample code for registering a non-hierarchical (free-form, like tags) taxonomy:

add_action( 'init', 'create_nh_taxonomy', 0 );
function create_nh_taxonomy()
{
	// The labels that your custom taxonomy will use in the WordPress admin UI
    $labels = array(
    	'name' => _x( 'Non-hierarchical Taxonomy', 'taxonomy general name' ),
		'singular_label' => _x( 'Non-hierarchical Taxonomy', 'taxonomy singular name' ),
		'search_items' => __( 'Search Non-hierarchical Taxonomies' ),
		'all_items' => __( 'All Non-hierarchical Taxonomies' ),
		'parent_item' => __( 'Parent Non-hierarchical Taxonomy' ),
		'parent_item_colon' => __( 'Parent Non-hierarchical Taxonomy' ),
		'edit_item' => __( 'Edit Non-hierarchical Taxonomy' ),
		'update_item' => __( 'Update Non-hierarchical Taxonomy' ),
		'add_new_item' => __( 'Add New Non-hierarchical Taxonomy' ),
		'new_item_name' => __( 'New Non-hierarchical Taxonomy Name' ),
		'separate_items_with_commas' => __( 'Separate Non-hierarchical Taxonomies with commas' ),
		'choose_from_most_used' => __( 'Choose from most used Non-hierarchical Taxonomies' )
    );

    // http://codex.wordpress.org/Function_Reference/register_taxonomy
	register_taxonomy(
		'nh_taxonomy', // internal name
		'custom_post', // object type - what post type can use this taxonomy, can also be an array of post types: array( 'post', 'page')
		array(
			// http://codex.wordpress.org/Function_Reference/register_taxonomy#Arguments
			'labels' => $labels,	// Instructs use of the labels specified above
			'hierarchical' => false, // False: free-form structure like tags
			'rewrite' => array( 'slug' => 'custom-post/nonhierarchical-taxonomy', 'with_front' => false), // Applies a rewrite associating this taxonomy with the specified CPT
			'query_var' => true
		)
	);
}

Next, register the custom post type. Note that the rewrite slug for the CPT should match the slug you specified to come before your associated custom taxonomies. (Ie: if the taxonomy rewrite was cpt-slug/taxonomy, the CPT rewrite slug needs to be cpt-slug.)

//-------------------------- CUSTOM POST TYPE
//-------------------------- http://codex.wordpress.org/Post_Types#Custom_Types

add_action('init', 'create_custom_post');
function create_custom_post()
{
	// The labels your custom post type will use in the WordPress admin UI
	$labels = array(
		'name' => _x( 'Custom Post', 'custom post' ),
		'singular_name' => _x( 'Custom Post', 'custom post' ),
		'all_items' => __( 'All Custom Posts' ),
		'add_new' => __( 'Add New Custom Post' ),
		'add_new_item' => __( 'Add New Custom Post' ),
		'edit_item' => __( 'Edit Custom Post' ),
		'menu_name' => _x( 'Custom Posts', 'custom posts' ),
	); 

	// http://codex.wordpress.org/Function_Reference/register_post_type#Arguments
	$args = array(
		'labels' => $labels,	// Instructs use of the labels specified above
		'description' => _x( 'A default custom post type for customizing.', 'Short descriptive summary of the post type' ),
		'public' => true, 	// Meta argument to define default values for publicly_queriable, show_ui, show_in_nav_menus, exclude_from_search
		'menu_position' => 5,	// 5 = Below posts (see WP codex for more information on menu position)
		'hierarchical' => false,	// True: parent structure like pages | False: like posts
		'supports' => array('title', 'editor', 'thumbnail', 'excerpt', 'revisions', 'author', 'discussion', 'comments'),	// Alias for add_post_type_support()
		'taxonomies' => array('category','post_tag'), // Shares these with other posts: needs a query function for archives to work!
		'has_archive' => __('custom-posts'),	// Enables custom post type archives: boolean or string (string will be the archive slug)
		'rewrite' => array('slug' => 'custom-post', 'with_front' => false )	// Rewrite permalinks, create a slug for the custom post type
	);    

	// http://codex.wordpress.org/Function_Reference/register_post_type
	register_post_type(
		'custom_post',	// internal name
		$args 	// arguments from the array above
	);
}

We should flush rewrite on activation to prevent 404 errors. If you continue to have 404s on archive pages, etc., visit the Permalink settings and re-save. (Also noted below.)

// Flush rewrite on activation: this should prevent 404 errors when trying to view custom posts and archives
add_action('init', 'create_custom_post');
function my_rewrite_flush() {
	create_custom_post();
	flush_rewrite_rules();
}
register_activation_hook(__FILE__, 'my_rewrite_flush');

Finally, if you’re putting this code in a plugin instead of your theme’s functions.php, end the plugin:

// end the plugin ?>

Now that we have taxonomies and custom post types set up, we can create custom fieldgroups to use. This can be done by hand by constructing custom meta boxes, as previously covered in a different post, but the fastest and easiest way to do this is to use a robust custom fields plugin. I recommend Advanced Custom Fields. This plugin allows you to associate fieldgroups with different post types. It supports a variety of field types, file uploads, etc. and also uses short tags to get and display the custom field data. Visit the Advanced Custom Fields developer’s website for full documentation.

See the custom post types archives for additional articles on how to set up and use custom post types in WordPress.

Getting 404 errors on custom taxonomy archives? Before you tear your hair out unable to figure out where you went wrong in the code, try visiting your admin section’s Settings / Permalinks and hit “Save Changes” to flush the cache. This should fix those confounding Not Founds. If they persist after doing this, then check the code.

<?php
    // enable pagination using the $paged variable
    $paged = (get_query_var('paged')) ? get_query_var('paged') : 1;

    // query posts
	query_posts(array(
		'post_type' => array(
			'post',
			'custom_post_type',
			'another_custom_post_type'
		),
		'paged' => $paged )
	);
?>

Replace the custom post types in the query_posts array with your own.