WordPress + AMP: How to customize Accelerated Mobile Pages, add Google Analytics and AdSense Code to it

Google launched AMP HTML project a while ago and will be including more and more web pages with AMP HTML page in its search results and redirecting mobile visitors to AMP pages instead of regular html website. There have already been hundreds of articles about Google’s latest AMP aka Accelerate Mobile Pages Project and I know you are not here to learn what the AMP html page is all about. The good news for WordPress users is that there is a plugin called AMP to activate the AMP theme for WordPress blogs. The plugin creates basic page for your blog, and you may want to customize it with your title and icon and also want to monetize with AdSense and activate Google Analytics for the AMP page. This tutorial walks you through the customization of the AMP theme for WordPress blog.

Update 12/21/2016 : For new users of AMP plugin, this tutorial is for users with older version of AMP plugin, and if you still wanna follow this tutorial and get your AMP theme customized, I highly recommend using earlier version of AMP plugin that can be obtained from this link AMP 0.3. You don’t need to worry about future update as long as you use this stand-alone custom template for AMP. You can safely update your AMP plugin to the latest version once you finish this customization as in this tutorial.

For this tutorial, I assume that you have already created a Child Theme for your main theme and any customization for the AMP page will also be done in this Child Theme folder  (main theme folder unless there is child theme). You should not edit any plugin files in order to customize the AMP theme it produces, because any customization you make on the plugin files will be lost once you update your plugin in the future.  I also assume that you have installed the AMP plugin for WordPress.

I am jumping right into the tutorial and you may also watch the video below for step by step instructions.

1.First, create a folder called ‘amp’ in your theme folder and copy the style.php from plugin-> amp-> template’s folder into the ‘amp’ folder you created in your child theme folder .

Update 02/25/2016: for AMP 0.3:  ‘<style amp-custom>’ ‘</style>’ tags no longer needed in the custom style.php file created in the ‘amp’ folder .

2.Copy this filter into functions.php of your child theme.

add_filter( 'amp_post_template_file', 'amp_set_cutome_style_path', 10, 3 );  // Setting custom stylesheet 

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

if ( 'style' === $type ) {

    $file = dirname( __FILE__ ) . '/amp/style.php';

  return $file;

3.Change background color of the AMP page header.

Go -> child theme amp folder-> style.php -> find ‘nav.title-bar’ property and change the background color of the header. save it.

4. Replacing the WordPress icon with your own.

Create an ‘images’ folder in the child theme folder and upload your icon image to that folder. Then, copy this filter and paste it in your child theme functions.php file.

add_filter( 'amp_post_template_data', 'xyz_amp_set_custom_site_icon_url' ); //Changes site icon

function xyz_amp_set_custom_site_icon_url( $data ) {

    $data[ 'site_icon_url' ] = get_stylesheet_directory_uri().'/images/YOUR_FILE_NAME.jpg';

return $data;


5.Adding custom php template file to the child ‘amp’ folder.

Create a new file called ”my-single.php” and add it to the child theme ‘amp’ folder, then go to plugins->amp->templates-> single.php, copy the whole code from the single.php and paste it in ”my-single.php” you created. Then, copy this filter into your functions.php file of your child theme.

add_filter( 'amp_post_template_file', 'set_my_amp_custom_template', 10, 3 ); //Setting custom template for amp page

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

if ( 'single' === $type ) {

    $file = dirname( __FILE__ ) . '/amp/my-single.php';
  return $file;

Update 02/25/2016: for users updated to AMP 0.3 from AMP.02: Remove these lines of boilerplate styles from ”my-single.php” file in your ”amp” theme folder.

   <style>body {opacity: 0}</style><noscript><style>body {opacity: 1}</style></noscript>
   <?php $this->load_parts( array( 'style' ) ); ?>

And replace it with these lines of code, which is actually lines from AMP 0.3 single.php file in the plugin folder

       <style amp-custom>
               <?php $this->load_parts( array( 'style' ) ); ?>
               <?php do_action( 'amp_post_template_css', $this ); ?>

6.Replacing the site header with an image of your site name.

Go -> ”my-single.php” -> find out opening and closing  <nav>  </nav> tags immediate below the <body> tag , then you should see this line of code between the tags..

    <?php echo esc_html( $this->get( 'blog_name' ) ); ?>

Replace the code with this piece of code:

  <?php if($this->get( 'blog_name' ) ) : ?>

       <amp-img src="<?php echo get_stylesheet_directory_uri().'/images/YOUR_IMAGE_FILE_NAME.png ';?>" alt="YOUR SITE NAME" width="187" height="60" ></amp-img>

  <?php else: ?>

       <?php echo esc_html( $this->get( 'blog_name' ) ); ?>

  <?php endif;?>

Then, make necessary changes to the file name and ‘alt’ attribute value in the <amp-img    > tag, save it.

To adjust the location of the image header, go to style.php file in your child ‘amp’ folder and find out  the selector ” nav .title-bar div ”

Then add  ”padding-top: 10px;” in the curly braces  or you may make your own adjustments to it.

7.Add footer to the AMP theme.

To do this, we will use the same customized piece of code between <nav> </nav>  tag and use it as footer and make necessary changes to it. However, you don’t need to make any changes.

Go -> Child theme folder-> amp ->  my-single.php file

Then, copy this piece of code with necessary changes:

<footer class="title-bar" >
  <a href="<?php echo esc_url( $this->get( 'home_url' ) ); ?>">
   <?php if($this->get( 'blog_name' ) ) : ?>
       <amp-img src="<?php echo get_stylesheet_directory_uri().'/images/YOUR_IMAGE_NAME.png';?>" alt="YOUR_SITE_NAME" width="187" height="60" ></amp-img>
   <?php else: ?>
       <?php echo esc_html( $this->get( 'blog_name' ) ); ?>
   <?php endif;?>

And paste it immediate above this line of php code in the my-single.php.

   <?php do_action( 'amp_post_template_footer', $this ); ?>

Then make necessary changes to the code where indicated such as file name and ‘alt’.

Now take a look at your page, there is no background color for the footer bar that is because we haven’t applied any styling to the footer. And there is also a whitespace or margin immediate below the footer image, we need to fix that as well with some customization in the style.php file

8.Removing the Whitespace immediate below the footer.

Go to your child theme folder -> amp -> style.php , find out the selector ‘body’ and you should see the property “padding-bottom” in the curly braces. To get rid of the whitespace below the footer, just remove the padding code or you may comment it out like this

/*padding-bottom:100px; */

Then save the file and upload it to your server if you are using FTP. Now the white space under the footer must have disappeared.

9.Styling the Footer.

So for styling the footer it is as easy as anything you have done so far. Go to ->child theme -> amp -> style.php .  Find out the comment /*Titlebar */ and copy the necessary code between the comment or you may copy this css styling and paste it immediate above the closing </style>:

/* FOOTER */
footer.title-bar {
  background: #33363b /*#0a89c0*/ ;
  padding: 0 16px;
  align-items: baseline;
  display: block;

footer.title-bar div {
  line-height: 50px;
  color: #fff;

footer.title-bar a {
  color: #fff;
  text-decoration: none;

To change the background color, simply replace the value of “background” property with your liking

Like this ‘’background: red;’’   you may use color code. Then save the file and now you should see background color and other changes if you have made to your AMP theme footer.

10.Adding AdSense code to the Accelerated Mobile Page.

We will add an Adsense widget immediate above the title and one above the footer.  To show ad above the title, Just copy this piece of code and paste it immediate below the  <div class=”content”>  tag in the my-single.php file in your child ‘amp’ theme folder

   <div id="ad1">
   <amp-ad  width=336 height=280
   </div><div class="clear"></div>

And to show AdSense ad above the footer and below the content, just copy the same code and paste it immediate below this line of code

   <?php echo $this->get( 'post_amp_content' ); // amphtml content; no kses ?>

That also means immediate above the closing </div> tag for content.

And replace the XXXXX  and ca-pub-XXXXXXXXXXXXXXXXX  with your data-ad-slot  numbers for each ad unit and your Adsense data-ad-client  ID respectively. As of now, the AMP HTML doesn’t support  responsive ad attribute, so you must not add the responsive attribute to the ad slot and you should not add any script either as AMP doesn’t support any external scripts except for select scripts that Google has hosted on its CDN. The <amp-ad  > </amd-ad> with correct attributes will automatically load the necessary scripts and serve the ads properly.

11.Adding Google Analytic code to WordPress AMP page.

You are almost set, but you will still not get analytic data for your AMP page visitors on your Google Analytics account as the page doesn’t contain script for that. Thanks to Google, it has also added a special analytic code for loading analytic scripts. So far, only a few scripts are supported which are hosted on Google CDN.

To get your AMP page Analytic-ready , just copy the filter below and paste it in your functions.php file in your child theme folder.

add_action( 'amp_post_template_head', 'amp_add_google_analytics' );  // Adding google Analytic script to head tag of Amp page

function  amp_add_google_analytics( $amp_template ) { ?>

     <script async custom-element="amp-analytics" src="https://cdn.ampproject.org/v0/amp-analytics-0.1.js"></script>

<?php }

The above filter will add the script in the <head> section of AMP page but not done yet, now you need to set what data you need the script to send to your Analytic account. For that, just copy the code below and paste it in the  my-single.php  file  immediate below the <body> .

<amp-analytics type="googleanalytics" id="googleanalytics">
<script type="application/json">

"vars": {
  "account": "UA-XXXXXXXXX-2"

"triggers": {
 "track pageview": {
  "on": "visible",
  "request": "pageview"

"track anchor clicks": {
   "on": "click",
   "selector": "a",
   "request": "event",

"vars": {
  "eventId": "42",
   "eventLabel": "clicked on a link"

"trackEvent": {
   "selector": "#event-test",
   "on": "click",
   "request": "event",

"vars": {
   "eventCategory": "ui-components",
   "eventAction": "click"

And then you may replace this  XXXXXXXXX-2 with your account property ID. It is recommended to create a new property under your main Google analytic account instead of using the same analytic ID for your main website page, so that you can have separate analytic data for your WordPress AMP Page.

Update:      WordPress + AMP: How to Add Related Posts to Accelerated Mobile Pages without Plugin

WordPress + AMP: How to insert Adsense Ad in the middle of post content without plugin

WordPress + AMP: Add Social Sharing Buttons to Accelerated Mobile Pages without plugin

Ok! you don’t know how to create new property on Google Analytic account. Well, Just follow the steps below.

Sign in to your Google Analytic account and switch to Admin tab. Under the property section, click the drop down property list and click create new property. Fill out the necessary details  such as Website name. For example,  if your original property name is  example.com , for this one, you may choose  example.com AMP. Enter the Website URL, Industry category and Reporting Time Zone.

Once set, just click the Get Tracking ID button and you will get new tracking ID for your second property, that should look like this  ‘UA-21446566-2’ , just use the tracking ID for the code above instead of UA-XXXXXXXXX-2.

Hurray !!  You have customized your basic AMP WordPress theme, and you are set to send your mobile visitors to your unique AMP page. Please leave your comment and questions in the box below.

We hope this article really helped you and would love to have some love back by sharing the article on your social sites, forum accounts or linking back and following us on Facebook and Twitter.

Note: The AMP plugin is still a work-in-progress and there may have better options in the coming weeks. I will be updating this post once more options and filters are available and show you how to tweak the plugin-generated theme even more.



You might also like