How to Customize Wordpress AMP Theme, Add Google Analytics and AdSense

Google AMP aka Accelerated mobile pages HTML implementation to a website is very important due to its SEO benefits. AMP ready HTML pages in mobile search results get load much faster than normal pages. The Internet is already filled up with the articles and tutorials on AMP: Accelerated mobile pages Project. AMP was developed for HTML based websites but if you are WordPress user then don’t be sad because already there are numbers of AMP plugins are available in the WordPress plugins directory. Different developers have developed AMP plugins for WordPress to enable AMP ready WordPress pages. To activate the AMP theme for WordPress Bog just install the AMP: Toolbox plugin or AMP plugin.

The AMP Plugin creates a simple or basic page for your WordPress and strips down all your fancy theme features including Google Adsense. So today in this tutorial we are going to how to customize the AMP pages to enable the Google Adsense functionality.

Note: If you don’t want mess with coding and just need a plugin that can enable the Google AdSense, notification, and other theme feature in your AMP ready WordPress blog then please see this article:

How to Set up WordPress for AMP: Accelerated Mobile Pages using Plugin called AMP Toolbox along Google Adsense and Analytics

In the above-given link, we have covered a free amp plugin called AMP Toolbox WordPress plugin enable one touch customization to your AMP theme.

On this Page show

Steps to customize the WordPress AMP themes to enable Google Adsense and Google Analytics

Before Starting this tutorial here is the summary of what we are going to change here:

AMP page header background color customization
Changing or Replacing the WordPress logo with your logo
Adding customiPHP PHP template file to amp’s child folder
Customizing the site header
Add footer to the AMP theme
Removing footer Whitespace from AMP theme
Styling the Footer from AMP theme
Adding AdSense code to the Accelerated Mobile Page
Adding Google Analytic code to WordPress AMP page

Now we are going to start the tutorial. Please use the child theme for your main theme. You implement this tutorial directly to your main theme but be sure when you updating the theme backup your amp folder which we are going to create and customize in this tutorial. If you are using the child theme then there is no issue because your update to the main theme will not go to affect the child theme folder.

Step 1: Install the AMP plugin in WordPress and create a folder called amp in your theme folder.

Step 2: Now copy the style.php file from amp plugins folder to your main theme or child theme folder. You will find this file under plugins->amp->templates folder.

Step3: Open the functions.php of your child theme and paste this code at the end. I am asking to paste this code at the end because you can easily remember where you had pasted the code.

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

To customize the background color of your AMP page header

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

Step 5. To customize the default WordPress icon with your logo, in the images folder of your child theme that you will find in hosting Cpanel file manager under WordPress->Wpcontent->themes->select your theme folder and create an ‘images’ folder under it. Now upload your icon or logo 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;

}

Step 6: 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;
}

If you are using Amp 0.2 and updated to Amp 0.3 then the replace the following line

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

with these lines of code 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 ); ?>
        </style>

Step 7: Customize the site header with your site name or logo Go to ”my-single.php” -> search <nav> </nav> between theses tags immediate below the <body> tag , you will see this code between these 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;?>

Step 8: Adding the Footer

Paste this piece of code between <nav> </nav> tag in amp->my-single.php and use it as footer, do changes as per your requirement.

<footer class="title-bar" >
<div>
  <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;?>
  </a>
</div>
</footer>

Paste this code immediate above this line of PHP code in the my-single.php.

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

Step 9: Removing footer Whitespace from amp theme

Go to your child theme folder -> amp -> style.php , after body opening find “padding-bottom” delete or comment it out like this

/*padding-bottom:100px; */

Step 10: Styling the Footer.

Go to ->child theme -> amp -> style.php . Find out /*Titlebar */ or Footer and add the following changes. To change the color change the background value.

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

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

footer.title-bar a {
  color: #fff;
  text-decoration: none;
}
/* FOOTER END*/

Adding AdSense to AMP theme

Just copy and paste the core immediate below the <div class=”content”> tag in the my-single.php of your ‘amp’ theme folder

<!--ADSENSE AD SLOT-->
   <div id="ad1">
   <amp-ad  width=336 height=280
     type="adsense"
     data-ad-client="ca-pub-XXXXXXXXXXXXXXXXX"
     data-ad-slot="XXXXXXX">
   </amp-ad>
   </div><div class="clear"></div>
<!--ADSENSE AD SLOT-->

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

Adding Google Analytic code to WordPress AMP page.

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 }

After adding the above code copy below code 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"
    }
  }
 }
}
</script>
</amp-analytics>

Replace this XXXXXXXXX-2 with your Analytics code ID.

I don’t thing we need to do all above manual editing, you can simply use a plugin called AMP Toolbox Plugin to add and customize the AMP theme. This AMP plugin not only add amp pages to WordPress but also allow you to add Google Analytics code and Goole Adsense by using theWordpress Admin dashboard. For more information about this plugin you can give a look to our Article: