How to Use AMP with WordPress | premiumwd
Development / Tips & Tricks / WordPress

How to Use AMP with WordPress

by thoriq firdaus on August 25, 2016

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

trail at the end of the post URL (e.g.

), or with

(e.g.

) 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 and 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.

How to Use WordPress Action Hooks in Theme Customization

How to Use WordPress Action Hooks in Theme Customization

WordPress child themes give a relatively easy way to customize the look and feel of a theme. If…Read more

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

Action in the

file of our theme.

If we look through the Chrome DevTools, these styles are appended within the

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

. 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

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.

You can rewrite the entire styles through the

file, or modify the entire AMP page structure to your need with the

. 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

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

Similar to

action, we can use

to include additional elements within the

tag in AMP pages like

,

, or

.

this Action is similar to the

.

Filters

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.

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.

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.

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.

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

.

is used to change the AMP page endpoint when the URL Permalink is enabled. By default it is set to

. Given the following, the AMP page is now accessible by adding

on the URL (e.g.

).

You might also like...

Development / WordPress

5 Ways to Make Your WooCommerce Store Swift and Faster

Starting an online store with WooCommerce is pretty simple. You just need to select a domain, a hosting plan and…

Plugins / Tips & Tricks / WordPress

11 Amazing WordPress Plugins for 2017

Instead of writing a regular top ten piece, I decided to focus on WordPress plugins that you probably don’t know about….

Development / Tips & Tricks / WordPress

4 Effective Ways to Help Grow Your WordPress Blog

 Many bloggers misuse the marketing concept: “If you build it, they will come.” Content may be the primary building block…

No comments

Sorry, the comment form is closed at this time.

Subscribe to Blog

Enter your email address to subscribe to this blog and receive notifications of new posts by email.

See why people are switching to use our products. See Features Get Started
+ +
%d bloggers like this: