Plugins

Get to Know the Official AMP for WordPress Plugin

In my last blog post, I filled you in on what’s new with the AMP Project and why I think it’s worth a second look. Today, I want to go in depth with the official AMP for WordPress plugin.

Real Quick, What Is AMP?

AMP is an open-source project whose mission is to make the web better for all. AMP enables web experiences that are consistently fast, beautiful, and high-performing across distribution platforms.

AMP’s strength isn’t just that pages are fast but pages are fast in a way that can be validated. The official AMP for WordPress plugin supports fully integrated AMP publishing for WordPress sites with robust capabilities and granular publisher controls. Consider reading my previous post since it covers some of the lingo.

A simplified diagram showing how AMP works
A diagram showing how AMP works, courtesy of Weston Ruter.
Google search results with the AMP logo
AMP pages are shown with a ⚡️next to them in Google and Bing search results. When using Twitter on a mobile device, you are linked directly to the AMP version, if a separate one exists.

A Brief Timeline

The Official AMP for WordPress plugin has come a (really) long way from its humble beginnings where it primarily “AMPlified” WordPress blog posts. When the plugin was first introduced, the AMP project itself was in its infancy. AMP versions of blog posts were stripped down using generic templates because AMP did not have the ability to replicate all the experiences the user has on their active theme. Fast forward three years, there’s now deep integration with Gutenberg, Native AMP-first experiences, support for core WordPress themes, and most recently, support for AMP Stories.

  • January 28, 2016 -V0.2 was released, which took posts and made them AMP compatible.
  • January 18, 2018 – V0.6 was released, which added support for turning WordPress pages into AMP, allowed preview before publishing, and allowed the user to choose which posts/pages were to be AMPlified.
  • May 3, 2018 – V0.7 was released, enabling themes to opt in to Native AMP mode (aka AMP-first) and improving native WordPress support, error surfacing, and support for theme AMP templates.
  • December 4, 2018 – V1.0 was released, which included support for Gutenberg, added a validation screen, support for four core WordPress themes, a new Paired Mode, and gave users fine grain control over the theme and AMP URLs.
  • April 16, 2019 – V1.1 was released, which added CSS tree shaking, re-branded template modes (Paired Mode now Transitional; Classic Mode now Reader), navigation and image processing improvements, as well as experimental PWA integration.
  • June 19, 2019 – V1.2 was released, enabling AMP Stories powered by Gutenberg, re-branded Native Mode to Standard, improved support for core theme, editor, CSS, and added validation and other developer improvements.

As the AMP Project has grown, the WordPress plugin has grown with it, thanks to open-source contributors and the development teams at Google, Automattic, and XWP.

What Does the AMP for WordPress Plugin Do?

From the plugin’s website:

The official AMP plugin is an extension to the WordPress platform which plays three main roles:

  1. It automates large parts of the AMP content generation process in WordPress by integrating into the standard content creation mechanisms.
  2. It provides tools and guidance to support developers on the parts that need to be done manually.
  3. It acts as a monitor and enforcer to maintain AMP compatibility as sites evolve.

In short, it was designed to enable AMP content creation while allowing authors to retain their standard WordPress workflow. 

How Do I Use It?

It depends on what role you play. Are you a Site Owner? Developer? Implementor? These three roles have totally different points of view on usage.

Ideally, you configure the AMP plugin based on your AMP strategy. (You do have a strategy, right?) This is important, and the whole AMP-strategy-topic could be its own blog post. Generally speaking, and for the scope of this article, you’ll need to install and activate the plugin and then configure it based on your needs.

I’ll focus on the Transitional Mode for the rest of this blog post.

Choose Your Experiences

  • Website – This enables AMP Websites.
  • Stories – This enables AMP Stories. Activating this will create a Stories post type.

A screenshot of the two AMP experiences

A Bit More on AMP Stories

Fresh off the V1.2 release, AMP Stories provide authors with a fun, mobile-focused format (think Instagram or Snapchat) for delivering visually-rich, tap-through stories. The editing experience is going through some more refinements, but overall, I found this feature to be fairly easy to use. The result is a cool way to display photos. As an example, you can see my summer vacation story below. You can also view more examples of AMP Stories.

Note: As of writing, it’s only supported in Gutenberg V5.8, but will be in core soon. 

Screenshot of how to use AMP Stories in Gutenberg
Building an AMP Story in Gutenberg
Example AMP Story powered by Gutenberg + AMP for WordPress
Example AMP Story powered by Gutenberg + AMP for WordPress

Choose Your Website Mode

  • Standard – This makes your website AMP-first. This means that all of your website content will be served with AMP HTML on all devices. This strategy is called, “AMP as your Framework” and is the recommended mode since it eliminates the need to maintain two different versions of your website.
  • Transitional – Formally known as Paired Mode, Transitional Mode means that you’ll have two versions of your content: Non-AMP and AMP, both powered by your theme.
  • Reader – This mode creates bypasses within your theme to allow basic templates to display AMP content. You can edit Reader Mode templates. (Note: The WDS website is in Reader Mode, as we finalize our own AMP strategy.)

Screenshot displaying the three different website modes

Other Options

  • Validation Handling – Leave this checked if you want the AMP plugin to auto-magically sanitize and create valid AMP pages.
  • Supported Templates – If checked, the AMP plugin will serve up all content types as AMP HTML.
  • Caching – If an object caching plugin is installed, such as W3 Total Cache, this option will appear.

Screenshot displaying other AMP options

A Bit More on Supported Templates

I don’t want to gloss over this setting. When in Transitional Mode, you may want to disable AMP for your homepage, archives, 404, search, or certain landing pages. If these pages are left unchecked, then the AMP plugin will ignore them.

Screenshot of the different supported template types in AMP

Add Google Analytics (if that’s what you use)

You can use this snippet as a primer. Just replace the account number with your own:

{
    "vars": {
        "account": "UA-12345678-1"
    },
    "triggers": {
        "trackPageview": {
            "on": "visible",
            "request": "pageview"
        }
    }
}

Screenshot of google analytics configured in AMP

As we look to the future, Google Site Kit will be the recommended way to add Google Analytics.

Tweak with the Theme Customizer

If you’re using Reader Mode, then the AMP for WordPress plugin also ships with a legacy default template. This allows you to tweak small pieces of the template (or the entire thing, depending on your needs) in the Theme Customizer.

Tweaking AMP template in the Theme Customizer for Reader Mode
Tweaking AMP template in the Theme Customizer for Reader Mode

You can also tweak settings programmatically in a child-theme, plugin, or using functions.php. Here’s a quick snippet to add custom CSS that I placed in functions.php:

/**
 * Set custom styles.
 *
 * @author Greg Rickaby
 * @param object  $amp_template  Object containing the post object.
 */
function wds_amp_custom_css_styles( $amp_template ) {
    ?>
    .amp-wp-footer h2 {
        font-family: sans-serif;
        margin: 0;
        padding: 0;
    }
    .amp-wp-footer a {
        padding-bottom: 2px;
    }
    <?php

}
add_action( 'amp_post_template_css', 'wds_amp_custom_css_styles' );

Learn more about customizing classic templates in the official docs:

Classic Templates

Fine Grain Control

If you have a piece of content that you absolutely don’t want to be AMPlified, you can toggle this switch in the editor:

Screenshot displaying the AMP toggle switch

Dealing with Validation Errors

This screen is going to fill up with red validation errors, making your gut wrench at the thought of having to fix them. Fret not, because depending on which website mode you’re running, you may not have to lift a finger since AMP can sanitize most errors for you!

The AMP plugin’s sanitizer will remove all custom JavaScript, and it will also unwrap any “noscript” elements. The result is that if your theme/plugins have good fallback experiences for when JS is disabled, then you’ll get a good baseline AMP experience, as well. On top of this base, you can then add in AMP components to introduce the desired interactivity. Let’s analyze the screenshot below:

Screenshot displaying the error index

You can see there are three errors that all have a status of “New Accepted.” What exactly does this mean?

From the official documentation:

If the plugin is configured to perform automatic sanitization, any newly identified validation error is classified as “New Accepted” and the offending elements are removed.

Okay, so what now? You have two options:

  1. Accept the error. Let AMP sanitize the markup (remove the offending items) and serve valid AMP content (as seen in the last two errors).
  2. Reject the error. Prevent any page containing this error from being served as valid AMP content. (which may be okay, depending on your AMP strategy). In Transitional Mode, this results in redirecting to the non-AMP version. In Standard Mode, the AMP attribute is removed from the HTML element to prevent Google Search Console from flagging pages containing the offending element.

Finally, if you’ve gone ahead and fixed some errors yourself (disabling a non-compatible plugin, removing an enqueued script, etc.), you can click the  Clear Empty button at the top of the page to remove them from this screen.

Keep in mind, this screen is not intended not to scare you, but rather to help identify areas of your website (or plugins) that need help from the AMP plugin in order to serve valid AMP content. These errors, should serve as a road map on where development efforts need to be focused (e.g., introducing native AMP components) first.

Learn more about AMP Debugging Workflow by reading the official docs:

AMP Debugging Workflow

Functions

In addition to being able to opt in to the theme templates via the plugin’s admin settings, you can also programmatically enable options using add_theme_support. The following will enable Transitional Mode (formerly Paired Mode):

add_theme_support( 'amp', array(
    'paired' => true,
) );

You could leverage the following function to determine if the current response is being served as AMP.

is_amp_endpoint() 

Learn more about Serving Strategies and how to handle form submissions, comments, accessibility concerns, and implementing analytics in the Playbook. Finally, you should definitely check out Bill Erickson’s blog, as he writes about AMP development for clients.

Quickly Scan Your Entire Website Using WP-CLI

The AMP for WordPress plugin ships with a WP-CLI command, which is helpful when getting your WordPress theme AMP-ready. I’m using Local by Flywheel and can run the following command:

wp amp validate-site
Screenshot displaying the results of a WP-CLI validation scan
The results of a WP-CLI validation scan showing my content is valid and AMP-ready

Learn more about running WP-CLI commands by reading the official docs:

WP-CLI Commands

Validated URLs

After fixing the errors and running the WP-CLI command, you see the three pages now appear as Validated URLs and are AMP-ready.

Screenshot displaying validated AMP URLs

AMP-Ready Themes and Plugins

There are twelve AMP-Ready themes, including the last nine WordPress core themes, going all the way back to Twenty Ten! If you’re already running one of these themes, the level of effort to running in Native Mode will be minimal.

There are several compatible plugins, too, including Yoast, Monster Insights, AddThis, WPForms, of course, Gutenberg, and several modules in Jetpack (work is underway to make all modules in Jetpack AMP compatible). Learn more about developing with the AMP Plugin:

How to Develop with the AMP Plugin

Submitting Your Compatible Theme or Plugin

Is your theme or plugin AMP compatible? You can submit your theme or plugin and have it listed on the Official Ecosystem Page.

Contributing

Both the AMP Project and the Official AMP for WordPress plugin are open-source and welcome contributions. Learn more:

Wrap Up

A few years ago, there was plenty of criticism about the AMP Project and even more worry over Google creating a “walled-garden of content.” Furthermore, the thought of having to learn “yet another framework” and write code “the Google way” had many developers rolling their eyes.

In my opinion, Google’s done a great job of proving their critics wrong. They’re doing so through active and open-sourced development, transparency around their governance, the growing number of free continuing education courses, and their commitment to the Official AMP for WordPress plugin. I honestly believe they’re truly committed to a better web for all.

Here at WebDevStudios, we’re also working to make the internet a better place by working through our AMP strategy. We will probably switch from Reader Mode to Transitional Mode in the near future. Does your organization have an AMP Strategy? Let me know in the comments below.

 


The author wishes to thank Paul Bakaus and Weston Ruter for their assistance with reviewing this content.

Comments

2 thoughts on “Get to Know the Official AMP for WordPress Plugin

  1. AMP was a topic that had a ton of hype a couple of years back and with all the ridicule it seemed to have faded away to the point that I thought Google would just get rid of it altogether. I’ve tried implementing this strategy with various website design projects which would only work a fraction of the time without running into a ton of issues or having to redesign how a site appeared on mobile. Therefore, I would only implement AMP specifically on blog pages and nothing else.

    This is a gamechanger for sure and quite the information provided in this article that has me rethinking my whole approach to website design. The story feature is definitely intriguing and I wonder if it would allow the option to pull directly from some of those social channels that already utilize it. Not sure how I feel about the AMP plugin only being powered by Gutenberg for that feature, but I’m sure with time it will adjust to other editor interfaces.

    I’m curious, does Google still indicate if a site is AMP-powered? Is that part of the verification process or did they get rid of that indicator altogether?

Have a comment?

Your email address will not be published. Required fields are marked *

accessibilityadminaggregationanchorarrow-rightattach-iconbackupsblogbookmarksbuddypresscachingcalendarcaret-downcartunifiedcouponcrediblecredit-cardcustommigrationdesigndevecomfriendsgallerygoodgroupsgrowthhostingideasinternationalizationiphoneloyaltymailmaphealthmessagingArtboard 1migrationsmultiple-sourcesmultisitenewsnotificationsperformancephonepluginprofilesresearcharrowscalablescrapingsecuresecureseosharearrowarrowsourcestreamsupportunifiedupdatesvaultwebsitewordpress