How to Use AMP with WordPress

AMP is a communal efforts that promises a better page load performance for websites in the mobile environment. But, as you can find from our previous tutorial, you will have to sacrifice fancy stuff from your website, and strictly follow the rules, comply with guidelines, and get pages validated. It sounds like a lot to do, doesn’t it?

Fortunately, if you’ve built your website with WordPress, you can apply AMP to your website in a snap using a plugin named AMP-WP. It is shipped with more features than what meets the eye. So, let’s see how it works.

Activation

To begin with, login to your website, go to Plugins > Add New screen. Search for “AMP; install and activate the one from Automattic.

Once activated, you can view the AMP-converted post by adding the /amp/ trail at the end of the post URL (e.g. http://wp.com/post/amp/), or with ?amp=1 (e.g. http://wp.com/post/?amp=1) if you are not using the Pretty Permalinks feature on your website.

And as you can see above, the post has been given basic stylings, which you can further customize.

To note

There are a few things you should know about the state of the plugin at the moment:

• Archives — Category, Tag and Custom Taxonomy — are currently not supported. They will not be converted into AMP-compliant format. However, Custom Post Types can be initiated into AMP through a Filter.
• It does not add in a new setting screen in the Dashboard. Customization is done at the code level with Actions, Filters, Class.
• The plugin does not currently encompass every AMP custom elements such as amp-analytics and amp-ad out of the box. If you need these element you will have to include it by hooking into the Actions or Filters of the plugin.

Customization

The plugin provides numerous Actions and Filters that provides flexibility over customizing the styles, the page content, and even the HTML markup of the AMP page as a whole.

Styles

I’m sure this is one thing that you want to change immediately after activating the plugin, such as changing the header background color, the font family, and the font size to better match your website brand and personality.

To do so, we can employ the amp_post_template_css Action in the functions.php file of our theme.

function theme_amp_custom_styles() { ?>
	nav.amp-wp-title-bar {
		background-color: orange;
	}
<?php }
add_action( 'amp_post_template_css', 'theme_amp_custom_styles' );

If we look through the Chrome DevTools, these styles are appended within the <style amp-custom> element, and overrides the preceding style rules. Hence the orange background color is now applied to the header.

You can proceed writing the style rules as you normally do. But, bear in mind a few restrictions, and keep the style sizes to below 50Kb. If ever in doubt, please refer to our previous article on how to get your AMP pages validated.

Templating

If you seem to have to change a lot beyond just the styling, you migh twant to look into customizing the entire Template. The plugin, amp-wp, provides a number of built-in templates, namely:

• header-bar.php
• meta-author.php
• meta-taxonomy.php
• meta-time.php
• single.php
• style.php

These templates are much like the regular WordPress template hierarchy.

Each of these templates can be taken over by providing file of the same name under the /amp/ folder in the theme. Once these files are in place, the plugin will pick them up instead of the default files, and allow us to change the output of these templates entirely.

twentytwelve
├── 404.php
├── amp
│   ├── meta-author.php
│   ├── meta-taxonomy.php
│   ├── single.php
│   └── style.php

You can rewrite the entire styles through the style.php file, or modify the entire AMP page structure to your need with the single.php. Still, you will have to keep the change to comply with AMP regulations.

List of Hooks and Filters

As mentioned earlier, this plugin is shipped with a number of Actions and Filters. It’s not possible to cover each in this article. But we can go with a cheatsheet, the summary, as well as the snippets you need:

Actions

The amp_init; action is useful for plugins that rely on AMP for their plugin to work; it runs when the plugin is already initiated.

function amp_customizer_support_init() {
	require_once dirname( __FILE__ ) . '/amp-customizer-class.php';
}
add_action( 'amp_init', 'amp_customizer_support_init' );

Similar to wp_head action, we can use amp_post_template_head to include additional elements within the head tag in AMP pages like meta, style, or script.

function theme_amp_google_fonts() { ?>
	<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=PT+Serif:400,400italic,700,700italic%7CRoboto+Slab:400,700&subset=latin,latin">
<?php }
add_action( 'amp_post_template_head', 'theme_amp_google_fonts' );

amp_post_template_footer this Action is similar to the wp_footer.

function theme_amp_end_credit() { ?>
	<footer class="amp-footer">
		<p>&copy; Hongkiat.com 2016</p>
	</footer>
<?php }
add_action( 'amp_post_template_footer', 'theme_amp_end_credit' );

Filters

amp_content_max_width is used to set the maximum width of the AMP page. The width will also be used to set the width of embedded elements like a Youtube video.

function theme_amp_content_width() {
	return 700;
}
add_filter( 'amp_content_max_width', 'theme_amp_content_width' );

amp_site_icon_url is used to set the icon — favicon and Apple icon — URL. The default falls to the image uploaded via the Site Icon interface, which was introduced in version 4.3.

function theme_amp_site_icon_url( ) {
    return get_template_directory_uri() . '/images/site-icon.png';
}
add_filter( 'amp_site_icon_url', 'theme_amp_site_icon_url' );

amp_post_template_meta_parts is for when you need to customize the meta data output of the post, such as the author name, the category, and the timestamp. Through this filter you can shuffle the default order, or remove one of the meta out of the AMP page.

function theme_amp_meta( $meta ) {

	foreach ( array_keys( $meta, 'meta-time', true ) as $key ) {
		unset( $meta[ $key ] );
	}

	return $meta;
};
add_filter( 'amp_post_template_meta_parts', 'theme_amp_meta' );

amp_post_template_metadata is for customizing the Schema.org data structure in AMP pages. The following example shows how we provide the site logo that will be shown in the AMP carousel in the Google search result, and remove the page modified timestamp.

function amp_schema_json( $metadata ) {

	unset( $metadata[ 'dateModified' ] );

	$metadata[ 'publisher' ][ 'logo' ] = array(
		'@type' => 'ImageObject',
		'url' => get_template_directory_uri() . '/images/logo.png',
		'height' => 60,
		'width' => 325,
	);
	return $metadata;
}
add_filter( 'amp_post_template_metadata', 'amp_schema_json', 30, 2 );

amp_post_template_file this is an alternative way to override template files. It is useful if you prefer to host your custom AMP template files in another directory other than /amp/.

function theme_custom_template( $file, $type, $post ) {
    if ( 'meta-author' === $type ) {
        $file = get_template_directory_uri() . '/partial/amp-meta-author.php';
    }
    return $file;
}
add_filter( 'amp_post_template_file', 'theme_custom_template', 10, 3 );

amp_query_var is used to change the AMP page endpoint when the URL Permalink is enabled. By default it is set to /amp/. Given the following, the AMP page is now accessible by adding /m/ on the URL (e.g. www.example.com/post-slug/m/).

function custom_amp_endpoint( $amp ) {
    return 'm';
}
add_filter( 'amp_query_var' , 'custom_amp_endpoint' );