How to Enable AMP for OceanWP

As of version 1.8.7, the OceanWP theme supports AMP integration, and is also officially recognized as an AMP-friendly theme by the Google Web Ecosystem. Learn more about AMP for WordPress Ecosystem.

This doc explains what AMP plugin to install, how to set it up, as well as the general usage and functionality of the AMP feature.

AMP enables web experiences that are consistently fast, beautiful and high-performing across distribution platforms. AMP formerly stood for “Accelerated Mobile Pages”, but now works completely across desktop and mobile.

Install AMPP Plugin

The OceanWP theme is compatible with the official AMP plugin for WordPress.

1: Go to your WordPress dashboard, Plugins > Add New,
2: Install and activate the AMP plugin.

Set Up AMP

Once the AMP plugin has been installed, you can proceed with the setup.

1: Go to your WordPress dashboard, AMP > General,
2: Follow the setup wizard and set the Template Mode to Transitional. You can find out more about different modes and how they work here.
3: Enabling Serve all templates as AMP regardless of what is being queried is optional. You can disable/enable AMP for each individual page/post directly from the document panel in WordPress editor.

AMP General Usage Guide

OceanWP Theme and AMP

The AMP plugin allows you to use your OceanWP theme for your AMP URLs. While custom JavaScript has some restrictions in AMP URLs, we’ve made some changes to OceanWP to ensure our users can benefit from a fully AMP compatible site. You’ll notice that following work consistently in AMP URLs, without users having to make any AMP specific changes.

AMP functions well with all content types.

1. Desktop Menu: functions well with all header styles.

2. Mobile Menu: functions with Dropdown and Full Screen mobile menu styles (Appearance > Customize > Header > Mobile Menu).

The Sidebar mobile menu style will not function with AMP.

Explanation: the Sidebar mobile menu style uses full javascript to generate HTML markup. AMP does not support javascript, therefore it is not possible to make this style AMP compatible, although we may add further integration going forward.

3. Menu Search: functions well with all search styles.

Note that while we’ve added AMP compatibility to OceanWP, there are other features of our demos or third-party plugins that may not work in AMP. Please refer to the AMP plugins or respective third-party plugin support forums if you find such features don’t function in AMP URLs.

WooCommerce, OceanWP theme and AMP

WooCommerce works well with AMP for all OceanWP theme locations.

Below listed WooCommerce elements will NOT function with AMP, because they require custom javascript codes to function and generate HTML markup:

1. Quick View,

2. Ajax Add to Cart,

3. Floating bar.

These features are outside the control of OceanWP although you can reach out to the AMP plugin support or WooCommerce support for further information. You can also apply the below workarounds:

1. Modify the Ajax based “ Add to Cart ” feature

2.Disable AMP on pages or content types using the above listed features using the AMP plugins.

Ocean AMP-Friendly Website Demo Templates

At the current moment, OceanWP has four AMP-friendly (non-Elementor) website demo templates you can use to speed up the website building process:

1. Maria

2. Tech

3. Blogger

4. Personal

CSS Usage

One of the reasons AMP URLs are so fast is that they restrict CSS to 75KBs in size. The AMP plugin removes all unused CSS rules and inlines all styles automatically to comply with AMP framework guidelines.

While third-party plugins may impact the final CSS size limit for your site URLs using OCeanWP with AMP are a little over 21KBs in file size once the AMP plugin is applied, resulting in a lightning fast experience.

You’ll find out more about how CSS works in AMP here, with the AMP plugin already performing the mentioned optimizations automatically.

Note you can also make use of a caching plugin with CDN can reduce CSS file size for you non AMP URLs, if using AMP in transitional or reader mode with OceanWP.

If you run into any trouble using AMP you can reach out to the AMP team on the WordPress plugins support forum, or checkout the plugins FAQs page.

Some considerations using AMP on your OceanWP site

While we’ve made the OceanWP theme AMP compatible if you’re using some of our Elementor-based demos, note that Elementor is not fully AMP compatible. This is outside the control of OceanWP.
If you wish to test out or view your AMP URLs using OceanWP you can follow the supporting guide on the AMP plugins website.