10 Ways To Customize The WordPress AMP Plugin By Automattic

This is a list of ten ways to customize the official WordPress AMP plugin. The AMP plugin adds support for the Google Accelerated Mobile Pages project to your WordPress posts.

These are individual code snippets (not steps). Each one will provide a different customization for the WordPress AMP plugin.

Except where otherwise noted, all of the code below should be added to your functions (see how to add code).

To see the effect of any of these changes, clear any cache plugins, and also clear your browser’s cache.

1. Disable AMP For Certain Categories

   With the AMP plugin, AMP is enabled on all categories of posts. This code will disable AMP (Accelerated Mobile Pages) for specific categories.

   You must edit line 7 to change my-category and another-category to your own categories. Place there a comma-separated list of the categories for which you want to disable AMP. This will turn off Accelerated Mobile Pages for those categories. Notice that you must use the category “slug” instead of the fancy category name.

   /**
    * Disable AMP for specific categories
    */
   add_filter( 'amp_skip_post', 'isa_skip_categories', 10, 3 );
   function isa_skip_categories( $skip, $post_id, $post ) {
    
       $categories_to_skip = array( 'my-category', 'another-category' ); // EDIT THIS LINE
    
       if ( has_category( $categories_to_skip, $post_id ) ) {
           $skip = true;
       }
       return $skip;
   }
   

2. Remove Merriweather Google Fonts From AMP Pages

   The WordPress AMP plugin loads Merriweather Google fonts in the head of the AMP pages. If you look at the source of one of your AMP pages, you’ll see the link to the Google fonts stylesheet, which looks like this:

   <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Merriweather:400,400italic,700,700italic"> 

   Now, it’s debatable whether or not these fonts will slow down your AMP pages. There is an argument that since they are served from CDN, they will not really slow down your AMP pages. The decision is yours.

   This is nothing against the Merriweather font; I think it’s a beautiful and aesthetically pleasing font.

   If you want to remove the Merriweather Google fonts from AMP pages, this will stop it from loading on your AMP pages.

   /**
    * Do not load Merriweather Google fonts on AMP pages
    */
   add_action( 'amp_post_template_head', 'isa_remove_amp_google_fonts', 2 );
   function isa_remove_amp_google_fonts() {
   	remove_action( 'amp_post_template_head', 'amp_post_template_add_fonts' );
   }
   

   If you remove the Google fonts, you should set a different font-family. If you don’t set a different font, then your AMP pages will default to using ‘Times New Roman’, Times, or Serif font-family. 🙁

   I like to replace the Merriweather Google fonts with a font-family of system fonts that are native to mobile devices. This usually ensures the fastest pagespeed while loading.

   You can add the new font-family to your AMP pages by adding this to your functions:

   add_action( 'amp_post_template_css', 'isa_amp_css_styles_fonts' );
   function isa_amp_css_styles_fonts( $amp_template ) {
   	?>
   	body { 
   		font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen-Sans", "Ubuntu", "Cantarell", "Helvetica Neue", sans-serif
   		}
   	<?php
   }
   

   If you don’t like my font-family of system fonts, you can replace this part:

   -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen-Sans", "Ubuntu", "Cantarell", "Helvetica Neue", sans-serif 

   with your own font-family.

3. Add Custom Post Type Support To WordPress AMP Pages

   By default, the WordPress AMP plugin by Automattic only creates AMP pages for regular posts. This is how you can enable AMP for custom post types. The following code will enable AMP pages for the custom post types custom_post_type_one and custom_post_type_two.

   Replace custom_post_type_one on line 5, and custom_post_type_two on line 6 with your own custom post types. If you are only adding AMP support for one custom post type, then remove line 6. This example shows how you can add AMP support for as many post types as you need, one per line.

   /**
    * Enable custom post types for AMP pages
    */
   function isa_amp_add_cpt() {
   	add_post_type_support( 'custom_post_type_one', AMP_QUERY_VAR );
   	add_post_type_support( 'custom_post_type_two', AMP_QUERY_VAR );
   
   }
   add_action( 'amp_init', 'isa_amp_add_cpt' );
   

4. Change Schema Type For WordPress AMP Pages

   The WordPress AMP plugin adds schema.org microdata for “BlogPosting” to your AMP pages. This is part of the metadata that the Google search engine will read to learn how to classify your AMP pages.

   Here, I show how you can change this default schema type from BlogPosting to either NewsArticle, ImageGallery, TechArticle, or just Article.

   If you are going to use the “TechArticle” schema, then notice that, currently, only Article, NewsArticle, BlogPosting, or VideoObject schema types are valid structured data schema types to be shown in the Google search carousel of Top Stories (as per Google). My point is that if you use the “TechArticle” schema type for your AMP pages, then your pages will not be considered as having structured data for the carousel. This is okay; your pages will still be valid AMP pages (Accelerated Mobile Pages). They just won’t be included in the “Top Stories” carousel. Also, in this case, the Google AMP Test Tool will suggest that you should “Add structured data to your AMP.” This is okay. This does not mean that your AMP page is not valid. Structured data for the carousel is different from AMP validation.

   You can change the schema type for your WordPress AMP pages by using the amp_post_template_metadata filter.

   To change the schema type from “BlogPosting” to “NewsArticle” for your AMP pages, add this to your functions:

   /**
    * Change schema type to NewsArticle for AMP
    */
   function isa_amp_set_schema_type( $metadata, $post ) {
   	$metadata['@type'] = 'NewsArticle';
   	return $metadata;
   }
   add_filter( 'amp_post_template_metadata', 'isa_amp_set_schema_type', 10, 2 );
   

   You can replace NewsArticle on line 5, above, with your desired microdata schema type. For example, to change the schema type to “ImageGallery” for your AMP pages, replace NewsArticle on line 5, above, with ImageGallery.

   You could replace that with TechArticle or just Article.

   You can also use different metadata types for different types of posts based on the post category. The following example assigns the “ImageGallery” schema type to posts that have the “your-cat-slug” category, and assigns the “NewsArticle” schema type to all other posts.

   To use the following example, you must change “your-cat-slug” on line 6 to your own category. Optionally, you can change “ImageGallery” on line 8, and “NewsArticle” on line 12, to your desired schema types.

   /** 
    * Change schema type based on post cateogry for AMP
    */
   function isa_amp_set_schema_type_per_cat( $metadata, $post ) {
   
   	if ( in_category( 'your-cat-slug' ) ) {
   
   		$type = 'ImageGallery';
   
   	} else {
   
   		$type = 'NewsArticle';
   
   	}
   
   	$metadata['@type'] = $type;	
   
   	return $metadata;
   }
   add_filter( 'amp_post_template_metadata', 'isa_amp_set_schema_type_per_cat', 10, 2 );
   

   You can also assign different schema types for custom post types. The following example assigns the “Article” schema type to posts of the “sample_post_type” custom post type, and assigns the “NewsArticle” schema type to the rest (regular posts).

   To use the following example, you must change “sample_post_type” on line 6 to your own custom post type. Optionally, you can change “Article” on line 8, and “NewsArticle” on line 12 to your desired schema types.

   /**
    * Change schema type based on post type for AMP
    */
   function isa_amp_set_schema_type_per_cpt( $metadata, $post ) {
   	
   	if ( 'sample_post_type' == $post->post_type ) {
   	
   		$type = 'Article';
   	
   	} else {
   	
   		$type = 'NewsArticle';
   	
   	}
   
   	$metadata['@type'] = $type;	
   
   	return $metadata;
   }
   add_filter( 'amp_post_template_metadata', 'isa_amp_set_schema_type_per_cpt', 10, 2 );
   

5. Change The Date on AMP Pages From Human Time Difference To Regular Date Format

   WordPress AMP pages display the date in a “human time difference” format referencing how old the post is, such as “1 hour ago”, “5 mins ago”, “2 days ago”, “2 months ago”, or “2 years ago”.

   To change the AMP post date from the “human time difference” format to regular date format, you’ll have to make a custom template file. This is pretty quick to do. You first have to create folder named amp inside your theme (or child theme). You may already have this amp folder if you’ve already made some custom AMP templates. (If you need further clarification of this step, ask at the bottom of the page.)

   Inside the amp folder, you have to place a copy of the AMP plugin’s meta-time.php template file. You can simply copy and paste from this link, which is the latest version of that file from the WordPress AMP plugin repository. Paste that into a new file, name it meta-time.php and place it inside your amp folder, inside your theme. So, the path to this new file should be:

   wp-content/themes/yourtheme/amp/meta-time.php

   You have to edit this file to change how the date appears on your AMP pages. To make the change from the human time difference format to the regular date, replace this block (which should be about lines 5–8 in the file):

   sprintf(
   	_x( '%s ago', '%s = human-readable time difference', 'amp' ),
   	human_time_diff( $this->get( 'post_publish_timestamp' ), current_time( 'timestamp' ) )
   )
   

   …and replace those lines with this:

   get_the_date()
   

   Now, your AMP pages will show the regular date. The date format will be the “Date Format” that you set in the WordPress general settings.

6. Change The Date on AMP Pages To The Last Modified Date

   To change the post date from the published date to the last modified date on AMP pages, you’ll have to make a custom template file for the AMP plugin’s meta-time.php file. This is pretty quick to do. Follow paragraphs two and three in the previous example, as it will show you how to make the custom meta-time.php template file. Once you do that, you can edit your meta-time.php to replace the regular published date with the last modified date.

   To make the change from the published date to the last modified date, change both instances of post_publish_timestamp to post_modified_timestamp.

   If you’re using get_the_date() like in the previous example, then change it to get_the_modified_date() to show the last modified date.

   In addition to this, the AMP structured data (metadata) must also be updated to match the modified date since this metadata still grabs the published date. Google search may display this date somewhere, so you may want to make the “datePublished” metadata use the last modified date. To make the AMP structured data (metadata) use the last modified date for the published date, add this to your functions:

   /**
    * Make the AMP structured data (metadata) use the last modified date as the published date
    */
   function isa_amp_metadata_date_modified( $metadata, $post ) {
   	
   	$metadata['datePublished'] = $metadata['dateModified'];
   
   	return $metadata;
   }
   add_filter( 'amp_post_template_metadata', 'isa_amp_metadata_date_modified', 10, 2 );
   

7. Remove The Date From AMP Pages

   You may prefer to remove the date altogether from your AMP pages. This is easier, and you do not need a custom template file for this. To stop the date from displaying on your Accelerated Mobile Pages, add this to your functions:

   /**
    * Do not dispaly the date on AMP pages. (Leaves metadata intact)
    */
   function isa_amp_remove_date( $parts ) {
   	
   	// Remove the date from the header meta parts array
   	unset( $parts[array_search( 'meta-time', $parts )] );
   
   	return $parts;
   }
   add_filter( 'amp_post_article_header_meta', 'isa_amp_remove_date' );
   

   Note that this function will remove the date from displaying on your AMP page, but it leaves the date metadata intact for Google search and other search engines to see. (See the comment below if you want to remove the date metadata.)

   Alternatively, you could only remove the date from AMP pages for a specific category.

   To do this, use the following code. Change fruits on line 6 to your own category slug. You can list as many categories as you want, separated by a comma. So, you could change 'fruits' to 'fruits', 'cars', 'posts'.

   /**
    * Remove date meta parts for a specific category. 
    */
   function isa_amp_remove_date_per_cat( $parts ) {
   
   	if ( in_category( array( 'fruits' ) ) ) {
   
   		// Remove the date from the header meta parts array
   		unset( $parts[array_search( 'meta-time', $parts )] );
   		
   	}
   
   	return $parts;
   }
   add_filter( 'amp_post_article_header_meta', 'isa_amp_remove_date_per_cat' );
   

   As another alternative, you could remove the date only on AMP pages of a specific post type. To do this, change line 6 in the code, above, to this:

   if ( 'your_post_type' == $post->post_type ) { 

   …and replace your_post_type with your own custom post type. And also insert this into line 5:

   global $post; 

8. Remove The Author From AMP Pages

   You may want to remove the author, also known as the author byline, from your AMP pages. This will remove the author from displaying on your AMP pages, but it leaves the author metadata intact for search engines to see.

   /**
    * Do not dispaly the author on AMP pages. (Leaves metadata intact)
    */
   add_filter( 'amp_post_article_header_meta', 'isa_amp_remove_author' );
   
   function isa_amp_remove_author( $parts ) {
   	
   	// Remove author from the header meta parts array
   	unset( $parts[array_search( 'meta-author', $parts )] );
   
   	return $parts;
   }
   

   Note that if you use the snippet above to remove the author byline, the date will automatically align itself to the left rather than the right side. If you want to move the date back to the right, add this to your functions:

   /**
    * Right-align the date after removing author.
    */
   add_action( 'amp_post_template_css', 'isa_amp_css_styles_date' );
   
   function isa_amp_css_styles_date( $amp_template ) {
   	?>
   	.amp-wp-article-header .amp-wp-posted-on.amp-wp-meta:first-of-type{
   		text-align:right
   	}
   	<?php
   }
   

   Alternatively, you could only remove the author from AMP pages for a specific category.

   To do this, use the following code. Change some-cat on line 6 to your own category slug. You can list as many categories as you want, separated by a comma. So, you could change 'some-cat' to 'some-cat', 'plants'. The following example will remove the author from the “some-cat” category.

   /**
    * Remove author for a specific category. 
    */
   function isa_amp_remove_author_per_cat( $parts ) {
   
   	if ( in_category( array( 'some-cat' ) ) ) {
   
   		// Remove the author from the header meta parts array
   		unset( $parts[array_search( 'meta-author', $parts )] );
   		
   	}
   
   	return $parts;
   }
   add_filter( 'amp_post_article_header_meta', 'isa_amp_remove_author_per_cat' );
   
   

   As another alternative, you could remove the author only on AMP pages of a specific post type. To do this, change line 6 in the code, above, to this:

   if ( 'your_post_type' == $post->post_type ) { 

   …and replace your_post_type with your own custom post type. And also insert this into line 5:

   global $post; 

9. Fix the Structured Data Testing Tool error: “The attribute image.width has an invalid value.”

   Structured data for AMP pages requires the featured image to be a minimum width of 696px.

   From the Google structured data reference:

   Images should be at least 696 pixels wide.

   If one of your AMP pages has a featured image that is smaller than a width of 696 pixels, you’ll receive this error in the Google Structured Data Testing Tool:

   The attribute image.width has an invalid value.

   It is very easy to fix this. The image width and height for structured data is being taken from your AMP page’s metadata. The following code will override the metadata for the image width and height, if needed. If a featured image has a width that is less than 696px, then it will scale the image up to a width of 696px. It will also scale the height up, as needed, so that the image will retain its original width/height proportion.

   Here is my hack to accomplish this. It’s a “hack,” but an effective one.

   /**
    * Fix the Structured Data Testing Tool error: "The attribute image.width has an invalid value."
    */
   function isa_amp_metadata_scale_up_image( $metadata, $post ) {
   
   	// if img width is < 696, scale the image up to the min allowed for AMP
   	if ( ! empty( $metadata['image']['width'] ) && ( $metadata['image']['width'] < 696 ) ) {
   		$metadata['image']['height'] = round( $metadata['image']['height'] * ( 696 / $metadata['image']['width'] ) );
   		$metadata['image']['width'] = 696;
   	}
   	return $metadata;
   }
   add_filter( 'amp_post_template_metadata', 'isa_amp_metadata_scale_up_image', 10, 2 );
   

10. Remove “Powered by WordPress” From Bottom of AMP Pages

    To remove the “Powered by WordPress” link from the bottom of your AMP posts, add this to your functions. This will hide it with CSS. If you prefer to actually remove it instead of just hiding it, see this comment below.

    PHP

    add_action( 'amp_post_template_css', function( $amp_template ) {
    	?>.amp-wp-footer p{display: none}<?php
    } );
    

I have a few other customizations for the WP AMP plugin, including:

• Remove generator meta tag for WordPress AMP Plugin
• Add Google Adsense To WordPress AMP Plugin (Accelerated Mobile Pages)
• Social Media Sharing Buttons For WordPress AMP
• Add Google Analytics Tracking Code To Accelerated Mobile Pages (AMP) in WordPress