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

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

Google launched AMP HTML project a while ago and will be including more and more webpages 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.

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

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

Sharing is caring

Add to Flipboard Magazine.

You may also like...

  • user21

    Thank you for your great work !

    Is this will still work with the new update 0.3.3 released yesterday ?

  • amrasmin

    Great article! I have been able to deploy most things you explained.

    Quick question, how can we go about putting ads IN the content, say in the middle of the article or every X paragraphs? I see the Washington Post did it but they dont use wordpress i guess. Thanks again!!

  • I think in your case you haven’t created Child Theme for your site, so it means your theme. Child Theme makes sure that you don’t lose your custom codes when you update your parent theme aka your theme. so basically it means there will be two folders in the theme folder one with ”parent-theme-name” and other ”Parent-theme-name-Child-Theme” and you need to add a style.css file to the child theme folder and import your parent theme style to it’ and add some comments at the top of the child theme style.css …. to know more about Child Theme watch this video


    And to create a child theme, read this article http://www.wpbeginner.com/wp-themes/how-to-create-a-wordpress-child-theme-video/

    And when it comes to that code, you need to put that code on your theme’s custom-functions.php or functions.php . it will work on Plugin’s own file but the problem is when you update the plugin you will lose all you customization . if you are using main functions.php, make sure you never update your
    theme before you backup your theme because you will lose all your

  • Hi, I followed all instructions, but adsense ads or post pictures and youtube videos dont appears, including the logo, use genesis child theme, thanks for you support.

    • I just tried this on Genesis Framework 2.2.6 and everything worked perfectly. About YouTube videos, YouTube videos that you embedded via video embedding PLUGIN won’t appear on AMP pages because AMP doesn’t recognize the shortcodes automatically, you need to use WordPress default embedding system for videos if you want them to appear on AMP page. Otherwise, you may tweak AMP functions further to include the shortcode. Simply drop YouTube url in your post editor and WordPress will embed the video automatically without any issues, and those videos will appear on AMP page. And about the Logo, make sure you changed the name of the logo and entered the correct directory in the functions , see this is part of the function, “get_stylesheet_directory_uri().’/images/YOUR_FILE_NAME.jpg’;” here if your file ends with .png, you need to replace the .jpg with .png, also once again make sure the logo directory path like /images/ is also correct. … Adsense ad also works perfectly on Genesis, I think you have made some errors while editing code…

  • Acebravo

    Very useful post thanks.

    I’m confused however by the “child theme” thing. Obviously I use a WP theme for the site and it does have a custom-functions.php file which I use to insert adsense and manipulate categories etc.. not my own coding of course :-) I know nothing but I read a lot on the Net and trial and error.

    Are you saying to create a folder amp in the directory of my theme?

    Also, when you say functions.php in child theme, could that be the plugin’s own helper-functions.php? I used that to set the site-icon and it works.

    Also, where would this code go, which file/.template: