Categories
AMP AMP WP

Amplify WordPress Site

Some quick tips for WordPress developers to do “WP to AMP” conversion.

Follow these steps:

  1. Install Official AMP plugin
  2. Use AMP in Transitional mode (formerly Paired mode)
  3. Check “Disable Admin Bar on AMP pages” checkbox.

This should give you amp site at /?amp page. You can also choose which pages to make AMP ready.

1. Custom Javascript

Custom Javascript will be removed so any code that relies on this custom javascript needs to created separately in AMP.

Refer Gravity Form AMP Support Script.

Use a wrapper function to add AMP related markup which doesn’t work in AMP page.

Ref – https://gist.github.com/pradeep910/b25525034289ab0bc2b7fa0896f4ac90#file-rt-amp-gravity-form-fix-php-L13-L24

Google Analytics can be added from backend option.
Ref – https://amp-wp.org/documentation/playbooks/analytics/

2. CSS limit (< 50kb)

In case if front end breaks on AMP page, check if CSS limit is exhausting. If CSS limit is reached 50kb then next files will not be loaded.

To handle this, create chunks of CSS like homepage, archive, single, etc. and load them only on the pages which require these CSS using wp_enqueue_style()

Note: Admin bar css is of 17KB, so cross check if you have disabled Admin bar on AMP pages.

3. Some of the known problems

If popups are not working
> use https://amp.dev/documentation/examples/components/amp-lightbox/

If external sources/embeds are not working like Vuukle, Outbrain, etc.
> use their amp valid code conditionally for AMP pages. In case of iframes, need to use <amp-iframe>, however, it can’t use self domain iframe and gives error that you can see in console, so it can be used as bitly url.


You must have seen this slide from Google AMP Roadshow 2018 that shows how to configure AMP Plugin.

However, AMP Plugin has changed a little. You can see/read resources and documentation here – https://amp-wp.org/.