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.
Read Also: Top 10 Essential AMP Components for Mobile Optimization
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
andamp-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.
Read Also: How to Use WordPress Action Hooks in Theme Customization
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>© 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' );