Adding Google Analytics in Wordpress AMP
View Snippet
<!-- #Analytics Script Goes in Head -->
<script async custom-element="amp-analytics" src="https://cdn.ampproject.org/v0/amp-analytics-0.1.js"></script>
<!-- #### Analytics Script Ends -->
<!-- #### Analytics Script Goes before </body> -->
<amp-analytics type="googleanalytics" id="analytics1">
<script type="application/json">
{
"vars": {
"account": "UA-XXXXXXXX-XX"
},
"triggers": {
"trackPageview": {
"on": "visible",
"request": "pageview"
}
}
}
</script>
</amp-analytics>
<!-- #### Analytics Script Ends -->
Social Sharing Button in Wordpress AMP
View Snippet
<!-- #### Social Sharing Script Goes before </head> -->
<script async custom-element=”amp-social-share” src=”https://cdn.ampproject.org/v0/amp-social-share-0.1.js”></script >
<!-- #### Social Sharing Script Ends -->
<!-- #### Social Sharing Script Goes after </header> -->
<div id="social-sharing-amp">
<amp-social-share type="twitter" layout="fixed" width="30" height="30"> </amp-social-share>
<amp-social-share type="gplus" layout="fixed" width="30" height="30"></amp-social-share>
<amp-social-share type="email" layout="fixed" width="30" height="30"></amp-social-share>
<amp-social-share type="linkedin" layout="fixed" width="30" height="30"></amp-social-share>
<amp-social-share type="facebook" layout="fixed" width="30" height="30" data-param-app_id="104818423010055"></amp-social-share>
</div>
<!-- #### Social sharing script ends -->
Google Adsense for Wordpress AMP
View Snippet
Step 1. Open single.php file and in just before </head> tag paste:
<script async custom-element="amp-ad" src="https://cdn.ampproject.org/v0/amp-ad-0.1.js"></script>
Note that amp-ad may still work without this script, but AMP PROJECT highly recommend it for future compatibility
https://www.ampproject.org/docs/reference/components/amp-ad
Step 2: Find <div class=”amp-wp-content”> line. And below the line paste the the code below
<amp-ad width=350 height=100
type=”adsense”
data-ad-client=”ca-pub-95675557XXXXXXXX”
data-ad-slot=”170XXXXXXX”>
</amp-ad>
Step 3: For ad to be displayed below the post search for do_action( ‘amp_post_template_footer’, $this ); and paste the adsense code before the php starting tag which we used in the previous step.
Hamburger Sidebar Menu for Wordpress AMP
View Snippet
<!-- #### Sidebar script before </header> in single.php -->
<script async custom-element="amp-sidebar" src="https://cdn.ampproject.org/v0/amp-sidebar-0.1.js"></script>
<!-- #### Sidebar script ends -->
<!-- #### Sidebar script before </div> in header-bar.php-->
<a on='tap:sidebar.toggle' class="menu-icon"><amp-img src="http://www.yourdomain.com/wp-content/uploads/2016/11/nav-icon.png" width="44" height="34" class="img-responsive" alt=""></amp-img></a>
<!-- #### Sidebar script ends -->
<!-- #### Sidebar script goes in <body> in header-bar.php -->
<amp-sidebar id='sidebar' layout="nodisplay" side="right">
<amp-img class='amp-close-image' src="http://www.yourdomain.com/wp-content/uploads/2016/11/close-black.png" width="20" height="20" alt="close sidebar" on="tap:sidebar.close" role="button" tabindex="0"></amp-img>
<ul class="top-menu">
<li><a href="http://www.yourdomain.com/">Home</a></li>
<li><a href="http://www.yourdomain.com/category/how-to-guides/">How to Guides</a></li>
<li><a href="http://www.yourdomain.com/category/i-love-my-city-2/">I Love My City</a></li>
<li><a href="http://www.yourdomain.com/category/seo/">SEO</a></li>
<li><a href="http://www.yourdomain.com/category/travel-guide/">Travel Guides</a></li>
<li><a href="http://www.yourdomain.com/category/musings/">Musings</a></li>
<li><a href="http://www.yourdomain.com/category/about/">About</a></li>
</ul>
<button class="-amp-screen-reader" tabindex="-1">Close the sidebar</button></amp-sidebar>
<!-- #### Sidebar script ends -->
/*Code to be inserted at the bottom of style.php file/*
/* AMP Sidebar */
ul.top-menu{font-size:16px;padding:20px 0 0 15px;}ul.top-menu li{font-size:16px;color:#333;text-decoration:none;font-size:18px;padding:8px 0 8px 0px;margin:0px; list-style:none;border-bottom:#CCC solid 1px;}ul.top-menu li a{color:#333;text-decoration:none;}ul.top-menu li a:hover{text-decoration:underline;}.amp-close-image{top:15px;left:225px;cursor:pointer;}amp-sidebar{width:250px;padding-right:10px;}
.menu-icon{float:right;cursor:pointer;}
/*Code ends/*