• 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.

    amp theme

    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:

    amp-wp-plugin AMP theme

    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.

     

    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:

    1. AMP page header background color customization
    2. Changing or Replacing the WordPress logo with your logo
    3. Adding customiPHP PHP template file to amp’s child  folder
    4. Customizing the site header
    5. Add footer to the AMP theme
    6. Removing footer Whitespace from AMP theme
    7. Styling the Footer from AMP theme
    8. Adding AdSense code to the Accelerated Mobile Page
    9. 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:

    How to Add Accelerated Mobile pages to WordPress Using AMP Toolbox Plugin

     

    Also if you here is the Video tutorial for customing the amp WordPress theme for adding the Analytics Google code and Google Adsense

    One Response

    1. lalo April 23, 2018

    Leave a Reply

    This site uses Akismet to reduce spam. Learn how your comment data is processed.