Home

AMP and WordPress

Automattic announced support for AMP back in October 2015 and has released a plugin for .org sites called AMP. The AMP plugin is available from the WordPress Plugin Repository now, but it’s a pretty spartan affair. After installing the plugin, you won’t notice any new administration screens or options, the only changes will include a new tag added to your

HTML on single post pages and the addition of an /amp/ URL endpoint for single post pages.So how does it look? If you’re on an AMP-powered wordpress site, you can add “/amp/” at the end of the URL and get the optimized version.

And you don’t lose much as AMP markup supports a wide range of features. For instance, AMP has worked with ad networks, such as Outbrain, AOL, OpenX, DoubleClick and AdSense, to create optimized tags for mobile pages. So you can still put ad tags in your AMP-enabled pages. Similarly, you can add analytics tools. But these JavaScript calls will be optimized.

For self-hosted WordPress sites, there are various hooks in the code to customize your AMP template. The company is still working on an easier customizing interface for WordPress.com sites.

As for all the things that usually slow down web pages today, such as embeds, JavaScript-heavy content or Flash, WordPress strips out this content from the AMP pages. Comments are also omitted by default.

WordPress adding amp support is a big deal as 25 percent of the web runs on WordPress. The AMP project is off to a good start with WordPress’s backing. All WordPress sites are now potentially AMP-enabled.

I have a site running the default Twenty Sixteen theme and some sample content. Here’s how one of the posts looks in Mobile Safari – the standard post is on the left and the /amp/ version is on the right:

Amp-out-of-the-box

The Twenty Sixteen theme already loads pretty quickly on mobile, but it’s worth mentioning that the AMP version of the page loaded and rendered noticeably quicker. That’s where the excitement ends though. The AMP page looks nothing like the rest of my site and what’s worse is it looks just like almost every other site out there that’s using the AMP plugin. As I mentioned, there are no options in the wp-admin for customizing the look of your amp page, so we’ll need to dive into some code if we want to make any changes here. Customizing the AMP WordPress Plugin’s Output

The plugin’s readme has full instructions for customizing your AMP pages, so I won’t go too deep here, but I do want to cover some of the basics that WordPress theme and site developers will need to become familiar with if you want to incorporate support for AMP pages in your projects.

I’d like to at least make sure that AMP pages on my site still feel like my site, so I’m going to need to modify the general color scheme, and probably tweak the way that the header looks. There are a few options for doing this:

Add a folder called amp to your theme and place override files in there. In this case, we’ll create a style.php file to completely override the AMP plugin’s default styling.
Use the amp_post_template_file filter to specify a custom file to use instead of the default style.php file. This method is useful if you’re writing a plugin or don’t want to modify the theme for whatever reason. Similar to the amp folder in your theme file, you can use this filter to override any of the AMP template files. The code would look something like this:

// Override AMP CSS with custom file 
add_filter( 'amp_post_template_file', 'dbawp_amp_set_custom_template', 10, 3 );
function dbawp_amp_set_custom_template( $file, $type, $post ) {
    if ( 'style' === $type ) {
        $file = dirname( __FILE__ ) . '/inc/amp-style.php';
    }

    return $file;
}

Finally, the AMP plugin provides the amp_post_template_css filter for appending CSS to the existing amp stylesheet which can be used alone or in addition to the previous methods. Since the whole point of AMP is to be as slim as possible, you’ll probably want to use one of the previous methods if you’re overriding a lot of the plugin’s existing styles. On the other hand, if you’ve just got a few tweaks, or the majority of the styles you’ll be adding will be additions and not overrides, the amp_post_template_css filter is probably the preferred method. It’s what I’ll be using to quickly fix up the look of my AMP pages. Here’s the code I’ve added to a functionality plugin:

add_action( 'amp_post_template_css', 'dbawp_amp_my_additional_css_styles' );
function dbawp_amp_my_additional_css_styles( $amp_template ) {
    // only CSS here please...
    ?>
    body {
        background-color: #425259;
    }
    nav.amp-wp-title-bar {
        background-color: #616a73;
        font-size: 30px;
        font-weight: bold;
    }
    .amp-wp-meta, .amp-wp-meta a {
        color: #CBD0D4;
    }
    .amp-wp-title {
        color: #fff;
    }
    .amp-wp-content {
        color: #fff;
    }
    <?php
}

And here’s how that same AMP page looks now:

custom-amp

The AMP plugin’s readme file provides quite a few more filters that can be used to modify small bits such as the site icon or override entire template files as I outlined earlier, so make sure to check that out if you’d like to dive deeper into customizing the AMP plugin’s output.