How to Setup AMP Support for WordPress

How to Setup AMP Support for WordPress

In this tutorial we’re going to step through the ins and outs of generating valid AMP versions of your WordPress site’s posts. We’ll be doing this by using the AMP plugin created by Automattic.

There are alternative plugins available you could use instead if you choose, but as we only really have room to look at a single plugin in this tutorial we’ll keep the focus on the one created by the team behind WordPress itself.

Note: this article assumes you are already familiar
with how to create valid AMP pages, and as such will be focused on the
details specific to using WordPress and AMP together. If you’re new to AMP,
check out:

It also assumes you are familiar with running a self hosted WordPress site. If not, you might find these resources helpful:

Automattic’s AMP Plugin

This plugin, named simply AMP, automates the generation of AMP valid single posts. For each post you create, a second version will also be available with /amp/ appended to the permalink. If you are not using WordPress’ permalink rewriting functionality on your site /?amp=1 will be appended to the URL instead.

For example this is a regular WordPress post:

Note that here I have the AMP Validator extension installed in Chrome which detects there is an AMP version of this page available and displays a little blue link icon:

AMP Validator extension
AMP Validator extension

If I click on the extension’s little blue link icon it takes us to the AMP version of the post:

Using this plugin in its default state is pretty much “plug and play”. Install, activate, and you’re up and running. There are no configuration options requiring your attention as part of setup.

At present this plugin only works on single posts–it doesn’t affect pages, custom post types or archives. The plugin’s page at the WordPress repository states support for these is currently in development.

Use With Yoast SEO via Glue

If you like using Yoast’s SEO plugin for your regular posts, there is an additional plugin named “Glue for Yoast SEO & AMP” available to output Yoast-style metadata into your AMP posts as well. For example, it added these meta tags to the demo post pictured earlier:

To use this plugin you’ll first need to have the main Yoast SEO plugin installed. The Glue plugin will then add an extra section labelled AMP to the plugin’s main SEO admin menu.

Media and Custom AMP Elements

One of the most significant parts of creating AMP valid pages is using its reqired custom elements for media placement, such as amp-img instead of img for example. However when creating posts in WordPress you typically work in the WYSIWYG TinyMCE editor and don’t directly control the markup used for media insertion.

With the Automattic AMP plugin installed you don’t have to worry about this as it will automatically filter your content and make the following conversions to custom AMP elements:

  • img → amp-img or amp-anim
  • video → amp-video
  • audio =→ amp-audio
  • iframe → amp-iframe
  • YouTube oEmbed → amp-youtube
  • Instagram eEmbed → amp-instagram
  • Twitter oEmbed → amp-twitter
  • Vine oEmbed → amp-vine

Note: if you’re using Flash anywhere on your site it isn’t supported. Any other type of media can be used in AMP posts as long as it’s added using one of the items from from the list above.

Shortcodes and Plugins

Another consideration when using Automattic’s AMP plugin on your WordPress posts is how shortcodes and plugins will behave.

Header and Footer Output

Automattic’s plugin prevents AMP posts from using the normal wp_header() and wp_footer() theme functions that are often tapped into by plugins to output custom JavaScript, CSS and HTML. If a plugin you are using depends on either of these functions it will not work.

For a plugin to generate custom code in combination with the AMP plugin it has to make use of special actions and filters that substitute for normal WP theme functionality. For example, you can’t add meta tags to the <head> section as you typically would, by using the wp_head action to output code through the wp_header() function, but you can use the amp_post_template_metadata filter instead.

Yoast’s Glue plugin uses these special actions and filters, which is how it is able to output SEO data and custom CSS on AMP pages without breaking validation.

Shortcodes

If you are using plugins that rely on shortcodes you’ll need to ensure the code they output is:

  1. AMP valid, e.g. no inline JS or CSS
    and / or
  2. Markup from the list in the previous section that the AMP plugin automatically converts to the required custom elements.

To check on this, go to a post that you know uses the shortcode(s) in question and use the AMP Validator plugin in Chrome / Chromium to see if the post passes validation.

Custom JavaScript

Something else to bear in mind when using plugins on an AMP’ed site is that no custom JavaScript is allowed, so plugins that depend on JavaScript are not going to work at all. For example, if you’re using a plugin to drive a JavaScript powered image slider it will not function.

Analytics

If you’re using analytics that depend on a JavaScript snippet, AMP’s exclusion of custom JS means you’re going to need to replace the snippet with the amp-analytics element on your AMP pages.

This means you are restricted to analytics services Google has elected to support in AMP, but the good news is there are several vendors on the list.

You can either use a plugin to generate AMP friendly analytics code, or you can add tracking code yourself manually.

For inclusion via a plugin, Yoast’s Glue plugin has a section in which you can add Google Analytics code, and it will convert the code to AMP friendly format for you. To find it go to the AMP section in the SEO menu for Yoast’s plugin, then to the Analytics tab:

If you can’t find a plugin to integrate the analytics service you wish you use, you’ll need to hard code it in yourself. The Automattic AMP plugin offers a filter you can use to do this.

Custom code to integrate your own analytics should be added to the “functions.php” file of a custom theme or child theme, or to a custom plugin you create yourself.

Customizing the Look

There are a few different ways you can give your AMP pages a bit of your own style and branding.

In-Built Customizer

The Automattic AMP plugin has an in-built page in the customizer with three appearance settings you can change. To access it go to Appearance > AMP in the admin menu:

Once in the customization area you won’t see the AMP design options until you click Design in the left column. From here you’ll be able to select a header color, header background & link color, and you can choose between a light or dark color scheme.

Glue Customizer

The in-built customizer’s options are limited, so if you’d like to play around with some extra settings Yoast’s Glue plugin has the added bonus of some design controls, found by going to SEO > AMP and then to the Design tab.

Yoasts Glue plugin has the added bonus of some design controls
Yoast’s Glue plugin and its design controls

Code Modifications

If the available GUI based customizers aren’t sufficient you may want to start digging into some code so you can use your own CSS or template markup. To do this you can either:

  • Create a custom theme, (or child theme), and add code to its “functions.php” file
  • Create a custom plugin

If you’re not already familiar with how to do one of the above your best bet is probably to stick with the available GUI customization options.

Override the AMP Plugin’s “style.php” File

All the CSS that controls the presentation of AMP pages in the Automattic plugin can be found in its “templates” subfolder in the file “style.php”. You shouldn’t directly edit the code in this file as you’ll lose all your changes when the plugin updates. However you can override this file with one of your own.

If you’re creating your own custom theme or child theme, create a folder inside it named “amp” and in there add your CSS to a file named “style.php”. The AMP plugin will automatically find this file and use it.

If you’re creating your own plugin you can use any PHP file you like to hold your custom CSS, then specify said file by using the amp_post_template_file filter combined with a conditional check for 'style' === $type.

For details on how to do this check out Automattic’s documentation on GitHub.

Append CSS

If you only need to append a little custom code to the plugin’s existing CSS you can use the amp_post_template_css action. For more details on how this is done, plus some examples, see the relevant section in Automattic’s documentation.

In the case of appending CSS, you also have the option to add some custom code via Yoast’s Glue plugin, in the text area labelled “Extra CSS” near the bottom of its Design tab.

Note: Whether you’re appending to, or overriding the AMP plugin’s CSS, make sure you don’t include any <style> tags as they will interfere with the required <style amp-custom> tags already in the plugin’s template.

Custom Template

If you wish, you can create entirely custom markup for your AMP pages. By default the plugin uses the file “single.php” from its “templates” folder, (which in turn uses other files from that folder), but you can have it use a template file of your own making instead by using the amp_post_template_file filter.

There are a series of requirements that must be met in order for a custom template to produce valid AMP markup, so be sure to closely follow all the instructions offered in the docs.

It’s also a good idea to have a thorough look through the AMP plugin’s “templates” folder to see how the files there are setup. Start with the “single.php” file and look to see how it incorporates the other template files from there.

Tweaks to Existing Templates

If you don’t want to completely create your own template for your AMP pages, but rather you just want to tweak certain aspects of it, there are a range of actions and filters ready made for you to do so. They allow you to do things like adjusting the page logo, modifying the display of author information, adding content to the footer and so on.

As ever, read more about these options and see example modifications in the docs.

Wrapping Up

Let’s recap the main points we’ve covered:

  • The easiest way to get AMP support in WordPress is to use Automattic’s AMP plugin.
  • This generates AMP versions of your posts, but not for any other content (yet).
  • AMP versions are reached by adding /amp/ or /?amp=1 to the end of your post’s URL.
  • Add Yoast generated metadata to your posts by using the Glue plugin.
  • The elements img, video, audio, iframe and oEmbeds for YouTube, Instagram, Twitter and Vine will all be automatically converted to AMP custom elements by Automattic’s plugin.
  • Check the plugins and shortcodes you’re using to make sure they don’t rely on custom JavaScript or inline CSS, and they output code that can be converted to AMP valid markup.
  • Add analytics from a supported vendor through a plugin or through your own custom code.
  • Perform basic GUI based customizations to the look of your AMP pages by using the customizer built into Automattic’s AMP plugin.
  • For additional GUI based customizations use the Design tab available in Yoast’s Glue plugin.
  • For more advanced code based customizations of your AMP pages CSS and / or markup create a custom theme or plugin.
  • Add custom CSS by overriding the plugin’s “style.php” template or appending to it using the appropriate actions and filters.
  • Add custom markup by overriding the plugin’s “single.php” template or tweaking specific parts of it using appropriate actions and filters.

I hope all the above has helped you get oriented with how to approach AMP on WordPress sites, as well as how you can go about customizing your AMP’ed posts.

Thanks for reading!

Source: Tuts Plus

About the Author