Add Related Posts To Accelerated Mobile Pages (AMP) in WordPress

This is how to add related posts to your Accelerated Mobile Pages (AMP). This is only for those of you using the WordPress AMP plugin (by Automattic) for Accelerated Mobile Pages. The WP AMP plugin displays your AMP pages with a minimalistic template for single AMP posts. It has no menu, and no related posts.

The AMP plugin added a footer in version 0.4. To add related posts under each AMP post, but above the footer, follow these steps.

Works on Custom Post Types
If you’ve added AMP support to a custom post type, then this will show related posts on that custom post type, as well, IF that post type supports a taxonomy. If you’ve added a custom taxonomy for that custom post type, then the related posts will be posts of that same custom taxonomy terms.

So, this works both on regular posts and custom post types that support AMP. Related posts will be selected first by matching tag. If no post exists with a matching tag, then it will select related posts by category or by custom taxonomy.

Showing only titles without images will keep it light and accelerated (Accelerated Mobile Pages, right?). The first example just shows related posts as an unordered list of links. No featured images or excerpts. The link text will be the post title. This will also show a heading, “You May Also Like,” above the related posts. You can change this heading on line 58 in the first code block, or line 60 in the second code block.

By default, this adds two related posts. If you want to list more or less than two, you can change the 2 to whatever number you like on line 12 in the first code block, or line 14 in the second code block.

Step 1: Create a Template File For Related Posts

Create a folder in your theme called amp which you may already have if you’ve customized any AMP template parts. This should be in your child theme, if you’re using one. In this amp folder, add a new file called related-posts.php.

In that file, paste one of the next 2 code blocks.

If you want related posts to show only the titles, then use this:

<?php
if ( ! is_single() ) {
	return;
}

global $post;
$taxs = get_object_taxonomies( $post );
if ( ! $taxs ) {
	return;
}

$count = 2;
 
// ignoring post formats
if( ( $key = array_search( 'post_format', $taxs ) ) !== false ) {
	unset( $taxs[$key] );
}
 
// try tags first
 
if ( ( $tag_key = array_search( 'post_tag', $taxs ) ) !== false ) {
 
	$tax = 'post_tag';
	$tax_term_ids = wp_get_object_terms( $post->ID, $tax, array( 'fields' => 'ids' ) );
}
 
// if no tags, then by cat or custom tax
 
if ( empty( $tax_term_ids ) ) {
	// remove post_tag to leave only the category or custom tax
	if ( $tag_key !== false ) {
		unset( $taxs[ $tag_key ] );
		$taxs = array_values($taxs);
	}
 
	$tax = $taxs[0];
	$tax_term_ids = wp_get_object_terms( $post->ID, $tax, array('fields' => 'ids') );
 
}
 
if ( $tax_term_ids ) {
	$args = array(
		'post_type' => $post->post_type,
		'posts_per_page' => $count,
		'orderby' => 'rand',
		'tax_query' => array(
			array(
				'taxonomy' => $tax,
				'field' => 'id',
				'terms' => $tax_term_ids
			)
		),
		'post__not_in' => array ($post->ID),
	);
	$related = get_posts( $args );
	if ( $related ) {	?>
		<div class="amp-wp-meta amp-wp-tax-tag">
			<h3>You May Also Like</h3>
			<ul>
			<?php foreach( $related as $post) {
				setup_postdata( $post );
				?>
				<li><a href="<?php echo esc_url( amp_get_permalink( get_the_id() ) ); ?>" title="<?php the_title_attribute(); ?>"><?php the_title(); ?></a></li>
			<?php } ?>
			</ul>
		</div>
	<?php
	}
	wp_reset_postdata();
}
?>

If you want related posts to show the featured image next to the title, then use the next code instead of the one above.

Note that the image size on line 12, below, is set to 50 pixels by 50 pixels. You can change that to the image size of your choice, in which the first number is the maximum image width and second number is the maximum image height. You can also replace the array with an existing image size, for example, you could change line 12 to

$size = 'thumbnail'; 

… but that may be to large to fit with the titles.

<?php
if ( ! is_single() ) {
	return;
}

global $post;
$taxs = get_object_taxonomies( $post );
if ( ! $taxs ) {
	return;
}

$size = array( 50, 50 );

$count = 2;
 
// ignoring post formats
if( ( $key = array_search( 'post_format', $taxs ) ) !== false ) {
	unset( $taxs[$key] );
}
 
// try tags first
 
if ( ( $tag_key = array_search( 'post_tag', $taxs ) ) !== false ) {
 
	$tax = 'post_tag';
	$tax_term_ids = wp_get_object_terms( $post->ID, $tax, array( 'fields' => 'ids' ) );
}
 
// if no tags, then by cat or custom tax
 
if ( empty( $tax_term_ids ) ) {
	// remove post_tag to leave only the category or custom tax
	if ( $tag_key !== false ) {
		unset( $taxs[ $tag_key ] );
		$taxs = array_values($taxs);
	}
 
	$tax = $taxs[0];
	$tax_term_ids = wp_get_object_terms( $post->ID, $tax, array('fields' => 'ids') );
 
}
 
if ( $tax_term_ids ) {
	$args = array(
		'post_type' => $post->post_type,
		'posts_per_page' => $count,
		'orderby' => 'rand',
		'tax_query' => array(
			array(
				'taxonomy' => $tax,
				'field' => 'id',
				'terms' => $tax_term_ids
			)
		),
		'post__not_in' => array ($post->ID),
	);
	$related = get_posts( $args );
	if ( $related ) {	?>
		<div class="amp-wp-meta amp-wp-tax-tag">
			<h3>You May Also Like</h3>
			<div id="amp-related-posts">
			<?php foreach( $related as $post) {
				setup_postdata( $post );
				?>
				<p><a href="<?php echo esc_url( amp_get_permalink( get_the_id() ) ); ?>"><?php 
				$thumb_id = get_post_thumbnail_id( $post->ID );
				if ( $thumb_id ) {
					$img = wp_get_attachment_image_src( $thumb_id, $size );
					$alt = get_post_meta( $post->ID, '_wp_attachment_image_alt', true );
					if ( empty( $alt ) ) {
						$attachment = get_post( $thumb_id );
						$alt = trim(strip_tags( $attachment->post_title ) ); 
					} ?>

					<amp-img class="related-img" src="<?php echo esc_url( $img[0] ); ?>" <?php
					if ( $img_srcset = wp_get_attachment_image_srcset( $thumb_id, $size ) ) {
						?> srcset="<?php echo esc_attr( $img_srcset ); ?>" <?php
					}
					?> alt="<?php echo esc_attr( $alt ); ?>" width="<?php echo $img[1]; ?>" height="<?php echo $img[2]; ?>">
					</amp-img>

					<?php
				}
				?>
				<span><?php the_title(); ?></span></a></p>
			<?php } ?>
			</div>
		</div>
	<?php
	}
	wp_reset_postdata();
}
?>

Step 2: Functions

Add the following to your functions (see how to add functions).

The first function adds related posts to the post footer parts. By default, since version 0.4, AMP shows categories, tags, and a big “Comments” button under each post.

This adds related posts after categories and tags, but before the big Comments button. You have two other choices:

1. To show related posts before the categories and tags, change the 1 on line 6 to 0.
2. To show related posts after categories, tags, and the Comments button, change the 1 on line 6 to 2.

/**
 * Add related posts to AMP amp_post_article_footer_meta
 */
function my_amp_post_article_footer_meta( $parts ) {

	$index = 1;
	
	array_splice( $parts, $index, 0, array( 'my-related-posts' ) );

	return $parts;
}
add_filter( 'amp_post_article_footer_meta', 'my_amp_post_article_footer_meta' );

/**
 * Designate the template file for related posts
 */
function my_amp_related_posts_path( $file, $template_type, $post ) {

	if ( 'my-related-posts' === $template_type ) {
		$file = get_stylesheet_directory() . '/amp/related-posts.php';
	}
	return $file;
}
add_filter( 'amp_post_template_file', 'my_amp_related_posts_path', 10, 3 );

Step 3: Only If Showing Images For Related Posts

This step is only needed if you have chosen to show the featured images with your related posts (if you used the second code from Step 1). You should add the following to your functions. This adds some style to align your images. You can insert more CSS styles into line 11, if you need more style customizations.

/**
 * Style to align the AMP related posts images
 */
add_action( 'amp_post_template_css', 'isa_amp_css_styles_fonts' );
function isa_amp_css_styles_fonts( $amp_template ) {
    ?>
   #amp-related-posts p amp-img { 
		margin-right:1em;
		vertical-align: middle;
    }

    <?php
}