The basic design of a page using AMP works for news articles. This is by design. It’s meant to be fast to load and fast to display, and that means removing the majority of cruft we shove in sidebars and footers. It means a streamlined website.

A basic AMP page

That’s a basic page but it works well for what it needs to be. The issue happens when you consider pages that aren’t your typical ‘news’ pages.

Compare the information in a character page. On the left is the normal page and the right is the AMP page.

An example character page with the regular on the left and the AMP on the right

There’s some work to be done, obviously. Enter Custom Templates.

Calling the Right Template for the Job

The example code works great when you want to universally replace things. I don’t. I want to use a different template per-CPT, so my code is this:

/*
 * AMP custom templates
 */
add_filter( 'amp_post_template_file', 'lez_amp_post_template_file', 10, 3 );
function lez_amp_post_template_file( $file, $type, $post ) {

	$post_type=$post->post_type;

	if ( 'post_type_characters' === $post_type || 'post_type_shows' === $post_type ) {
		$file = get_stylesheet_directory() . '/amp-templates/shows-chars.php';
	}
	return $file;
}

That was the easy part.

Making Your Template

Now I need to make the template. It’s actually not as obvious as it might be. You can’t just copy the single.php file from the AMP templates folder and go. No, if you want to use it as-is, you will need to set up how to pull the custom templates.

For the quick example, we have the Single Template and with that we have to replace all the calls to load_parts. They look like this:

<?php $this->load_parts( array( 'header-bar' ) ); ?>

We have to change them because the code for load_parts is relative to the file, and it doesn’t call .php so it’s a bit of a drama to call them. I replaced it with this:

<?php include_once( WP_PLUGIN_DIR . '/amp/templates/header-bar.php' ); ?>

This is pretty much what I tell plugin developers not to do. Never ever use WP_PLUGIN_DIR unless you absolutely have to. Always use plugins_url() and plugin_dir_path() please and thank you. But since I can’t use a URL in include_once() because it’s https) and I can’t use plugin_dir_path() because it’s relative to the file it’s called from, and this is called from the theme. So yes, here I have to use the one constant I tell you not to use. I’m aware of the irony.

The rest of the template is mostly removing things I can’t filter out. I removed the feature image, I removed the byline (we don’t care who wrote the CPTs, authorship isn’t an issue), and I removed the taxonomies.

Fix The Images

Once the main file is loading properly, it’s time to address the two problems with the images: size and location. There’s, thankfully, some default code that can help with this that didn’t need a template. AMP comes with directions on changing your featured image but the example code had to be tweaked in order to handle multiple post types:

add_action( 'pre_amp_render_post', 'lez_amp_add_custom_actions' );
function lez_amp_add_custom_actions() {
	add_filter( 'the_content', 'lez_amp_add_featured_image' );
}

function lez_amp_add_featured_image( $content ) {
	global $post;

	$post_type=$post->post_type;
	$post_id=$post->ID;
	$image_size = 'featured-image';

	if ( $post_type === 'post_type_characters' ) $image_size = 'character-img';
	if ( $post_type === 'post_type_shows' ) $image_size = 'character-img';

	if ( has_post_thumbnail() ) {
		$image = sprintf( '<p class="lezwatch-featured-image">%s</p>', get_the_post_thumbnail( $post_id, $image_size ) );
		$content = $image . $content;
	}
	return $content;
}

But. This made double images! Why? Because this is a lie: “The default template does not display the featured image currently.”

It does. This is why I removed the featured image in my template. If I can figure out how not to do that, I’ll be 90% of my way to not needing a custom template at all, because everything else I did in the filter.

Add the Extra Content

Remember function lez_amp_add_featured_image() above? Yeah I threw it out and made an insanely complex. I renamed it function lez_amp_add_content() and the if ( $post_type === 'post_type_characters' ) {} section became huge so that I could output the code the way I wanted.

Filtered content for the AMP pages for characters

In the image above, you can see I’ve not only added in a lot more meta content from the post, but I also tweaked the CSS to float the image to the left and resize the SVGs. I went super image light on this, loading the smallest image that would work, and the SVGs are very small sized.

Overall? It should be easier

The biggest issue I have with this is that I wish I could filter more. If I could turn off the featured images and remove the bylines, then I wouldn’t need the custom template at all. At least, not for the characters. The shows? That’s another matter.

Reader Interactions

%d bloggers like this: