Accelerated Mobile Pages (AMP)

Home / Plugins / Accelerated Mobile Pages (AMP)

Bootplate is all about speed so we can’t ignore projects like Google’s Accelerated Mobile Pages project (AMP). This pre-tested plugin enables Accelerated Mobile Pages (AMP) on your WordPress site and it’s already been tested and (slightly) customized for use with Bootplate.

What is AMP?

Google’s Accelerated Mobile Pages Project (or “AMP” for short) is an open source initiative that came out of discussions between publishers and technology companies about the need to improve the entire mobile content ecosystem for everyone – publishers, consumer platforms, creators, and users.

Accelerated Mobile Pages are just like any other HTML page, but with a limited set of allowed technical functionality that is defined and governed by the open source AMP spec. Just like all web pages, Accelerated Mobile Pages will load in any modern browser or app webview.

AMP files take advantage of various technical and architectural approaches that prioritize speed to provide a faster experience for users. The goal is not to homogenize how content looks and feels, but instead to build a more common technical core between pages that speeds up load times significantly.

By using the AMP format, content producers are making the content in AMP files available to be crawled, indexed & displayed (subject to the robots exclusion protocol) and cached by third parties.

Perhaps more importantly, websites taking advantage of the AMP HTML format can be included in Google’s carousel with an “AMP” designation.

This is meant to encourage publishers to adopt the format and for users to click the card because they know the page will open almost instantly.

Speed matters.  It matters more now than ever.

AMP HTML (the easy way)

Thanks to the team at Automattic, there’s a free WordPress plugin called AMP which handles all this complicated AMP HTML conversion stuff for you.  All you have to do is install and activate the plugin.  That’s it. Seriously.

Here’s an example with and without AMP enabled.

• Normal Bootplate Post: bootplate.jdmdigital.co/2016/03/latest-post/
• Bootplate AMP(ed) Post: bootplate.jdmdigital.co/2016/03/latest-post/amp/

There’s a screenshot to the right just to show you that it’s 100% AMP valid according to Chrome Developer Tools.

Long live the mobile web!

Bootplate + AMP

The AMP plugin currently only supports the POST type (no pages) as that’s in the spirit of the project’s initiative.  So the plugin only works on Posts.  That’s no big deal.

Bootplate has a function built-in to detect that you’ve installed and activated the plugin.  Once detected, it adds a filter with a little more Bootplate-esque CSS styling.

To make your own styling, you can overwrite the function by adding something like this to your child theme’s functions.php file.

The theme’s version of the file is wrapped in a if(!function_exists()) statement.  That’s PHP nerd-speak for you’re welcome to overwrite it by creating a function with the same name and it’ll simply skip the original function (yours already exists).

More information about the amp_post_template_css action inside of the AMP plugin is available on the plugin’s GitHub README.