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:
- AMP in 60 Seconds
- Up and Running with AMP
- How to Make a Basic AMP Page from Scratch
- AMP Project: Will it Make Your Sites Faster
- How to Use amp-img and amp-video to Speed Up Your Website
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:
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:
- YouTube oEmbed →
- Instagram eEmbed →
- Twitter oEmbed →
- Vine oEmbed →
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
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.
If you are using plugins that rely on shortcodes you’ll need to ensure the code they output is:
- AMP valid, e.g. no inline JS or CSS
and / or
- 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.
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.
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.
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.
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.
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.
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
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.
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=1to the end of your post’s URL.
- Add Yoast generated metadata to your posts by using the Glue plugin.
- The elements
iframeand oEmbeds for YouTube, Instagram, Twitter and Vine will all be automatically converted to AMP custom elements by Automattic’s plugin.
- 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!
Subscribe below and we’ll send you a weekly email summary of all new Web Design tutorials. Never miss out on learning about the next big thing.Update me weekly
Envato Tuts+ tutorials are translated into other languages by our community members—you can be involved too!Translate this post