How to make GeneratePress and AMP fully compatible

GeneratePress and AMP are compatible. In this post I will show you how you can make GeneratePress 100% compatible with AMP.

Accelerated Mobile Pages (AMP) is an open source project created by Google alongside Automattic. The goal is to make websites faster on mobile phones.

If most of your visitors are coming from mobile, then AMP has the potential to boost your traffic significantly over time.

But if you have most of your visitors from desktop, you may not notice a significant different but it is still worth it.

GeneratePress is the fastest WordPress theme I have seen. You can see my GeneratePress review. The good news is that it is 100% compatible with AMP.

Implementing AMP on your website/blog

The best way to implement AMP is making use of the Official AMP plugin which was built and is being maintained by Google itself.

Visit the WordPress directory to install and activate the Plugin. To do this, click on plugins from your dashboard, then click on Add New. Once on the page, search for AMP. you will see the AMP Plugin.

Once installed, activate the plugin. Then click on the settings. You will see three options. Standard mode, Transitional mode or Reader mode. Reader mode will work normally. Since it does not rely on your theme to function. But if you have a problem running GeneratePress on Transitional or Standard mode, then follow the steps here.

Even if you are using other AMP plugin, these steps will work.

How to make GeneratePress and AMP fully compatible

Follow these steps to make GeneratePress and AMP fully compatible:

1. Download and install the AMP for GeneratePress Plugin

There is an official Plugin by Tom Usborne, the developer and founder of GeneratePress. The aim of the plugin is to fix any compatibility issues with AMP.

The plugin is not yet available on WordPress directory. But Tom told me in an email that he will make it available soon.

For now, you can get the plugin from GitHub.

Once there, click on Clone or download. Then click on download zip.

Now to go your WordPress dashboard, click on plugins then click on add new. On the new page, click on upload plugin, then select the file you just download and install it.

Once installed, activate it. That is all.

2. Switch AMP to transitional or standard mode

Now go to the AMP plugin settings again and switch to transitional or standard mode. The transitional mode means that your theme framework is used to serve AMP and Non-AMP while the standard means your site is AMP-first.

If your site works on AMP transitional mode, it will work on standard mode. The only difference between the two is the canonical URL.

When on transitional mode, you need to add ?amp at the end of your links including homepage to access AMP.

But when on standard mode, no addition is needed. Your canonical URLs are amp.

For this test, am using transitional mode to show it works. I prefer using AMP on reader mode because most of my visitors are from desktop.

3. Conduct AMP Test.

After changing to transitional mode or standard. You will see many errors! Do not panic!

You can see the errors I got below after changing BloggingTools to transitional mode.

There were 48 error index.

Most of these errors are warnings. Some of them are caused by plugins. The warnings are to let you know that the highlighted items will not be shown in AMP.

I noticed no major warning that is theme related.

The major issue I noticed was from my caching plugin, Breeze. It was adding a CSS that does not seem to make AMP happy. So I deactivated Breeze and proceeded to test.

You can use Google official AMP testing tool for testing.

The result shows that AMP is running without issues. See below.

Here is the test for my home page.