This article has been archived.
My AMP experiment has ended. This website is no longer using AMP. AMP Stories plugin for WordPress is now Web Stories for WordPress and does not require AMP. I’ll follow up with a post about it soon.
In my previous post, I shared how I enabled AMP on this Genesis website. In this post, I’ll cover a few ways to configure AMP Stories in WordPress including adding an archive page for them. If you are looking for new creative ways to tell visual stories, AMP Stories does just that. It’s interactive, impactful, and immersive.
AMP stories immerse your readers in fast-loading full-screen experiences. Easily create visual narratives, with engaging animations and tappable interactions.
AMP.DEV
It’s free and part of the open web, so anyone can create powerful, user-first, media-rich presentations on their website all with the speed and efficiency of AMP.
AMP Stories in the wild
If you have not seen one yet, here are a few from the wild to give you some context:
Protecting the Antarctic: A Journey to a continent in distress
CNN by Arwa Damon, Brice Laine, and Mark Tutton | July 6, 2018
Experience the historic Apollo 11 mission
Washington Post by Sarah Kaplan, Nick Kirkpatrick, Clare Ramirez, and Jhaan Elker | July 19, 2019
Thanks to the hard work by AMP for WordPress team, adding visual stories to your WordPress site is now as easy as creating a page or post in the Gutenberg editor.
Thanks to AMP Stories and healthy open source initiatives we will now be able to own, and share our own content in this new visual media platform the WordPress way.
Cathi Bosco, CathiBosco.com
Creating an AMP Story in WordPress
First, you’ll need to install the latest version of the Official AMP plugin for WordPress. To use stories, you currently must have the latest version of the Gutenberg plugin installed and activated (even if you are using the latest version of WordPress that includes Gutenberg). Enable AMP Stories (beta) in the AMP plugin settings.
The AMP for WordPress site provides a basic tutorial for creating an AMP Story.
Genesis themes that support AMP
Essence Pro and Genesis Sample themes are AMP ready. As I mentioned in my previous post, this website is a modified version of the Agency Pro theme, which I have adapted for AMP. I’ll be writing a future post sharing how to adapt another Genesis theme for AMP.
For the purposes of this demonstration, we will be using Essence Pro. I created two sample AMP Stories.
Once you’ve created your AMP Stories, you can view them by linking directly to them. You can also embed a carousel of the latest stories on a page in the Gutenberg editor using the Latest Stories block like this:
Taking things further…
Adding an Archive Page for AMP Stories
For both CathiBosco.com and my test site, we wanted to add functionality that would create an archive page to display all of the stories in a grid, just like the blog posts do. To do that, I created a simple plugin to add an archive page and some additional functionality for AMP Stories.
Here is the code that enables the archive page. This code works for non-genesis themes too.
| add_action( 'init', 'jdd_amp_story_modify', 15 ); | |
| /** | |
| * Updates custom post type configuration of AMP Stories to enable archive pages. | |
| * | |
| * @return void | |
| */ | |
| function jdd_amp_story_modify() { | |
| if ( post_type_exists( 'amp_story' ) ) { | |
| $amp_modify_stories = get_post_type_object( 'amp_story' ); // get the post type to modify. | |
| $amp_modify_stories->has_archive = true; // adds support for archive. | |
| if ( $amp_modify_stories ) { | |
| register_post_type( 'amp_story', $amp_modify_stories ); | |
| } | |
| } | |
| } |
Genesis Archive Page Settings
One of the nice features in Genesis is the support for archive page settings for categories and tags. You can also extend this to custom post types. Since AMP Stories are just that, this code enables support for the Genesis Archive page settings so that you can easily enter a title and intro description for the archive page.
| add_action( 'init', 'jdd_amp_story_archive_settings' ); | |
| /** | |
| * Add Genesis CPT Archive Settings for AMP Stories. | |
| * | |
| * @see https://www.billerickson.net/genesis-archive-settings-for-custom-post-types/ | |
| */ | |
| function jdd_amp_story_archive_settings() { | |
| if ( 'Genesis' === wp_get_theme()->parent_theme ) { | |
| add_post_type_support( 'amp_story', 'genesis-cpt-archives-settings' ); | |
| } | |
| } |
Adding the class half-width-entries here will format the archive page to use the grid layout of the blog page (Essence Pro theme).
Finally here is the code to include the stories on the blog, category and tag archive pages. Whether or not you choose to do that is up to you and how you want the content structured on your site.
| /** | |
| * Adds AMP stories to blog, category and tag archive pages. | |
| * | |
| * @param array $query Current query. | |
| * | |
| * @return array $query Updated query. | |
| */ | |
| function jdd_add_custom_types_to_taxonomies( $query ) { | |
| if ( is_home() || ( is_category() || is_tag() && $query->is_archive() ) ) { | |
| if ( empty( $query->query_vars['suppress_filters'] ) ) { | |
| $query->set( | |
| 'post_type', | |
| array( | |
| 'post', | |
| 'amp_story', | |
| ) | |
| ); | |
| } | |
| } | |
| return $query; | |
| } | |
| add_filter( 'pre_get_posts', 'jdd_add_custom_types_to_taxonomies' ); |
We also included a custom home.php and archive.php to display the portrait featured image on the blog, category, tag, and archive pages.
| <?php | |
| add_filter( 'genesis_pre_get_option_site_layout', '__genesis_return_full_width_content' ); | |
| // * Remove the post image (requires HTML5 theme support) | |
| remove_action( 'genesis_entry_header', 'genesis_do_post_image', 1 ); | |
| /** | |
| * Archive page featured image for stories and other posts. | |
| */ | |
| function jdd_amp_featured_image() { | |
| if ( get_post_type() === 'amp_story' ) { | |
| echo wp_kses_post( wpautop( '<a href="' . get_permalink() . '">' . genesis_get_image( array( 'size' => 'amp-story-poster-portrait' ) ) . '</a>' ) ); | |
| } else { | |
| echo wp_kses_post( wpautop( '<a href="' . get_permalink() . '">' . genesis_get_image( array( 'size' => 'featured' ) ) . '</a>' ) ); | |
| } | |
| } | |
| add_action( 'genesis_entry_header', 'jdd_amp_featured_image', 6 ); | |
| genesis(); |
The code is the same for both files. The home.php handles the blog page and the archive.php handles everything else.
Adding desktop and landscape support
Desktop and landscape support creates a fully immersive view on the desktop and adds the ability to view the story in landscape mode on a mobile device. The AMP Story I shared at the beginning of this post from CNN does not support this, meaning on a desktop you’ll see this:
On your mobile device in landscape mode, you’ll see this.
Stories that enable supports-landscape fill the screen on desktop and on mobile in landscape view. You can see this in action here on the AMP site.
Support is coming to the Official AMP plugin for WordPress to enable desktop and landscape modes on individual stories. To enable it now, you can use this bit of code (thanks to Weston Ruter) that will add support for landscape on a story if that story has a taxonomy tag of ‘landscape’.
| /** | |
| * Enable landscape (desktop) support for stories that have the 'landscape' tag. | |
| * Author: Weston Ruter, Google | |
| * Author URI: https://weston.ruter.net/ | |
| * https://gist.github.com/westonruter/2ea25735be279b88c6f0946629d0240c | |
| */ | |
| add_filter( | |
| 'amp_story_supports_landscape', | |
| function ( $supports, $post ) { | |
| if ( has_tag( 'landscape', $post ) ) { | |
| $supports = true; | |
| } | |
| return $supports; | |
| }, | |
| 10, | |
| 2 | |
| ); |
UX challenges
When I visited an AMP Story for the first time, I had a few questions:
How do I exit this story if I do not wish to view the entire story?
How do I get back to where I came from once I finish?
It was not intuitive to me that I needed to use the browser’s back button. I was looking for a “return to the previous page” button somewhere on the last page of the story.
Social sharing, bookend, and sidebar
AMP Stories in WordPress right now lacks the ability to add a bookend or sidebar. You can not add social media links to the AMP story share control icon button. I expect these to be added in future releases of the AMP plugin.
Code snippets used
You can find all the code snippets used in this article here on this Github gist. These were created for the Essence Pro theme but should be easily adapted for other themes. Feel free to experiment and create your own unique experiences.
Demo with stories in WordPress
Cathi Bosco has created a few AMP Stories on her website. Some are using the landscape mode, so you can see how both render on desktop and mobile.
Best practices for AMP Stories
Before we wrap up, it is a good idea to review these best practices when creating AMP Stories. Pay attention to aspect ratios, readability, and context. There are some excellent examples of do’s and don’ts to read through.
Wrapping up
This is a powerful new media platform that opens the door to tell stories in a way you could not easily do before. I encourage you to explore how you can use this new platform to tell your stories.
Learn more about AMP Stories.
[shared_counts location="shared-count-icons" style="fancy"]