fun with custom post types!
i’ve added a new feature to my site: custom post types. you can see the page here — as you can see, it’s all of my sketches i’ve done since last august
code
functions.php
first add this to allow for featured images (if it’s not already in there):
add_theme_support( 'post-thumbnails' );
This part will register the custom post type to wordpress
add_action( 'init', 'create_sketch' );
function create_sketch() {
$labels = array(
'name' => _x('Sketches', 'post type general name'),
'singular_name' => _x('Sketch', 'post type singular name'),
'add_new' => _x('Add New Sketch', 'Sweet'),
'add_new_item' => __('Add New Sketch'),
'edit_item' => __('Edit Sketch'),
'new_item' => __('New Sketch'),
'view_item' => __('View Sketch'),
'search_items' => __('Search Sketches'),
'not_found' => __('No Sketches found'),
'not_found_in_trash' => __('No Sketches found in Trash'),
'parent_item_colon' => ''
);
$supports = array('title', 'editor', 'revisions', 'thumbnail', 'comments');
register_post_type( 'sketches',
array(
'labels' => $labels,
'public' => true,
'supports' => $supports
)
);
}
- $labels – an array defining the different labels that a custom post type can have
- public – a predefined flag to show the post type in the admin section and to make it show up on the main site itself, if it’s queried for
- $supports – sets up the default wordpress controls that are available in the edit screen for the custom post type. by default, only the title field and editor are shown. a list of all available arguments can be found in the wordpress codex
then i created a template to display these sketches
sketches.php
< ?php /* Template Name: Sketches Template */ get_header(); ?>
<div id="content" role="main">
< ?php query_posts(array('post_type'=> 'sketches', 'posts_per_page' => -1)); ?>
<h1>< ?php the_title(); ?></h1>
< ?php if (have_posts()) : while (have_posts()) : the_post(); ?>
<div class="post" id="post-<?php the_ID(); ?>">
<ol class="sketch_list">< ?php $large_image_url = wp_get_attachment_image_src( get_post_thumbnail_id(), 'large'); ?>
<li><a title="<?php the_title_attribute(); ?>" href="< ?php the_permalink() ?>" rel="bookmark">
<img class="single_sketch" style="background: url('< ?php echo $large_image_url[0]; ?/>') 50% 50% no-repeat #000;" alt="" src="< ?php bloginfo('stylesheet_directory'); ?/>/images/spacer.gif" />
</a>
<h2><a title="<?php the_title_attribute(); ?>" href="< ?php the_permalink() ?>" rel="bookmark">< ?php the_title(); ?></a></h2>
</li>
</ol>
< ?php endwhile; endif; wp_reset_query(); ?>
<div class="jig"></div>
</div>
< ?php edit_post_link('Edit this entry.', '', ''); ?>
</div>
< ?php get_sidebar(); ?>
< ?php get_footer(); ?>
notes
- query_posts – yea i used this. it’s not the most efficient method (WP_Query), so maybe i’ll change it soon… i’m just happy that it’s running and working well
anyway, what it’s doing is looking for posts with post_type of “sketches” and the second part is essentially saying “show all” (i really should paginate this page, however — it can’t be good for mobile devices) - so i set it up as an ordered list (css hides the numbers) and each bullet has a spacer.gif image that has a background-image set. the background-image is the “large” version of the featured image that was uploaded. confused? don’t be. when an image is uploaded, wordpress automatically resizes it into various sizes, which you can see under settings > media. i’m a fan of the look of the sketch getting cropped like that
- since i used query_posts, don’t forget to end it with “wp_reset_query();”
single-sketches.php – this file is named exactly that so all custom post types will use this
< ?php /** * @package WordPress * @subpackage Default_Theme */ get_header(); ?>
<div id="content" role="main">
< ?php if (have_posts()) : while (have_posts()) : the_post(); ?>
<div id="post-< ?php the_ID(); ?>"></div>
<h1> ?php the_title(); ?></h1>
<div class="entry">
< ?php $large_image_url = wp_get_attachment_image_src( get_post_thumbnail_id(), 'large'); ?>
<div id="big_sketch"><img alt="" src="<?php echo $large_image_url[0]; ?/>" /></div>
< ?php the_content('
<p class="serif">Read the rest of this entry »'); ?>
< ?php wp_link_pages(array('before' => '
<strong>Pages:</strong> ', 'after' => '', 'next_or_number' => 'number')); ?>
< ?php the_tags( 'Tags: ', ', ', ''); ?>
</p></div>
</div>
< ?php comments_template(); ?>
<div class="navigation">
<div class="alignleft">< ?php previous_post_link('« %link') ?></div>
<div class="alignright">< ?php next_post_link('%link »') ?></div>
<div class="jig"></div>
</div>
< ?php endwhile; else: ?>
Sorry, no posts matched your criteria.
< ?php endif; ?>
< ?php get_sidebar(); ?>
< ?php get_footer(); ?>
notes
- this is just the single sketch page — show the image full size to its container
