Back to Support Design Your Site Manage Accelerated Mobile Pages (AMP)

Manage Accelerated Mobile Pages (AMP)

AMP (Accelerated Mobile Pages) is an open-source framework that creates lightweight and fast-loading webpages for mobile devices.

AMP can be installed on plugin-enabled sites using the AMP plugin. For plugin-enabled sites created before June 13, 2022, the AMP plugin was installed by default.

About AMP

Accelerated Mobile Pages (AMP) enable the creation of websites and ads that load nearly instantly, giving site visitors a smooth, more engaging experience on mobile and desktop. AMP pages are designed to load fast by optimizing code and restricting features, resulting in a better user experience. They’re used for content-heavy sites to efficiently deliver information to mobile users.

The main advantage of AMP is a fast-loading mobile experience. Your site’s blog posts will have dynamically generated AMP-compatible versions. AMP is not applied to the front page, archives, and pages. Your site’s results in Google will also be marked by the AMP badge on mobile-based searches.

A Google Search result showing the AMP badge.

When AMP is on, and your visitors use a mobile device to visit your site, they will see a simplified version of your site’s posts. They will have the option to Exit mobile version to see the full version of your site. With AMP on, they will also see the option to Go to mobile version if they’re viewing the full version of your site on their mobile device.

Check out the AMP site for more details on how it works.

Set Up AMP

After you have installed and activated the AMP Plugin, the plugin will work automatically with default settings.

You can customize the AMP settings manually or use the AMP Settings Configuration Wizard.

  1. Visit the AMP menu in your dashboard.
  2. Click Settings.

Learn more about the Settings Screen from the AMP for WordPress development team.

The AMP section of the dashboard, displaying Settings, Analytics and Support.

Customize Appearance

You can customize the Header Text Color, Header background, Link color, and the color scheme used on your AMP pages. Because AMP aims to create a simplified and quickly loading version of your posts, custom CSS is not applied.

  1. Go to Appearance AMP → Design

You may see a message that AMP is not available for the page currently being previewed. AMP only applies to blog posts and does not apply to front pages, archives, or pages. Click “Navigate to an AMP compatible page” to preview the design changes you make.

  1. Choose the colors you want to use for Header Text Color, Header Background & Link Color
  2. Choose between a light or dark Color Scheme
  3. Save your changes.
The AMP Customization section, displaying Header Text Color, Header Background & Link Color, and Color Scheme.

Configure AMP

To use the AMP plugin after installing and activating it, click on AMP in your dashboard.


In the AMP Settings, you will see three template modes:

Three AMP Template Modes
The AMP Plugin Settings (click to enlarge)

Standard: In this mode, the plugin enables sites to have AMP as the only version of content for both desktop and mobile. The entire site will be served as valid AMP pages (referred to as AMP-first).

In this mode there is no ?amp query added to any URLs.

Transitional: If available in your theme, AMP will rely on a theme’s template and styles when showing both AMP and non-AMP content. This means that your AMP and non-AMP content will have a similar look and feel.

In this mode the ?amp query is added to URLs for AMP content.

In this case AMP, pages will usually only be seen on mobile from certain sources, such as Google searches and Twitter, or by manually adding the ?amp query.

Reader: AMP content will be served in basic templates (with that blue bar at the top) which are separate from the templates in your active theme. Reader mode is less likely to interfere with functionality provided by a third party theme or plugin.

In this mode, the URLs for AMP posts normally end in /amp/ whereas for pages they end in ?amp.


To access AMP Analytics, you must have Google Analytics set up with your website. Please see how to set up Google Analytics here.

  1. In your Google Analytics account, click Admin → Property Settings and obtain the Property ID, which would look like UA-XXXXX-Y.
  2. Amend the following script, replacing the UA-XXXXX-Y with your property ID.
	"vars": {
		"account": "UA-XXXXX-Y"
	"triggers": {
		"trackPageview": {
			"on": "visible",
			"request": "pageview"

3. Copy the script and in your site go to AMP → Analytics. In the type field, enter googleanalytics.

Paste the code into the JSON Configuration field.

An example of a completed Google Analytics AMP setup.

4. Click Save.

Deactivate AMP

Deactivating AMP means your mobile visitors will not see the AMP version of your site, nor the prompt in the footer to Exit Mobile Version. Instead, your visitors will see your default website on their mobile devices.

To prevent mobile visitors from redirecting to AMP version of your site, while keeping the AMP functionality active:

  1. Visit AMP → Settings in your dashboard.
  2. Scroll to the bottom of the page to find the Other panel and expand it.
  3. Disable the Redirect mobile visitors to AMP toggle button.
  4. Click Save.
The Other section of AMP Settings with. an arrow pointing to the toggle to turn on/off Redirect mobile visitors to AMP.

Alternatively, if you do not plan to use the AMP plugin at all you can deactivate the plugin completely.

  1. Visit PluginsInstalled Plugins in your dashboard.
  2. Locate AMP in your installed plugins list.
  3. Click Deactivate.

AMP Errors

You may receive communication from Google regarding AMP on your site.

The term “error” can be misleading since it suggests that something is broken and needs to be repaired. In reality, these “errors” refer to elements that AMP found incompatible and removed from the page. This is the expected behavior when using the AMP plugin in Standard and Transitional modes. Your theme files remain unchanged. Typically, these “errors” consist of extra CSS (more than 50kb) or JavaScript. The error index provides a list of all these items for your entire website.

On the whole, you can ignore these unless something looks incorrect, or is not functioning on your page.

Styling Errors

These can happen when the CSS required for part of your page is eliminated as part of the CSS that went over 50kb.

Options to fix this:

Functional (JavaScript) Errors

​E.g., widgets not displaying, Facebook widgets not showing posts, slideshow not sliding, dropdown submenus not working, mobile menu not working.

These types of issues occur because JavaScript that these items rely on to load, or for animations, has been removed.

Dealing with Errors

As the word “error” can be a misnomer, this generally means one or two things:

The AMP plugin removes JavaScript and HTML that does not comply with its specification from AMP versions of pages. (where /?amp is added at the end of a page URL).

It also removes CSS that goes above the 50KB limit (after the plugin tries to minify it).

Removal of JS can still result in an acceptable AMP experience, so long as your theme/plugins can function without that CSS or JavaScript.

It’s up to you to look at the AMP version of your site and see if the removal of that mark-up is acceptable. If the removal of most of the scripts is unacceptable – there are three main things you can do:

  1. Switch to AMP-compatible theme/plugins.
  2. Use a child theme and/or custom plugins that prevent the output of invalid markup in favor of adding AMP components.
  3. Activate Reader mode. As above, AMP pages will not look the same as the rest of your site, but this will be a fully compatible version of your site.
  4. You can also deactivate AMP on specific pages by clicking the toggle for “Enable AMP” in the Document Status & visibility settings. This will result in a non-compatible AMP version of a page.

Was this guide helpful for you?

Not quite what you're looking for? Get Help!

Copied to clipboard!