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…


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…


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


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

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…


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…


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


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…


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;

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