This article demonstrates a possible solution to fix amp-iframe
, if it isn't loading correctly on AMP website.
This article demonstrates how to disable the automatic AMP Lightbox on AMP-IMG on multiple levels on WordPress.
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. …
This tutorial demonstrates how to add the default WooCommerce shopping cart button to WordPress website running AMP-friendly theme.
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…
This tutorial demonstrates how to create a responsive mobile-friendly AMP carousel via amp-carousel
on AMP WordPress website.
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--> …
This tutorial demonstrates a simple way to add Google Tag Manager and AMP-Analytics
code on your website built with AMP & WordPress.
<!-- 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>m.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 any AMP-friendly website could be done by following 4 simple…
This tutorial demonstrates a quick way to implement parallax scrolling effect on any AMP website via 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. …
This tutorial demonstrates how to add WooCommerce template files to your AMP WordPress theme to make your website AMP-friendly.
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…
This tutorial demonstrates how to setup a responsive AMP-AD unit to show different size ads based on screen size via media query.
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.
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. …
This tutorial demonstrates a working example of AMP-AD code for Google AdSense and an easy way to setup it.
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…
This tutorial demonstrates how to add dots navigation to amp-carousel
via 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.
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…
Travel Blogger, Web Designer & AMP Developer | Travel & History Journal: https://www.ctdots.eu | AMP Development & Web Design Tutorials: https://ampire.city