Twenty Fifteen

Here’s a walk-through of making a theme AMP-compatible, using Twenty Fifteen as an example.

You’ll sometimes need to have separate logic and markup for AMP and non-AMP endpoints.

So it helps to create a function to find whether this is an AMP endpoint:

/**
 * Whether this is an AMP endpoint.
 * This must only be called after the ‘parse_query’ action.
 *
 * @return bool Is AMP endpoint (and AMP plugin is active).
 */
function twentyfifteen_is_amp() {
	return function_exists( 'is_amp_endpoint' ) && is_amp_endpoint();
}

Prevent Enqueuing JavaScript

Because JavaScript files aren’t allowed in AMP, it’s good to block enqueuing them on AMP endpoints.

For example, at the top of an enqueuing function, you can simply return if it’s an AMP endpoint:

function twentyfifteen_scripts() {
	if ( twentyfifteen_is_amp() ) {
		return;
}
// Enqueue scripts here.

Re-implementing JavaScript

Next, you can re-implement the JavaScript files and inline <script> tags, using Twenty Fifteen’s functions.js file begins with the function initMainNavigation(), which expands the sub-menu items on clicking a sub-menu button:

Here’s an example of how to re-implement this in AMP, using amp-bind.

Also, that functions.js file toggles the display of the navigation menu on clicking the button:


Here’s an example of how to re-implement this, using amp-bind.

Sometimes, there won’t be a need to re-implement JavaScript.

For example, twentyfifteen_javascript_detection() removes changes the class no-js to js. Because AMP doesn’t allows JavaScript, there’s no need for the js class.