Separating Post Formats in Twenty Ten Child Theme for Easier Additions and Edits

Our recent posts have all been in support of adding post formats in a twenty ten child theme. This post will have the same goal. There is really no way to easily add in another loop for a new post format in a twenty ten child theme. I thought about this for quite some time before settling on my solution. It is based somewhat on this write-up I made a while back. What we are going to do today is make a new loop.php in our child theme which uses get_template_part with the post formats to call to a format specific snippet of code. There will be no new code in the format files, I’ll just grab the appropriate portion of code from twenty ten’s loop.php, and put them in the right files. Our new loop.php will just be twentyten’s, with all the post display stuff removed, and a bit of code for calling the proper template part. The cool thing about this is it will let you easily add in different code for each format. There are a variety of ways to do this, but here’s mine:

So the first thing we need to do is the setup. We need to make some new files. I just do this directly on my host (godaddy) by logging on to their file manager. I can make new files there. If you don’t have that option, you can use a plain text editor, or whatever resource you have available for making new files. We will make:

  • format-standard.php
  • format-aside.php
  • format-gallery.php
  • format-link.php
  • loop.php

Now the format-link.php is totally optional. I plan to make a new loop for links, so I need it. You may not. You could also at this time make any remaining files you need for any formats you have active, following the same naming convention. If you haven’t added any new post formats to your twenty ten child theme, it’s covered here. Also, you don’t have to make loop.php if you don’t want to do it from scratch. You could just grab a fresh copy of twentyten’s and edit it directly. Then upload it to your child theme.

So let’s start out with loop.php. I took twentyten’s and edited it pretty heavily. I basically removed all the stuff for displaying anything to do with posts. And I added in some selection criteria. I personally don’t use the asides or gallery categories, which is from before post formats. But since twenty ten was set up to be backwards compatible with that, I kept it in there. You’ll see here, starting with the comment on line 59, is our new selection stuff. We say if the post is in the asides category, load the format-asides.php file, if it’s in the gallery category, load the gallery format. Then comes the cool stuff. Starting on line 67, we basically assign whatever post format the post has to $format. Then we load the template part format-$format.php, which gets us format-standard.php, format-aside.php, etc. Also, I decided to keep the opening and closing div of the loop within loop.php, since it stays the same regardless of format, no reason to repeat it in each file. Now here’s our new loop.php:

<?php
/**
 * The loop that displays posts.
 *
 * The loop displays the posts and the post content.  See
 * http://codex.wordpress.org/The_Loop to understand it and
 * http://codex.wordpress.org/Template_Tags to understand
 * the tags used in it.
 *
 * This can be overridden in child themes with loop.php or
 * loop-template.php, where 'template' is the loop context
 * requested by a template. For example, loop-index.php would
 * be used if it exists and we ask for the loop with:
 * <code>get_template_part( 'loop', 'index' );</code>
 *
 * @package WordPress
 * @subpackage Twenty_Ten
 * @since Twenty Ten 1.0
 */
?>

<?php /* Display navigation to next/previous pages when applicable */ ?>
<?php if ( $wp_query->max_num_pages > 1 ) : ?>
	<div id="nav-above" class="navigation">
		<div class="nav-previous"><?php next_posts_link( __( '<span class="meta-nav">&larr;</span> Older posts', 'twentyten' ) ); ?></div>
		<div class="nav-next"><?php previous_posts_link( __( 'Newer posts <span class="meta-nav">&rarr;</span>', 'twentyten' ) ); ?></div>
	</div><!-- #nav-above -->
<?php endif; ?>

<?php /* If there are no posts to display, such as an empty archive page */ ?>
<?php if ( ! have_posts() ) : ?>
	<div id="post-0" class="post error404 not-found">
		<h1 class="entry-title"><?php _e( 'Not Found', 'twentyten' ); ?></h1>
		<div class="entry-content">
			<p><?php _e( 'Apologies, but no results were found for the requested archive. Perhaps searching will help find a related post.', 'twentyten' ); ?></p>
			<?php get_search_form(); ?>
		</div><!-- .entry-content -->
	</div><!-- #post-0 -->
<?php endif; ?>

<?php
	/* Start the Loop.
	 *
	 * In Twenty Ten we use the same loop in multiple contexts.
	 * It is broken into three main parts: when we're displaying
	 * posts that are in the gallery category, when we're displaying
	 * posts in the asides category, and finally all other posts.
	 *
	 * Additionally, we sometimes check for whether we are on an
	 * archive page, a search page, etc., allowing for small differences
	 * in the loop on each template without actually duplicating
	 * the rest of the loop that is shared.
	 *
	 * Without further ado, the loop:
	 */ ?>
<?php while ( have_posts() ) : the_post(); ?>

		<div id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
                <!-- OUR NEW TEMPLATE -->

			<?php if ( in_category( _x( 'asides', 'asides category slug', 'twentyten' ) )  ) : ?>
				<?php get_template_part( 'format', 'aside' ); ?>
			<?php elseif ( in_category( _x( 'gallery', 'gallery category slug', 'twentyten' ) ) ) : ?>
				<?php get_template_part( 'format', 'gallery' ); ?>
			<?php else : ?>

				<?php $format = get_post_format();
					if ( false === $format )
						$format = 'standard';
						get_template_part( 'format', $format ); ?>
			<?php endif; ?>

		</div><!-- #post-## -->

		<?php comments_template( '', true ); ?>

<?php endwhile; // End the loop. Whew. ?>

<?php /* Display navigation to next/previous pages when applicable */ ?>
<?php if (  $wp_query->max_num_pages > 1 ) : ?>
				<div id="nav-below" class="navigation">
					<div class="nav-previous"><?php next_posts_link( __( '<span class="meta-nav">&larr;</span> Older posts', 'twentyten' ) ); ?></div>
					<div class="nav-next"><?php previous_posts_link( __( 'Newer posts <span class="meta-nav">&rarr;</span>', 'twentyten' ) ); ?></div>
				</div><!-- #nav-below -->
<?php endif; ?>

So you can see it is based on the twenty ten loop.php, we just stripped out all the display stuff, and moved that to individual files. Let’s start looking at those!

When reading down the code from twenty ten’s loop.php, the first format we come across is gallery. So we will lift all the code from that and put it into the new format-gallery.php file. The only thing we need to change is to remove the if statement, and the post ID and class opening lines. So format-gallery.php looks like:

			<h2 class="entry-title"><a href="<?php the_permalink(); ?>" title="<?php printf( esc_attr__( 'Permalink to %s', 'twentyten' ), the_title_attribute( 'echo=0' ) ); ?>" rel="bookmark"><?php the_title(); ?></a></h2>

			<div class="entry-meta">
				<?php twentyten_posted_on(); ?>
			</div><!-- .entry-meta -->

			<div class="entry-content">
<?php if ( post_password_required() ) : ?>
				<?php the_content(); ?>
<?php else : ?>
				<?php
					$images = get_children( array( 'post_parent' => $post->ID, 'post_type' => 'attachment', 'post_mime_type' => 'image', 'orderby' => 'menu_order', 'order' => 'ASC', 'numberposts' => 999 ) );
					if ( $images ) :
						$total_images = count( $images );
						$image = array_shift( $images );
						$image_img_tag = wp_get_attachment_image( $image->ID, 'thumbnail' );
				?>
						<div class="gallery-thumb">
							<a class="size-thumbnail" href="<?php the_permalink(); ?>"><?php echo $image_img_tag; ?></a>
						</div><!-- .gallery-thumb -->
						<p><em><?php printf( _n( 'This gallery contains <a %1$s>%2$s photo</a>.', 'This gallery contains <a %1$s>%2$s photos</a>.', $total_images, 'twentyten' ),
								'href="' . get_permalink() . '" title="' . sprintf( esc_attr__( 'Permalink to %s', 'twentyten' ), the_title_attribute( 'echo=0' ) ) . '" rel="bookmark"',
								number_format_i18n( $total_images )
							); ?></em></p>
				<?php endif; ?>
						<?php the_excerpt(); ?>
<?php endif; ?>
			</div><!-- .entry-content -->

			<div class="entry-utility">
			<?php if ( function_exists( 'get_post_format' ) && 'gallery' == get_post_format( $post->ID ) ) : ?>
				<a href="<?php echo get_post_format_link( 'gallery' ); ?>" title="<?php esc_attr_e( 'View Galleries', 'twentyten' ); ?>"><?php _e( 'More Galleries', 'twentyten' ); ?></a>
				<span class="meta-sep">|</span>
			<?php elseif ( in_category( _x( 'gallery', 'gallery category slug', 'twentyten' ) ) ) : ?>
				<a href="<?php echo get_term_link( _x( 'gallery', 'gallery category slug', 'twentyten' ), 'category' ); ?>" title="<?php esc_attr_e( 'View posts in the Gallery category', 'twentyten' ); ?>"><?php _e( 'More Galleries', 'twentyten' ); ?></a>
				<span class="meta-sep">|</span>
			<?php endif; ?>
				<span class="comments-link"><?php comments_popup_link( __( 'Leave a comment', 'twentyten' ), __( '1 Comment', 'twentyten' ), __( '% Comments', 'twentyten' ) ); ?></span>
				<?php edit_post_link( __( 'Edit', 'twentyten' ), '<span class="meta-sep">|</span> <span class="edit-link">', '</span>' ); ?>
			</div><!-- .entry-utility -->

Continuing down twenty ten’s loop.php, we next come to the asides post format. Again, we strip out the if selection statment, and the opening and closing div, and we are left with this code in format-aside.php:

		<?php if ( is_archive() || is_search() ) : // Display excerpts for archives and search. ?>
			<div class="entry-summary">
				<?php the_excerpt(); ?>
			</div><!-- .entry-summary -->
		<?php else : ?>
			<div class="entry-content">
				<?php the_content( __( 'Continue reading <span class="meta-nav">&rarr;</span>', 'twentyten' ) ); ?>
			</div><!-- .entry-content -->
		<?php endif; ?>

			<div class="entry-utility">
				<?php twentyten_posted_on(); ?>
				<span class="meta-sep">|</span>
				<span class="comments-link"><?php comments_popup_link( __( 'Leave a comment', 'twentyten' ), __( '1 Comment', 'twentyten' ), __( '% Comments', 'twentyten' ) ); ?></span>
				<?php edit_post_link( __( 'Edit', 'twentyten' ), '<span class="meta-sep">|</span> <span class="edit-link">', '</span>' ); ?>
			</div><!-- .entry-utility -->

And the final block of code we need to pull from twenty ten’s loop.php is for the standard post format. This is your normal posts, be default in WordPress, if you don’t pick a post format, it is standard. Here is the block of code for format-standard.php which has the same minor edits as the last two formats:

			<h2 class="entry-title"><a href="<?php the_permalink(); ?>" title="<?php printf( esc_attr__( 'Permalink to %s', 'twentyten' ), the_title_attribute( 'echo=0' ) ); ?>" rel="bookmark"><?php the_title(); ?></a></h2>

			<div class="entry-meta">
				<?php twentyten_posted_on(); ?>
			</div><!-- .entry-meta -->

	<?php if ( is_archive() || is_search() ) : // Only display excerpts for archives and search. ?>
			<div class="entry-summary">
				<?php the_excerpt(); ?>
			</div><!-- .entry-summary -->
	<?php else : ?>
			<div class="entry-content">
				<?php the_content( __( 'Continue reading <span class="meta-nav">&rarr;</span>', 'twentyten' ) ); ?>
				<?php wp_link_pages( array( 'before' => '<div class="page-link">' . __( 'Pages:', 'twentyten' ), 'after' => '</div>' ) ); ?>
			</div><!-- .entry-content -->
	<?php endif; ?>

			<div class="entry-utility">
				<?php if ( count( get_the_category() ) ) : ?>
					<span class="cat-links">
						<?php printf( __( '<span class="%1$s">Posted in</span> %2$s', 'twentyten' ), 'entry-utility-prep entry-utility-prep-cat-links', get_the_category_list( ', ' ) ); ?>
					</span>
					<span class="meta-sep">|</span>
				<?php endif; ?>
				<?php
					$tags_list = get_the_tag_list( '', ', ' );
					if ( $tags_list ):
				?>
					<span class="tag-links">
						<?php printf( __( '<span class="%1$s">Tagged</span> %2$s', 'twentyten' ), 'entry-utility-prep entry-utility-prep-tag-links', $tags_list ); ?>
					</span>
					<span class="meta-sep">|</span>
				<?php endif; ?>
				<span class="comments-link"><?php comments_popup_link( __( 'Leave a comment', 'twentyten' ), __( '1 Comment', 'twentyten' ), __( '% Comments', 'twentyten' ) ); ?></span>
				<?php edit_post_link( __( 'Edit', 'twentyten' ), '<span class="meta-sep">|</span> <span class="edit-link">', '</span>' ); ?>
			</div><!-- .entry-utility -->

That’s all you need to do to separate out your formats. You can continue on with making more templates if you like. format-chat.php, format-quote.php, etc. At the beginning of this tutorial, we made a file called format-link.php. We aren’t going to do anything with that today. Tomorrow we will make a loop for that format, which links the title to the original post we are linking to using a custom field meta box.

Hopefully you find this method useful. You can now edit each format that already exists quite easily. And you can add formats all you want, by simply activiating them in your functions.php and adding the appropriate format-$format.php file. Have fun with this one. I’m off to make my new format-link.php file which we will cover tomorrow.

3 Replies to “Separating Post Formats in Twenty Ten Child Theme for Easier Additions and Edits”

  1. Thanks for this, I searched so many sites trying to understand post formats and never understood them until reading this and another one of your articles.
    I used it to create a code snippet section on my site that would only display the title in a list when viewing the category, I also used some code you helped me with on wp forums on custom fields and adding icons with conditionals.

Leave a Reply