What if you could get a 20% boost in mobile speed, with an integrated, easy-to-implement solution? Google and WP Engine have teamed to educate you on using AMP with Genesis to help you easily build mobile sites with amazingly fast page speed.
Register for the on-demand version here: https://hs.wpengine.com/webinar-genesis-and-amp
2. #wpewebinar
In this session, you’ll learn...
● Why Google and WP Engine have partnered
● How AMP works with Genesis
● How to best use AMP with your Genesis theme
● When and how to use AMP-first design
● What are AMP Stories?
3. #wpewebinar
Ask questions as we go.
We’ll answer as many questions as we can after
the presentation
Slides and recording will be
made available shortly after
the webinar
Use the “Questions” pane
throughout the webinar
19. #wpewebinar
Serving AMP from WordPress before plugin
• Handwritten custom themes
• M-dot sites and AMP-dot sites
• This was difficult
• We have an alternative
26. #wpewebinar
CSS Tree Shaking
This is possible because AMP pages will have
known components and known component sizes.
No new styles will be added, we can know what
styles will be on the page in advance.
32. #wpewebinar
AMP Validation
• Validation in the browser
• In the WP Dashboard
• In bulk from the command line
• From the search console
• All using the same AMP Validation
46. #wpewebinar
What if your theme isn’t working?
add_theme_support( 'amp', array(
'template_dir' => 'amp-templates',
) );
● You can fork your theme and fix the AMP issues then
merge those changes.
● Develop your AMP theme as a child theme.
49. #wpewebinar
When you need AMP and HTML to differ
<?php if ( function_exists( 'is_amp_endpoint' ) && is_amp_endpoint() ) : ?>
<amp-social-share type="twitter"></amp-social-share>
<?php else : ?>
<a
href="https://twitter.com/intent/tweet/?url=http%3A%2F%2Fexample.com">Share</a
>
<?php endif; ?>
50. #wpewebinar
You need to add to the AMP header or footer
add_action( 'amp_post_template_footer', 'xyz_amp_add_pixel' );
function xyz_amp_add_pixel( $amp_template ) {
$post_id = $amp_template->get( 'post_id' );
?>
<amp-pixel src="https://example.com/hi.gif?x=RANDOM"></amp-pixel>
<?php
}
51. #wpewebinar
Working with a JS Nav
<!-- 1. Define the state -->
<amp-state id="navMenuExpanded">
<script type="application/json">false</script>
</amp-state>
52. #wpewebinar
Working with a JS Nav
<!-- 2. Mutate the state -->
<button
class="menu-toggle"
on="tap:AMP.setState( { navMenuExpanded: ! navMenuExpanded } )"
[class]="'menu-toggle' + ( navMenuExpanded ? ' toggled-on' : '' )"
aria-expanded="false"
[aria-expanded]="navMenuExpanded ? 'true' : 'false'" >
<?php _e( 'Menu', 'example' ); ?>
</button>
53. #wpewebinar
Working with a JS Nav
<!-- 3. React to state changes -->
<nav
class="site-header-menu"
[class]="'site-header-menu' + ( navMenuExpanded ? ' toggled-on' : '' )"
aria-expanded="false"
[aria-expanded]="navMenuExpanded ? 'true' : 'false'" >
<?php wp_nav_menu( /* ... */ ); ?>
</nav>
54. #wpewebinar
Disable a script
function example_javascript_detection() {
if (function_exists( 'is_amp_endpoint' ) && is_amp_endpoint()) {
return; // or AMP replacement.
}
wp_enqueue_scripts('example_javascripts.js');
}
}
55. Embedding AMP
• AMP can be embedded anywhere
the them allows you to embed HTML
• AMP Components will render on AMP
and Non-AMP pages
• You’ll need to import the component
in a custom header
• You might need to “fix” minor issues
• This is still experimental
• Please go to https://amp.dev
• Please file bug reports on GitHub
61. #wpewebinar
Widgets
Theme features such as menu,
widgets, HTML snippets etc, can be
rendered as AMP on the fly.
Be aware that Widgets or HTML
snippets that break the AMP rules
will prevent the page from
rendering as AMP
75. #wpewebinar
Inquiring minds want to know.
Questions and Answers.
* Slides, recording and resources will be made available within
the next several days