13 December 2023

How to Add AMP to Your WordPress Site

By Ronald Smith

AMP is a collaborative project that aims to improve how quickly websites load on mobile devices. But don’t worry, even though it may seem complicated, adding AMP to your WordPress website is actually quite simple!

If you’ve built your website with WordPress, you can take advantage of a helpful plugin called AMP-WP. It offers more features than you might expect. Let me show you how it works.

Step 1: Activate the Plugin

First, log in to your website and go to the Plugins > Add New page. Search for “AMP” and install the plugin created by Automattic. Once it’s installed, activate it.

How to Add AMP to Your WordPress Site

When you activate it, you can check out the AMP-converted post simply by adding /amp/ to the end of the post URL. For example, if your post’s URL is http://wp.com/post/, you would add /amp/ at the end to view the AMP version (http://wp.com/post/amp/). If you prefer, you can also use ?amp=1 at the end of the post URL instead. For example, if your post’s URL is http://wp.com/post/, you would add ?amp=1 at the end (http://wp.com/post/?amp=1) to view the AMP version.

How to Add AMP to Your WordPress Site

When you look at the post above, you’ll notice that it has some basic formatting that you can personalize even further.

Here are a few important points to keep in mind about the plugin as it currently stands:

– Archives like Categories, Tags, and Custom Taxonomies are not supported in their AMP-compliant format. You can, however, integrate Custom Post Types with AMP by using a Filter.

– This plugin doesn’t include a new settings screen in the Dashboard. Instead, you’ll need to make customizations at the code level using Actions, Filters, and Classes.

– Not all AMP custom elements are supported by this plugin by default. For example, elements like amp-analytics and amp-ad will need to be added using the plugin’s Actions or Filters.

Customizing Your AMP Page

The plugin I’m using gives me a lot of cool ways to make my AMP page look just the way I want it to. I can change the styles, the content, and even the whole HTML markup!

Changing Styles

Once I’ve installed and activated the plugin, I can start tweaking things to match my website’s style. I can make the header a different color, change the font, and adjust the font size to give it a personalized touch.

To do this, I just need to add a little bit of code to my theme’s functions.php file. Here’s an example:

function customize_amp_styles() {

nav.amp-wp-title-bar {

background-color: orange;

}

}

add_action(‘amp_post_template_css’, ‘customize_amp_styles’);

When I look at my page using Chrome DevTools, I can see that the styles I added are applied. The header now has a cool orange background color!

How to Add AMP to Your WordPress Site

When it comes to writing style rules, you can go about it in your usual way. Just keep in mind that there are some restrictions, and make sure that the style sizes don’t exceed 50Kb. If ever you’re unsure, you can refer to our previous article on how to validate your AMP pages.

Template Customization

If you find yourself needing to make significant changes beyond just styling, you might want to think about customizing the entire template. With the amp-wp plugin, you have access to various built-in templates, such as:

  • header-bar.php
  • meta-author.php
  • meta-taxonomy.php
  • meta-time.php
  • single.php
  • style.php

These templates are similar to the standard WordPress template hierarchy.

You have the power to customize these templates by creating a file with the same name in the /amp/ folder of your theme. When you do this, the plugin will use your custom files instead of the default ones, giving you complete control over the appearance of these templates.

Here are the files you can customize:

– 404.php

– amp

– meta-author.php

– meta-taxonomy.php

– single.php

– style.php

You can make changes to the styles by editing the style.php file or completely modify the structure of the AMP pages to suit your needs with the single.php file. Just remember to follow the AMP guidelines when making any modifications.

There are many hooks and filters available with this plugin. Although we can’t go into details about each one here, we can provide a cheatsheet, a summary, and some code snippets to help you get started.

Here are some important actions:

The amp_init action is really useful for plugins that need AMP to work. It runs after the plugin is set up.

function amp_customizer_support_init() {

require_once dirname(__FILE__) . ‘/amp-customizer-class.php’;

}

add_action(‘amp_init’, ‘amp_customizer_support_init’);

Like the wp_head action, the amp_post_template_head action lets you add extra stuff to the head tag of AMP pages, like meta tags, styles, or scripts.

function theme_amp_google_fonts() {

?>

}

add_action(‘amp_post_template_head’, ‘theme_amp_google_fonts’);

The amp_post_template_footer action is like the wp_footer action.

function theme_amp_end_credit() {

?>

© usamerica.com 2016

}

add_action(‘amp_post_template_footer’, ‘theme_amp_end_credit’);

Customize Your AMP Page

Did you know that you can make your AMP page look even better? You can do this by using filters, which allow you to control certain aspects of your page’s appearance.

One important filter is called the amp_content_max_width filter. This filter allows you to set the maximum width of your AMP page. This width will also be applied to any embedded elements, such as YouTube videos. To use this filter, you can add the following code to your theme’s functions.php file:

function theme_amp_content_width() {

return 700;

}

add_filter( ‘amp_content_max_width’, ‘theme_amp_content_width’ );

By default, your AMP page will use the icon uploaded via the Site Icon interface. But what if you want to use a different icon? That’s where the amp_site_icon_url filter comes in. This filter allows you to specify the URL of your custom icon, which can include both the favicon and Apple icon. To use this filter, you can add the following code to your theme’s functions.php file:

function theme_amp_site_icon_url() {

return get_template_directory_uri() . ‘/images/site-icon.png’;

}

add_filter( ‘amp_site_icon_url’, ‘theme_amp_site_icon_url’ );

With these filters, you have the power to customize your AMP page to make it uniquely yours. Give it a try and see the difference!

The filter called “amp_post_template_meta_parts” comes in handy when you want to personalize the information displayed about a post, like the author’s name, category, and the time it was published. With this filter, you have the power to change the order or even remove specific details from the AMP page.

Here’s an example of how this filter can be used:

“`

function theme_amp_meta($meta) {

foreach (array_keys($meta, ‘meta-time’, true) as $key) {

unset($meta[$key]);

}

return $meta;

}

add_filter( ‘amp_post_template_meta_parts’, ‘theme_amp_meta’ );

“`

By using the “amp_post_template_metadata” function, you can customize the Schema.org data structure in AMP pages. Let me show you an example to clarify how it works. This example will demonstrate how to include your site’s logo in the AMP carousel displayed in Google search results, while also removing the timestamp that shows when the page was last modified for your AMP page.

I have a task to rewrite the provided text while preserving the HTML markup and maintaining its original meaning. Here’s my attempt:

function amp_schema_json($metadata) {

unset($metadata[‘dateModified’]);

$metadata[‘publisher’][‘logo’] = array(

‘@type’ => ‘ImageObject’,

‘url’ => get_template_directory_uri() . ‘/images/logo.png’,

‘height’ => 60,

‘width’ => 325,

);

return $metadata;

}

add_filter(‘amp_post_template_metadata’, ‘amp_schema_json’, 30, 2);

If you want to customize your AMP template files and store them in a different directory instead of /amp/, you can use amp_post_template_file.

function theme_custom_template($file, $type, $post) {

if (‘meta-author’ === $type) {

$file = get_template_directory_uri() . ‘/partial/amp-meta-author.php’;

}

return $file;

}

add_filter(‘amp_post_template_file’, ‘theme_custom_template’, 10, 3);

Have you ever wondered how to change the endpoint of your AMP page? Look no further! I’ll show you how you can do it using the amp_query_var.

By default, the amp_query_var is set to “/amp/”. But with just a few simple steps, you can customize it to your liking!

First, let’s take a look at an example. Imagine you have a post with the slug “post-slug”. Usually, you would access the AMP page by adding “/amp/” at the end of the URL, like this: “www.example.com/post-slug/amp/”.

But what if you want to make it more unique and accessible? No problem! With the amp_query_var, you can change the endpoint to “/m/” instead.

To do this, you’ll need to add a function to your code. Here’s a snippet that will do the trick:

function custom_amp_endpoint($amp) {

return ‘m’;

}

add_filter(‘amp_query_var’, ‘custom_amp_endpoint’);

Simply place this code in your theme’s functions.php file, and you’re good to go! Now, if you want to access the AMP version of your post, you just need to add “/m/” to the URL, like this: “www.example.com/post-slug/m/”.

That’s it! You’ve successfully customized your AMP endpoint using the amp_query_var. Now you can make your AMP pages more unique and accessible to your audience. Happy coding!