Adding Related Posts Links to a Twenty Ten Child Theme in Functions.php

I think a nice feature to have in a theme is a list of related posts on the single post view. It gives the reader another way to find your content. We are going to use the same method we used before for adding content under a post. This way you can just add this into your functions.php, once again keeping things simple so we don’t have to modify any parent theme templates.

If you do a search around google, you may find a variety of ways to come up with a related posts list. And really you can pick any of them that you like. The technique remains the same. We just wrap the code up in a function and tack it onto twentyten’s existing twentyten_posted_in action. So the code I found on the web for creating a list of 5 related posts by tags is:

<!-- Related Posts -->
<?php
$original_post = $post;
$tags = wp_get_post_tags($post->ID);
if($tags)
{
	echo '<div class="related"><h4 class="content-title">Related Posts</h4>';
	$sendTags = array();
	foreach($tags as $tag)
		$sendTags[] = $tag->term_id;

	$args = array(
		'tag__in' => $sendTags,
		'post__not_in' => array($post->ID),
		'showposts' => 5,
		'caller_get_posts' => 1,
	);

	$queryDb = new WP_Query($args);
	if($queryDb->have_posts())
	{
		echo '<ul>';
		while ($queryDb->have_posts()) {
			$queryDb->the_post();
			?><li><a href="<?php the_permalink(); ?>"
			rel="bookmark" title="<?php the_title_attribute(); ?>">
			<?php the_title(); ?></a></li><?php
		}
		echo '</ul>';
	}
	echo '</div>';
}
$post = $original_post;
wp_reset_query();
?>
<!--End Related-->

And that bit of code works great for me. On my custom themes I just put it right into single.php where I want the related posts to appear, and I’m all set. But I wanted to use the same feature in my twentyten child theme. As I’ve mentioned before, I hate copying over templates to my child theme just to add a feature or two. So if there is any way to avoid that, I take that route. I was able to use this from functions.php in my child theme like this:

// RELATED POSTS FUNCTION
if ( ! function_exists( 'voodoo_related_posts' ) ) :
function voodoo_related_posts() {
	global $post;
	$original_post = $post;
	$tags = wp_get_post_tags($post->ID);
	if($tags)
	{
		echo '<div class="related"><h4 class="content-title">Related Posts</h4>';
		$sendTags = array();
		foreach($tags as $tag)
			$sendTags[] = $tag->term_id;

		$args = array(
			'tag__in' => $sendTags,
			'post__not_in' => array($post->ID),
			'showposts' => 5,
			'caller_get_posts' => 1,
		);

		$queryDb = new WP_Query($args);
		if($queryDb->have_posts())
		{
			echo '<ul>';
			while ($queryDb->have_posts()) {
				$queryDb->the_post();
				?><li><a href="<?php the_permalink(); ?>"
				rel="bookmark" title="<?php the_title_attribute(); ?>">
				<?php the_title(); ?></a></li><?php
			}
			echo '</ul>';
		}
		echo '</div>';
	}
	$post = $original_post;
	wp_reset_query();
}
endif;

You can see we just basically took our above code and wrapped it up in a function, which I called voodoo_related_posts. I also added in:

global $post;

To make everything available within our loop.

You can plop that code into functions.php and that gets everything set up. However, it won’t change anything yet. We have made the function voodoo_related_posts available, but we haven’t placed it yet. So we do that with twentyten_posted_in. You may recall from this post where we used twentyten_posted_in to display some buttons from various plugins. We’re just going to use the same function.

If you didn’t follow along with that, you can still do this. You just need to copy the entire twentyten_posted_in function from twentyten, and put it in your child theme’s functions.php. Mine looks like:

// COPY TWENTYTEN POSTED IN WITH OUR SOCIAL BUTTONS ADDED
function twentyten_posted_in() {
	voodoo_related_posts();
 	voodoo_social_buttons();
	// Retrieves tag list of current post, separated by commas.
	$tag_list = get_the_tag_list( '', ', ' );
	if ( $tag_list ) {
		$posted_in = __( 'This entry was posted in %1$s and tagged %2$s. Bookmark the <a href="%3$s" title="Permalink to %4$s" rel="bookmark">permalink</a>.', 'twentyten' );
	} elseif ( is_object_in_taxonomy( get_post_type(), 'category' ) ) {
		$posted_in = __( 'This entry was posted in %1$s. Bookmark the <a href="%3$s" title="Permalink to %4$s" rel="bookmark">permalink</a>.', 'twentyten' );
	} else {
		$posted_in = __( 'Bookmark the <a href="%3$s" title="Permalink to %4$s" rel="bookmark">permalink</a>.', 'twentyten' );
	}
	// Prints the string, replacing the placeholders.
	printf(
		$posted_in,
		get_the_category_list( ', ' ),
		$tag_list,
		get_permalink(),
		the_title_attribute( 'echo=0' )
	);
}

If you didn’t follow the previously linked tutorial, that is fine. Your code would look just like mine above, except line 4, voodoo_social_buttons would be absent. So just leave that line of code out if it doesn’t apply. Once you have the above 2 blocks of code in your functions.php, you will have the related posts listed out at the bottom of your single post view. You are free to style it up to look good. Here’s my css just in case you want an example:

.related {
	width: 90%;
	margin-top: 0px;
	margin-bottom: 20px;
	margin-left: auto;
	margin-right: auto;
	background: #9e9786;
	background: rgba(158, 151, 134, 0.6);
	border: 4px double #ffffff;
	-webkit-border-radius: 7px;
	-moz-border-radius: 7px;
	-o-border-radius: 7px;
	border-radius: 7px;
	padding: 5px;
	-webkit-box-shadow: 5px 5px 12px rgba(64, 31, 31, 0.5);
	-moz-box-shadow: 5px 5px 12px rgba(64, 31, 31, 0.5);
	box-shadow: 5px 5px 12px rgba(64, 31, 31, 0.5);
}
#content .related h4.content-title {
	font-weight: bold;
	text-indent: 1em;
	font-style: italic;
	color: rgba(0, 0, 0, 0.6);
	text-shadow: 0 1px 1px #fff;
	margin-bottom: 0px;
	font-size: 1.3em;
}
#content .related ul {
	margin-bottom: 5px;
}
.related ul li a {
	color: #401f1f;
}

So you can see from this example, and the previous one, that we can add anything we want by making it into a function, and tacking it onto twentyten_posted_in. I think it’s a cool way to add features without directly editing any templates.

2 Replies to “Adding Related Posts Links to a Twenty Ten Child Theme in Functions.php”

  1. Nice site..Thanks for all the tuts but …I read and followed this carefully and exactly and the related box does not show …. ??.. little more than copy/paste .. where could the problem be??

Leave a Reply