Adding Theme Support

Starting in version 0.7, your theme can register support for 'amp' in order to support "Native AMP" or "Paired Mode."

Native AMP

Your entire site will use AMP (demo screencast, example site).

However, themes not designed for AMP may have stylesheets that make the total CSS size go over AMP's 50 KB CSS limit. (In the v1.0 release of the AMP plugin the ability to automatically “tree shake” unused CSS rules will be included which will make it easier to use existing themes and plugins that have more than 50KB of CSS.)

There will only be one version of each URL: the AMP version. There won't be URLs with /amp or ?amp appended.

In v1.0, there's support for Native AMP with themes Twenty Fifteen, Twenty Sixteen, and Twenty Seventeen (See #1074). Simply place add_theme_support( 'amp' ) in a child theme.

For examples of custom Native AMP themes, please see AMP Adventure and AMP News.

In a theme you've developed or a child theme, add this in functions.php. It should be in a callback for the action after_setup_theme:

add_theme_support( 'amp', array(
        'comments_live_list' => true // example value
) );

Parameter	Type	Default	Description
comments_live_list	boolean	false	Optional. Whether to use amp-live-list for comments. On making a comment, this will display the comment without a page refresh. If this parameter isn't present or is false, the page will refresh on making a comment. This also requires adding markup to your theme, please see this wiki page.

With amp theme support, you can continue to enqueue local CSS stylesheets as you do normally in WordPress. You can also print style elements and style attributes. All CSS in the document will get concatenated and moved to a single <style amp-custom> in the head. Note that AMP has a 50KB maximum on custom CSS, so the AMP plugin will stop concatenating as soon as it reaches this limit. Stylesheets enqueued by plugins (e.g. Gutenberg) are included here. In future versions of the plugin, automatic minification of CSS will be performed including the removal of CSS that is not relevant to the current page.

Paired Mode

There will be AMP and non-AMP versions of certain URLs, and this will use your custom templates for the AMP versions. Similar to the example above, place this in a callback:

add_theme_support( 'amp', array(
        'template_dir'       => 'amp-templates', // example value
        'available_callback' => 'is_singular',  // example
        'comments_live_list' => true // example 
) );

Parameter	Type	Description
template_dir	string	Required. The path to the custom AMP "Paired Mode" template(s), relative to your theme. In the example above, you would add an amp-templates/ directory to the root of your theme, and place template(s) in it, like single.php.
available_callback	callable	Recommended. This callback should return a boolean that indicates whether to use "Paired Mode." In the example above, only if the request is_singular() will this look for an AMP template in the template_dir. If this callback returns false, there will be no AMP version of the URL, and it won't look for templates in template_dir. If this available_callback parameter isn't present, it will still look in the template_dir for the AMP templates.
comments_live_list	boolean	Optional. See description above.

Paired Mode Templates

For any templates in your template_dir, you can require your standard template instead of creating a new one. For example, your amp-templates/single.php file might simply have:

<?php require get_template_directory() . '/single.php';

Alternatively, if you want to re-use all of your theme templates then you can define your template_dir as:

add_theme_support( 'amp', array(
	'template_dir' => './',
) );

You might also use is_amp_endpoint() in that template to output different content for the AMP and non-AMP versions.

This will use your theme's stylesheet. But if it goes over the 50 KB CSS limit, the plugin won't add it. While waiting for the auto minification of CSS mentioned above, you may need to replace the original CSS being enqueued with another stylesheet that is specifically for AMP. For example, if you have a child theme of Twenty Seventeen and it contains a style-amp.css to be served on AMP pages, you can dequeue the regular styles and enqueue the AMP version via:

add_action( 'wp_enqueue_scripts', function() {
	if ( function_exists( 'is_amp_endpoint' ) && is_amp_endpoint() ) {
		wp_dequeue_style( get_template() . '-ie8' );
		wp_dequeue_style( get_template() . '-style' );
		wp_dequeue_style( get_template() . '-fonts' );

		wp_enqueue_style(
			'twentyseventeen-amp',
			get_stylesheet_directory_uri() . '/style-amp.css',
			array(),
			'0.1'
		);
	}
}, 20 );

References

• Weston Ruter's support post on "Paired Mode"
• Example Native AMP theme