Originally published at https://ampire.city

What Will I Learn?

This article demonstrates a possible solution to fix amp-iframe, if it isn't loading correctly on AMP website.

Requirements:

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

Originally published at https://ampire.city

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


Originally published at https://ampire.city

What Will I Learn?

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

Requirements:

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


Originally published at https://ampire.city

What Will I Learn?

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

Requirements:

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

Originally published at https://ampire.city

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 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…


Originally published at https://ampire.city

What Will I Learn?

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

Requirements:

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


Originally published at https://ampire.city

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…


Originally published at https://ampire.city

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


Originally published at https://ampire.city

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:

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…


Originally published at https://ampire.city

What Will I Learn?

This tutorial demonstrates how to add dots navigation to amp-carouselvia amp-selector.

I assume that you already have coded AMP carousel thus I will not explain how to do it in this tutorial. In case you don't have amp-carousel coded yet, follow this link to make one.

Requirements:

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

Full code of AMP Carousel with dots

This code example is of AMP Carousel with dots navigation populated by ACF repeater field on WordPress. If you are interested in the solution itself just follow the tutorial and I’m sure I will break this down for you so you could…

Alis Monte

Travel Blogger, Web Designer & AMP Developer | Travel & History Journal: https://www.ctdots.eu | AMP Development & Web Design Tutorials: https://ampire.city

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store