Web & Software Developer

9 Ways To Customize The WordPress AMP Plugin By Automattic

This is a list of nine ways to customize the WordPress AMP plugin by Automattic. 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. 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' );
    
  2. Disable AMP For Certain Post IDs in WordPress AMP Plugin

    With the AMP plugin, AMP is enabled on all posts. This page shows you how to disable AMP (Accelerated Mobile Pages) for selected post IDs.

    There are different reasons why you may want to disable AMP for certain posts. For example, some posts may contain certain forms that don’t show up on AMP pages. Some posts may have large data tables that you can’t (or don’t want to) modify to display properly on AMP pages. There are several other reasons why you may want to turn off AMP for certain posts.

    The WordPress AMP plugin provides the amp_skip_post filter that lets you tell AMP which post IDs it should skip. Use the filter like this:

    You must edit line 7 to change the list of numbers to your own post IDs. Place there a comma-separated list of the post IDs for which you want to disable AMP. This will turn off Accelerated Mobile Pages for these post IDs.

    /**
     * Disable AMP for specified post IDs
     */
    add_filter( 'amp_skip_post', 'isa_skip_posts', 10, 3 );
    function isa_skip_posts( $skip, $post_id, $post ) {
    
    	$ids_to_skip = array( 213, 224, 378, 456 ); // Edit this line
    
    	if ( in_array( $post_id, $ids_to_skip ) ) {
    		$skip = true;
    	}
    	return $skip;
    }
    
  3. 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.

  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 );
    

I have a few other customizations for the WP AMP plugin, including Add Google Adsense To WordPress AMP Plugin (Accelerated Mobile Pages), and Social Media Sharing Buttons For WordPress AMP, and Add Google Analytics Tracking Code To Accelerated Mobile Pages (AMP) in WordPress.

By

We've 18 Responses

  1. March 16th, 2017 at 4:04 am

    Hi there Isabel.

    Your articles are really a big help to us new developers.

    Would you know if there’s a way to integrate Aweber with AMP ?

    Thanks and Have a Great Day!

    avatar
    • March 31st, 2017 at 9:50 pm

      They don’t make it too easy to do this. You first have to create folder named amp inside your theme. (You may already have this folder.) Inside this amp folder, create a new file called footer.php. Copy and paste everything from the AMP plugin’s footer.php template file. Currently (AMP Version 0.4.2), it is exactly this:

      <footer class="amp-wp-footer">
      	<div>
      		<h2><?php echo esc_html( $this->get( 'blog_name' ) ); ?></h2>
      		<p>
      			<a href="<?php echo esc_url( __( 'https://wordpress.org/', 'amp' ) ); ?>"><?php printf( __( 'Powered by %s', 'amp' ), 'WordPress' ); ?></a>
      		</p>
      		<a href="#top" class="back-to-top"><?php _e( 'Back to top', 'amp' ); ?></a>
      	</div>
      </footer>
      

      To remove “Powered by WordPress,” remove lines 4–6, or add whatever you want in there.

      This new file should reside at:

      wp-content/themes/yourtheme/amp/footer.php

      avatar
  2. April 18th, 2017 at 11:42 pm

    Hi Isabel,

    Disable AMP For Certain Post IDs in WordPress AMP Plugin

    I am using many custom post type and I want to disable ALL post in one custom type. Say

    domain/excludethis/test

    I want to disable everything under “Excludethis” custom post type.

    Please help.

    Thank you

    avatar
    • April 19th, 2017 at 1:10 am

      Hi. AMP is not enabled for custom post types. The only way it was enabled for custom post types is with the code in number 1 (Add Custom Post Type Support To WordPress AMP Pages). Did you use that code? Maybe you added a line for “excludethis” custom post type. If so, remove that line.

      avatar
      • April 19th, 2017 at 12:47 pm

        Then I think that’s the problem. I did not want to my other custom post type to apply the AMP but everything was converted. or could be the plugin I am using. ampfor

        avatar
  3. April 21st, 2017 at 2:13 pm

    I want to Disable Some Certain Widgets from WordPress AMP Pages
    EX: Some NON-AMP pages Post content widgets like Share Buttons are Display on WordPress AMP Version Post.
    Is there Any Function Code to Disable it from WordPress AMP pages??

    avatar
    • April 21st, 2017 at 3:39 pm

      To do disable it, it will depend on how the Share Buttons are being added to your posts. Is it a plugin that adds the Share Buttons? If so, which plugin?

      avatar
  4. May 12th, 2017 at 4:46 am

    Hello, i saw this option number 7:
    Remove The Date From AMP Pages

    I would like to remove the date from the metadata so it doesnt show on Google results? how do i do it Isabel?

    avatar
    • May 12th, 2017 at 12:04 pm

      Hi. This will remove the date from the metadata. Line 6 removes the Published date, and line 7 removes the Modified date.

      /**
       * Remove Date metadata (structured data) for AMP
       */
      function isa_amp_remove_date_metadata( $metadata, $post ) {
      
          unset( $metadata['datePublished'] );
          unset( $metadata['dateModified'] );
      
          return $metadata;
      }
      add_filter( 'amp_post_template_metadata', 'isa_amp_remove_date_metadata', 10, 2 );
      
      avatar
  5. May 21st, 2017 at 5:39 am

    In item 6 you write, “To make the AMP structured data (metadata) use the last modified date for the published date, add this to your functions:”

    Is this the functions.php file in the child theme, or should I create a functions.php in the AMP child theme?

    avatar
      • May 25th, 2017 at 12:03 pm

        I have just followed your instructions and the amp version now indeed shows the last modified date.

        The two things I was unclear about — which functions file to use, and where to place the amp folder with modified files — are now clear to me.

        Thanks Isabel!

        avatar
  6. May 24th, 2017 at 5:15 am

    Hi Isabal, really great Job! Here is my question: As you told in number 2 “Disable AMP For Certain Post IDs in WordPress AMP Plugin” it’s possible to make some posts out of AMP.

    What about the pages? I have a 3 pages: Contact, about and privacy policy. And i use Automattic AMP plugin. So when i add /amp to the end of these adresses, it directs to the own normal page: there is no AMP!

    But i have 3 critical error for my these pages on google search console.

    Then, what to do for correcting these errors or not to index these pages as AMP?

    Sorry for bad English. If anything confused, please just notice me.

    Thanks.

    avatar

Questions and Comments are Welcome

Your email address will not be published. All comments will be moderated.

Please wrap code in "code" bracket tags like this:

[code]

YOUR CODE HERE 

[/code]