1. Home »
  2. Tech

Make Your WordPress Theme Support AMP

Accelerated Mobile Pages

AMP or Accelerated Mobile Pages is an open source project which allows publishers and webmasters to make a modified version of their pages in a format known as AMP HTML. Publishing a version of your website in this HTML format will allow search engines like Google to cache your pages in a special way which will allow serving your content to mobile user in an instant super fast speed.

We recommend that you review the getting started guide on the AMP project website to be able to understand how AMP works. There are already a number of WordPress plugins which you can use to make your WordPress website AMP ready. In this guide you will overview how to manually convert any WordPress theme and make it support AMP without any plugins. This can be done by creating simple PHP files in your WordPress theme’s folder. After completing the following steps you will be able to achieve:

  1. Manually editing your WordPress files on your own to make your site supports AMP
  2. Adding the proper code to generate AMP HTML version of your WordPress posts.
  3. Automatically generate valid AMP HTML version of your posts and changing <img> tag to AMP supported <amp-img> tags within your posts and pages automatically.
  4. Removing any HTML tag that is not valid according to the AMP project guidelines.

Manually Adding AMP Support for WordPress

First you need to create a custom template file within your WordPress theme folder located in WordPress installation folder wp-contents/themes/ you will find your theme folder there where you will upload additional files to the existing theme files.

  1. Open a new Notepad and add the following code
  2. <!doctype html>
    <html ⚡ lang="en">
      <head>
        <meta charset="utf-8">
        <script async src="https://cdn.ampproject.org/v0.js"></script>
        <title><?php echo trim(wp_title('', false)); ?></title>
        <link rel="canonical" href="<?php echo (get_permalink());?>" />
        <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
        <script type="application/ld+json">
          {
            "@context": "http://schema.org",
            "@type": "NewsArticle",
            "headline": "<?php echo trim(wp_title('', false)); ?>",
            "datePublished": "<?php echo get_the_date( 'c' ); ?>",
            "image": [
              "logo.jpg"
            ]
          }
        </script>
        <style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>
      </head>
      <body>
    <?php if ( is_single()  ) : ?>
    <div id="content">
        <?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
              <h1 class="item"><span class="fn"><?php the_title(); ?></span></h1>
            <?php the_content(); ?>
        <?php endwhile; else: ?>
        <?php endif; ?>
    </div>
    <?php endif; ?>
    
      </body>
    </html>
  3. change logo.jpg with your website’s URL for a logo image file
  4. Click File then Save As Save file as PHP using Notepad
  5. Choose All files as the file type and name the file amp.php
  6. Make sure to choose the encoding UTF-8 when saving the file using Notepad
  7. Upload this file to your theme folder located in wp-contents/themes inside the folder named the same as your existing WordPress theme’s name.
  8. Open your theme’s functions.php file located within the same folder and add this code at the end of the file
  9. function add_query_vars_amp( $vars ){
      $vars[] = "amp";
      return $vars;
    }
    add_filter( 'query_vars', 'add_query_vars_amp' );
    if (isset($_GET['amp'])) {
    add_filter( 'template_include', 'amp_template_theme');
    function amp_template_theme( $amptemplate ) {
       global $post, $wp_query;
    	if ($wp_query->query['amp'] === '1') {
    		$amp_template_theme = locate_template( array( 'amp.php' ) );
    		if ( '' != $amp_template_theme ) {
    			return $amp_template_theme ;
    		}
    	}
    	return $amptemplate;
    }
    	function replace_imageamp($contentamp)
    {
    	global $post, $wp_query;
    	if ($wp_query->query['amp'] === '1') {
    $contentamp = str_replace('<img', '<amp-img layout="responsive"',$contentamp);
    	}
    return $contentamp;
    }
    add_filter('the_content','replace_imageamp');
    add_filter( 'the_content', 'the_content_filter_amp_page');
    
    function the_content_filter_amp_page( $contentampst ) {
        $contentampst = preg_replace('/(<[^>]+) style=".*?"/i', '$1', $contentampst);
    	$contentampst = preg_replace('/(<[^>]+) trbidi=".*?"/i', '$1', $contentampst);
    	$contentampst = preg_replace('/(<[^>]+) border=".*?"/i', '$1', $contentampst);
    	$contentampst = preg_replace('/(<[^>]+) imageanchor=".*?"/i', '$1', $contentampst);
        return $contentampst;
    }	
    }
    
  10. open your theme’s header.php file and add this line within the <head> tag. As this line will allow search engines to discover your AMP posts.
  11. <?php if ( is_single() ) : ?>
    <link rel="amphtml" href="<?php echo (get_permalink());?>?amp=1" />
    <?php endif; ?>

After making the previous edits to your theme files and uploading it to your server, your WordPress will be AMP ready and you will be able to access your posts in AMP HTML by adding ?amp=1 at the end of the URL. Search engines like Google will automatically index the AMP version of your posts after making these changes.

This is a very basic guide and the resulted page will be a valid AMP HTML page which you can validate through any AMP validator tool. To style your AMP pages and add your own modification like custom CSS and ads you can do this by modifying amp.php file that you have created through this guide. But always remember that your modifications must comply to AMP project guidelines as for example there are several HTML tags that are not valid in AMP. Also in some rare cases one of your posts may contain some invalid AMP HTML tags which you will have either to modify manually or add the proper preg_replace line to your existing functions.php file.