AMP in Wordpress

the easy way

HTML and CSS

A good source for the ampproject components' library is AMPbyexample

  • Basics
  • Multimedia
  • Social
  • Ads
  • Templates and Samples
  • Experimental code

HTML

Required Html code:
  • main html element
  • charset
  • main js (2nd child of head)
  • canonical link(to html or itself)
  • AMP boilerplate
  • The img element doesn't exist within the AMP syntax
    <amp-img>
CSS

Supported code:

  • No inline css, behavior filter and -moz-binding proprieties, no !important tag
  • built in amp.css
  • In the head section
    <style amp-custom>
  • do not pseudoselect the "-amp-" elements even with pseudoselectors
  • Animations are limited to to transform and opacity in transitions and keyframes

add css code in the header hook

function hook_css() {
    ?>
        <style amp-custom>
            .wp_head_example {
                background-color : #f1f1f1;
            }
        </style>
    <?php
}
add_action('wp_head', 'hook_css');

Links to fonts

  • Using the "link" tag in the head of the page (only whitelisted origins):
    <link href="https://fonts.googleapis.com/css?family=Lato|Merriweather" rel="stylesheet">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
  • Via @font-face

JAVASCRIPT

Actions and Events in AMP

These are the events used in the amp elements and templates

add external resources via 'amp-iframe'

<script async custom-element="amp-iframe" src="https://cdn.ampproject.org/v0/amp-iframe-0.1.js"></script>
<amp-iframe width=300 height=300
    sandbox="allow-scripts allow-same-origin allow-popups allow-popups-to-escape-sandbox"
    layout="responsive"
    frameborder="0"
    src="https://www.google.com/maps/embed/v1/place?key=AIzaSyDG9YXIhKBhqclZizcSzJ0ROiE0qgVfwzI&q=Alameda,%20CA">
</amp-iframe>

Web validator

Web and chrome console validators

Most common validation errors

A step on Wordpress

from components to templates

flux diagram

Sample menu with amp-sidebar

First step in function.php

function register_amp_menu() {
  register_nav_menu('header-menu',__( 'Header Menu' ));
}
add_action( 'init', 'register_amp_menu' );
function hook_amp_elements() {
    ?>
        <script async custom-element="amp-sidebar" src="https://cdn.ampproject.org/v0/amp-sidebar-0.1.js"></script>
    <?php
}
add_action('wp_head', 'hook_amp_elements');

We are using hook_amp_elements to add elements used in every php template of your theme

Then in your php template (header.php or page.php)

wp_nav_menu( array( 'theme_location' => 'header-menu', 'items_wrap'=> '' ) );

In "item_wrap" we need to add these lines of code

<button on="tap:sidebar.toggle"
  class="yourbutton-class">Toggle sidebar</button>
<amp-sidebar id="sidebar" layout="nodisplay" side="right" >
  <amp-img class="amp-close-image" src="/img/ic_close_black_18dp_2x.png" width="20" height="20" alt="close sidebar" on="tap:sidebar.close" role="button" tabindex="0"></amp-img><ul id="%1$s" class="%2$s">%3$s</ul></amp-sidebar>

No need to use a walker, neither any custom solutions

Header general hook

in function.php

add_action('wp_head', 'your_function');

called template

header.php

call (index.php or single.php)

get_header();

Different headers for different elements

get_header('custom');

so...

if (is_category()) {
get_header('categories');
} elseif(is_single()) {
get_header('single');
} elseif(is_front_page()) {
get_header('front_page');
} elseif(is_archive()) {
get_header('archive');
} elseif (is_page()) {
get_header('pages');
} else {
get_header();
}

will work on these templates on the theme's root folder

  • header-categories.php
  • header-single.php
  • header-front_page.php
  • header-archive.php
  • header-pages.php
Media attachments
AMP elements
add_theme_support('post-formats', array( 'gallery', 'image', 'video', 'audio'));

Customize single post formats templates it en

Images template
amp given code
Galleries (shortcode and post format)template
amp given code
Video (Youtube) embed template (general custom oembed)
amp given code
Audio (shortcode)template IT
amp given code

The End

Please contribute and post issues to this repo