What Will I Learn?

This article demonstrates how to disable the automatic AMP Lightbox on AMP-IMG on multiple levels on WordPress.

Requirements:

• AMP for WordPress plugin;
• Basic CSS & HTML knowledge;

The Issue

Actually, auto-lightbox is actually not a bug but a feature, though it can be as annoying if you don’t know that. It works great on many instances and improves UX on many pages, especially blog posts and articles. While it works great on those occasions, it can provide a terrible UX with auto-lightbox enabled on unnecessary AMP images, like design elements. …

What Will I Learn?

This tutorial demonstrates how to add the default WooCommerce shopping cart button to WordPress website running AMP-friendly theme.

Requirements:

• Basic CSS & HTML knowledge;
• Basic PHP knowledge;
• AMP for WordPress (Optional)

Shopping Cart Button in AMP-Friendly Theme Example

At the start, creating AMP and WooCommerce friendly theme, could look like an uphill battle, but steb-by-step it could be achieved. Find the example of the code, which would add shopping cart button to the desired part of your AMP-friendly theme. Further on, if you want to understand the code better — be sure to follow the tutorial through.

Some parts of the code are taken from Isabell Castillo tutorial…

What Will I Learn?

This tutorial demonstrates how to create a responsive mobile-friendly AMP carousel via amp-carousel on AMP WordPress website.

Requirements:

• Basic CSS & HTML knowledge
• AMP for WordPress (Optional)

Responsive AMP Carousel Example

This code is a minimalistic example of a responsive AMP Carousel power by AMP and amp-carousel. The carousel will have five slides on desktop screens bigger than 768px, and one slide on the smaller mobile screens.

<!--HTML-->
<amp-carousel id="carouselID" layout="fixed-height" height="120" type="carousel"> 
   <amp-img src="/img/image1.jpg" layout="fill" alt="apples"></amp-img> 
   <amp-img src="/img/image2.jpg" layout="fill" alt="lemons"></amp-img> 
   <amp-img src="/img/image3.jpg" layout="fill" alt="blueberries"></amp-img> 
</amp-carousel>
<!--CSS--> …

What Will I Learn?

This tutorial demonstrates a simple way to add Google Tag Manager and AMP-Analytics code on your website built with AMP & WordPress.

Requirements:

• Google Tag Manager Account;
• Basic CSS & HTML knowledge;
• AMP for WordPress (Optional)

Google Tag Manager for AMP-Analytics Code Example

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

<!-- Google Tag Manager -->
<amp-analytics config="https://www.googletagmanager.com/amp.json?id=GTM-XXXXXXX&gtm.url=SOURCE_URL" data-credentials="include"></amp-analytics>

This is all the code required to get Google Tag Manager working on AMP website, with the help of AMP-analytics library. If you don't know what to do with this code, follow step-by-step tutorial below.

Installing Google Tag Manager on AMP Website

Installing Google Tag Manager on any AMP-friendly website could be done by following 4 simple…

What Will I Learn?

This tutorial demonstrates a quick way to implement parallax scrolling effect on any AMP website via AMP-fx-collection.

Requirements:

• Basic CSS & HTML knowledge;
• AMP for WordPress (Optional)

Using AMP-FX-Collection

Currently, parallax scrolling effect is probably my favorite component of whole AMP framework regarding web design. It literally animates most of my AMP websites to life. What I really love about AMP parallax effect is that it is easier to be implemented with amp-fx-collection than its JavaScript counterparts. …

What Will I Learn?

This tutorial demonstrates how to add WooCommerce template files to your AMP WordPress theme to make your website AMP-friendly.

Requirements:

• Basic CSS & HTML knowledge;
• Basic AMP knowledge;
• Basic PHP knowledge;
• AMP for WordPress (Optional)

Creating AMP-Friendly WooCommerce Website

First and foremost as of yet there is no simple way to create AMP-friendly WooCommerce website with default plugins and templates. AMP for WordPress is a great help, but depending on your theme there will be a varied amount of cleaning and extra coding required to do. It is no simple task. This tutorial alone will not show how to achieve that, but it is a…

What Will I Learn?

This tutorial demonstrates how to setup a responsive AMP-AD unit to show different size ads based on screen size via media query.

Requirements:

• Google AdSense Account;
• Basic CSS & HTML knowledge;

Working Example

Below you can see a working example of a responsive AMP-AD unit. Note that you have to resize browser size and reload page to see the change.

AMP-AD AdSense Code Example

This is an example of the AMP-AD unit I use myself on all of my blogs. Note that in this article I will not go into ways of implementing the code. …

What Will I Learn?

This tutorial demonstrates a working example of AMP-AD code for Google AdSense and an easy way to setup it.

Requirements:

• Google AdSense Account;
• Basic CSS & HTML knowledge;
• AMP for WordPress (Optional)
• Widget Shortcut (Optional)

AMP-AD AdSense Code Example

This tutorial is about implementing ad units to WordPress website, but if you want to learn more about advanced options of AMP-AD, or how to create responsive media query AMP-AD, or AMP auto ads — click on the respective article.

<amp-ad width="100vw" height="320" 
  type="adsense" 
  data-ad-client="ca-pub-xxxxxxxxxxxxxxxx" 
  data-ad-slot="xxxxxxxxxxxxx" 
  data-auto-format="rspv" 
  data-full-width=""> 
<div overflow=""></div> 
</amp-ad>

This is the simplest code to implement AMP-AD unit, which is given by Google AdSense…