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

1. #wpewebinar
Salvatore Denaro, Google
Genesis and AMP: Amp-le room to
build amazing digital experiences

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

4. #wpewebinar
Salvatore Denaro
Senior Technical Solutions Consultant
Google
● Has been writing code for 20+ years
● Has been tech leader for 10 years
● Makes an excellent espresso

5. I am not officially
speaking for Google
today

6. #wpewebinar
Google and WP Engine
Partnership

7. #wpewebinar
AMP for WordPress : Comparing FCP Scores

8. We know what
makes pages fast

13. AMP gives you these
for Free

14. You get these by
installing the plugin.

15. #wpewebinar
AMP HTML AMP JS AMP Cache

16. #wpewebinar

17. #wpewebinar
How AMP works with Genesis

18. AMP for
WordPress

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

20. #wpewebinar
Simplified Solution
WordPress
AMP
Plugin

21. #wpewebinar

22. #wpewebinar
<img>
CSS styles
Fonts
Custom JS
<amp-img>
Inline CSS
Inline font-face
Custom JS
removed

23. #wpewebinar
Automatic conversion for generic tags
AMPnon-AMP

24. Widgets, embeds, comments, pages...

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.

27. #wpewebinar
AMP Plugin Admin
AMP Plugin
section
Transitional AMP
mode

28. #wpewebinar
Reader mode Transitional mode Standard AMP
mode

29. #wpewebinar

30. #wpewebinar
Validation workflow

31. #wpewebinar
Validation workflow

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

34. #wpewebinar
Example
Add a block

35. #wpewebinar
Example
Edit block

36. #wpewebinar
Example
Configure

37. #wpewebinar
Example
Did I add an AMP block?

38. #wpewebinar
Example
<amp-twitter
data-tweetid="1107837091860213760"
layout="responsive" width="600"
height="480">
</amp-twitter>

39. #wpewebinar
Example - Non-AMP

40. #wpewebinar
How to best use AMP with
your Genesis theme

41. #wpewebinar
Quick Roadmap
• Install the plugin
• Validate!
• Fix it

42. #wpewebinar
AMP Debugging Workflow

43. #wpewebinar
Bulk Validate from CLI
wp amp validate-site
wp amp reset-site-validation

45. #wpewebinar

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.

47. #wpewebinar
Disable the customizer
add_filter( 'amp_customizer_is_enabled', '__return_false' );
(and use a child theme)

48. #wpewebinar
Save this snippet
<?php if ( function_exists( 'is_amp_endpoint' ) && is_amp_endpoint() ) : ?>
<?php else : ?>
<?php endif; ?>

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

56. #wpewebinar
Embedding AMP

57. #wpewebinar
When and how to use
AMP-first design

58. #wpewebinar
Pick an AMP comptable theme
One of these is AMP,
one is HTML.

59. #wpewebinar
AMP and HTML from the same Post
setka

60. #wpewebinar
AMP and HTML from the same Post
AMP
HTML

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

62. #wpewebinar
Plugins
● AMP compatible forms
● Works with blocks

63. Plugins
● Used throughout this
deck
● AMP compatible
because it builds on
Gutenberg

64. Plugins

65. #wpewebinar
What are AMP stories?

66. #wpewebinar
AMP Stories
● Create beautiful and engaging content
● Sharable and linkable on the open web
● Fast loading times
● Immersive

67. #wpewebinar
Examples

68. #wpewebinar
Examples

69. #wpewebinar
AMP Stories Editor

70. #wpewebinar
Example

71. #wpewebinar

72. #wpewebinar

73. #wpewebinar
AMP Stories
• Stories are surfaced via Search, News
and Images
• Best used “To Tell a Story”
• Call to action

74. #wpewebinar
AMP Story Ads

75. #wpewebinar
Inquiring minds want to know.
Questions and Answers.
* Slides, recording and resources will be made available within
the next several days

76. #wpewebinar
Resources
Google’s Official Pages
● https://web.dev
● https://amp.dev
Github Projects
● https://github.com/ampproject
● https://github.com/ampproject/amp-wp
The Plugin
● https://wordpress.org/plugins/amp-wp/
AMP Code Lab
● https://codelabs.developers.google.com/codelabs/accelerated-mobile-pages-foundations/

77. #wpewebinar
Thank You.