AMP WordPress Setup Guide – How to Run Native AMP

This guide is for anyone wishing to jump headfirst into accelerated mobile pages and convert your WordPress to Native AMP. That’s what I did and I don’t regret it one bit. Like anything in life, if you aren’t committed then it’s hard to get the rewards. You can’t have one foot in the past and the other in the future. Just let go of your fear and make the most of the opportunity that AMP presents.

AMP has a lot to offer anyone wanting to increase website metrics, such as speed and organic traffic. The problem has been, unlike most plugins, AMP isn’t a turnkey solution. While the original version – what is now called Classic AMP – was relatively easy to setup, it was basically an unattractive copy of your regular themed posts. This was all in the name of speed, and rightly so because the Internet has been eating too many cakes. It got fat and needs to go on a diet. Step forward accelerated mobile pages to the rescue.


Quick Link to All Headings

    1. There are Currently Three Versions of AMP
    2. People Started to Complain About AMP
    3. Most Professional Websites are Easy to Navigate
    4. WordPress Themes that Work with AMP
    5. Tips for Turning on Native AMP
    6. Problems You Might Find with Native AMP
    7. Benefits of Using Native AMP
    8. Don’t get Locked out of Your Site
    9. How to Access WordPress with Admin Bar Disabled
    10. How to Rebuild the Mobile Menu
    11. Repairing the Mobile Menu
    12. Building Simple Contact Forms in AMP
    13. Forwarding Contact Form Details Via Email
    14. Install AMP Footer
    15. Manually Installing Code for Sharing Icons
    16. Google AMP Analytics
    17. Google AdSense Code
    18. Facebook Pixel Tracking Code (Non-JavaScript Version)
    19. Conclusion

There are Currently Three Versions of AMP

With the current plugin release, things have gotten much better, but more complex in the process. There are now three versions of AMP:

  • Native – your full website runs on AMP first – and is fully themed.
  • Transitional or Paired – your website has a normal version and a themed AMP version of the pages/posts you desire.
  • Reader or Classic – you website is as normal, including basic AMP pages/posts.

It’s also worth pointing out that while Google hosts verified AMP on its AMP cache. This is only when users find your page from Google search. If they click a link from anywhere else, they visit your website directly and don’t get all the speed benefits. This isn’t to say your website is going to be any slower than without AMP, presuming it is all set up correctly. Your site should still be quicker, but it will be only A fast instead of A+.

 

People Started to Complain About AMP

Initially there was a lot of complaints about AMP, but in truth most of that is because people haven’t invested the time into AMP to make if work for them. Nowadays nobody wants to put the effort in – we live in a plug-and-play world. Other people are meant to do the hard work for us!

When the AMP plugins is installed, it disables JavaScript, which causes forms and icons to stop working; actually it runs its own version of JavaScript that is only served directly from the AMP content delivery network.

There have been a few publishers who’ve conducted their own study into AMP and found that it actually increases most metrics if it’s fully integrated into their platform, which usually involves some degree of hand coding.

It’s this loss of functionality that puts people off, either for practical reasons or they are fearful about changing their website design. In reality though, you will be worrying about nothing once you get stuck in and accept any changes for the better. You can use it as a chance to simplify your website.

 

Most Professional Websites are Easy to Navigate

Think of it like this. Most professional sites from the big tech companies are relatively plain. Why? Well they don’t want to confuse people with pointless information or gimmicks. They also want to increase site speed wherever possible. 1990s style flashing lights aren’t cool anymore. Any distraction is bad for business. You wan’t people to concentrate on their next purchase and not how to navigate your clumsy site.

Most of the theme builders with endless features aren’t designed for practicality. They include all the extras to wow us and say ‘look what we have to offer,’ regardless of the fact that we don’t even need such features. A clean and simple website design doesn’t have to be boring or ugly.

Therefore, don’t get hung up on lost features. As long as your contact form and hamburger menu work they are the important things.

 

WordPress Themes that Work with AMP

The WordPress community is slowly catching up to AMP and there are some themes that work out of the box. Most of the Automattic themes such as 2015, 2017, etc, all work fine. You don’t need to tweak the menu.

Check out this resource for more information:

 

Tips for Turning on Native AMP

Initially I was reluctant to go full in with AMP and had been toying with the idea of Native AMP, but only for my posts. That way all my website would still work as usual. The main issue that I found here was, especially if you run adverts and analytics, you need two versions of each. It’s a recipe for tripping over your own shoelaces. 

After watching this video at least fifteen times, I actually made some progress. From my trepidation on starting out, I was super excited to get everything working in the end. As the saying goes, it’s easy when you know how! 

As there isn’t even a fraction of the information there is for regular WordPress and normal HTML websites, compared to AMP and AMP for WordPress, be careful you don’t make the same error as me. 

I went to the AMP website, where they tell you to stick various scripts in your header. What they don’t tell you is that if you’re using WordPress then the AMP plugin actually does this for you so only use the scripts if you’re hand coding a website.

The AMP components, such as social share, do work in your WordPress. Firstly you should make a child theme and then make a copy of your site using a staging plugin. This way you can experiment on your practice site and only release the upgrades when you’re absolutely sure things are working sweet.

My plugins of choice for this were:

  • Child Theme Configurator – it’s really a great plugin to use and there are already guides on how to use it.
  • WP Staging – another really easy to use plugin to make a carbon copy of your site.

So to clarify, in going fully AMP be prepared to sacrifice some initial pain and hassle, but in return for more speed and less plugins. You might run into various issues with Google Search Console flagging up issues. It’s crazy that one site of mine got flagged for having images to small, yet on another site with the same size images I still haven’t had an error notification. For AMP they should be 1200 pixels wide minimum for your featured image. 

I’m presuming you will be using Yoast SEO, as it’s the most popular plugin of its kind. You only need the Yoast Glue addon plugin for classic AMP. My preferred solution is to use the following:

Wherever possible when using plugins, bear in mind that it’s usually best to go with the original creators. The problem is when you’re first out with something you might run into more problems. This means that the first batch of ratings might be one star and when the plugin is improved upon, it never seems to catch up ratings wise. Yet ironically the imitator plugins who can learn from the first plugin’s mistakes, they tend to have better ratings.

All I’m saying is don’t just install/delete a plugin on ratings alone. Actually test it out yourself. You’ll often be surprised.

 

Problems You Might Find with Native AMP

These are the major issues that I had when I turned on Native AMP on every page.

  1. Hamburger menu icon stopped working.
  2. All contact forms stopped working.
  3. Form email forwarding plugin stopped working.
  4. The footer follow widget broke.
  5. Sharing icons had to be installed manually.
  6. Google Analytics needs to be changed to Google AMP analytics.
  7. Google AdSense code needs changing to AMP version.
  8. Facebook pixel also has slightly different AMP code.

Most of these issues stem from the fact that JavaScript is stripped out of the code.

 

Benefits of Using Native AMP

While it’s quite hard to copy code, it’s even harder when you’re combining AMP and WordPress. There isn’t a lot of information and most of the search queries returned will be useless, as they include JavaScript.

At least once you implement the solutions that I show you, it will enable you to delete at least five plugins.

  • Form plugins.
  • Email form helper plugins.
  • Sharing and following plugins.
  • Various other plugins that won’t work with AMP.

Don’t Get Locked Out of Your Site!

You will get a feel for what you can do using the Theme Editor built into WordPress. It’s okay for most things, however, when you need to mess on with your functions.php file, it can be frustrating when you get locked out of your website from dodgy code. I usually either reinstall a backup or contact my Bluehost live chat for support. They can delete you .htaccess file for you, for example, or restore your site to a previous time.

To remedy this it’s advisable to use the following:

  • UpdraftPlus to backup your website before working on any code.
  • WP-Optimize – works well with UpdraftPlus – they’re from the same developer.

The correct way to prevent any issues is to only edit your files via your hosting provider dashboard using the File Manager, sometimes called your cPanel File Manager. 

Only use WordPress Theme Editor for files you know won’t cause any conflicts.

Another little tip is that when you copy code from the Internet, paste the code into Notepad to strip any formatting or fancy fonts from the code. Sometimes speech marks can turn out funny when copying and pasting. This small issue will wreck your code and it simply won’t work.

Also it’s advisable to paste the code into a PHP checker like this one:

Alternatively, if it’s Javascript you can use the following:

Only when you are satisfied that the code is safe should you paste it into your file via cPanel File Manager.

 

How to Access WordPress with Admin Bar Disabled

In the AMP settings menu, in order to keep under the 50 kb limit that AMP sets, there is a setting to turn off the standard WordPress Admin bar. The reason being, the admin bar requires an extra style sheet.

When you turn the admin bar off, your website will look like a standard web page and you might not be able to get access. The easiest way for me was to scroll down the page and you might be lucky enough to have an ‘edit’ link to click on. Once you click on this you’ll be able to use it as a shortcut instead of the admin bar access that you are most familiar with.

Alternatively, just use the other standard method of typing your website URL with /wp-admin on the end. For example:

https://chickenandtheegg.com/wp-admin

 

How to Rebuild the Mobile Menu

There are two solutions that I have found to make a working mobile menu. Firstly I copied the NavBar code from the AMP Start website. It wasn’t my coding skill that won the day, but my patience. Trial and error. Delete. Reinstate. Eventually I had a working navbar that was styled with some CSS.

Although that worked, after watching the video above with Jessica and Ben I felt as though I was cheating slightly. Rather than install a ready-made menu, I wanted to repair my own existing menu. In truth, I didn’t quite achieve that, but still learned a lot in the process.

Eventually this is what I came up with, after tweaking the example on AMP-WP Toggling Hamburger Menus. You will need to place this code in the header section of your header.php file. Then place the styles in your added/custom CSS section on WordPress or any other style sheet, if you have a child theme, perhaps.

<!– 1. Define the state –>
<amp-state id=”navMenuExpanded”>
<script type=”application/json”>false</script>
</amp-state>

<!– 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'”

>

<div class=”icon-closed”>☰</div>
<div class=”icon-open”>✕</div>

</button>

<!– 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>

 

/* place this code in your custom CSS files */

.menu-top-nav-container{
display: none;
color: #000000;
}

.toggled-on .menu-top-nav-container{
position: absolute;
padding-top: 12em;
width: 100%;
height: 100%;
height: 100vh;
z-index: 99997;
background-color:#000000;
transform: translateY(-20%);
text-align: center;
display: block;
}

.menu-toggle{
z-index: 99999;
position: absolute;
top: 15px;
right: 0;
font-size: 1.5rem;
line-height: 1.5rem;
border-radius: 50%;
padding: 10px;
outline-color: #000000;
}

.header{
z-index: 99998;
}

@media screen and (max-width: 1200px){
.main-nav{
display: none;
}
}

@media screen and (min-width: 1200px){
.menu-toggle{
display: none;
}
}

.icon-open{
display: none;
}

.toggled-on .icon-open{
display: block;
}

.toggled-on .icon-closed{
display: none;
}

 

* Please bear in mind that your classes will have different names, but the principle will be the same. 

** For simplicity I had my responsive break point set at 1200 pixels, but you might want one for mobile and then tablet instead, which is more inline with tradition.

*** If you’re unsure of the class something belongs to, just use developer tools in Chrome and you can right click on items to inspect them. Once you get familiar, it isn’t hard at all.

 

Repairing the Mobile Menu

This option is the easiest solution if you can make it work. Essentially you have to add a few lines of code to your child theme’s functions.php file. I use Themify Ultra on all my themes and when JavaScript is stripped from the theme, Themify implements a fallback solution and displays an ordinary menu. This is the right thing to do because they don’t want to leave someone without a means of navigation. 

Ironically, however, it actually makes it harder to reinstate the menu the easy way. I’ve emailed them and will update you with any news.

On the other hand, I tried Generate Press free version, as it’s a super lightweight theme and is very popular with speed-freaks, or speed geeks, who want the fastest site possible. I’ve only used it on my experimental site, but the results are good. On GT Metrix it only had 6 network requests as opposed to 13 for the TwentyFifteen theme. Not bad!

Regarding the mobile menu, with the official WordPress AMP plugin turned on, Generate Press doesn’t use a fallback solution and the menu button is still visible, but doesn’t do anything when pressed. #Broken. Bad for site visitors, but great for people who need to repair the menu. All you need is the following code installed in functions.php and you’re good to go.

add_theme_support(
‘amp’,
array(
‘nav_menu_toggle’ => array(
‘nav_container_id’ => ‘site-navigation’,
‘nav_container_toggle_class’ => ‘toggled’,
‘menu_button_id’ => ‘site-navigation’,
‘menu_button_toggle_class’ => ‘toggled’,
),
)
);

 

If you can’t find the menu button id, all you need to do is press F12 in Chrome to get into developer tools. Then right click on the menu button (hamburger icon) for mobile menu and scroll down to Copy. Then Copy XPath and you will have the ID for the button. Simple. I got the code above from amp-wp.org website.

After changing the button toggle class and IDs it worked perfectly with Generate Press, but as mentioned I’m still working on a solution for Themify. 

This method is definitely a lot cleaner and with less code – if you can get it to work.

 

Building Simple Contact Forms in AMP

If you’re partially using Native AMP, then you can get away with keeping your original forms, but as mentioned earlier, you don’t want a website that is running two different systems. 

As we’re running AMP on every page, we need to delete our form plugins and get stuck in with the coding side of life. 

Nothing to panic about, now I’m here to help. 🙂

        <div class=”wordpress-form”><form method=”post” target=”_top”><fieldset><input name=”name” required=”” type=”text” placeholder=”Name” /><br /><input name=”email” required=”” type=”email” placeholder=”Email” /><br /><textarea name=”message” placeholder=”Message…”></textarea><br /><input type=”submit” value=”Submit” /><br /><input id=”GDPR” name=”GDPR” required=”” type=”checkbox” value=”GDPR” /><br /><label for=”GDPR”>I consent to this website storing my submitted information.</label></fieldset></form></div>

* Please see my contact page for the finished look.

**My website has been converted into a Progressive Web App so the contact page might seem smaller than normal, but yours should look more like a regular contact form if you use the above code.

 

Forwarding Contact Form Details Via Email

Due to how AMP handles cors headers, it is quite simple in theory, but tricky in principle to get set up. I got locked out of my site editing my .htaccess on numerous occasions. Hopefully now you don’t have to!

Thanks to a PHP legend on Stack Exchange, I finally found the solution that I’d searched high and low for.

<?php
if(!empty($_POST)){
$name=$_POST[‘name’];
$email = $_POST[’email’];
$message = $_POST[‘message’];
$formcontent=” From: $name \n Email: $email \n Message: $message”;
$recipient = “admin@sonicseo.co.uk“;
$subject = $enquiry;
$mailheader = “From: $email \r\n”;
mail($recipient, $subject, $formcontent, $mailheader) or die(“Error!”);

$domain_url = (isset($_SERVER[‘HTTPS’]) ? “https” : “http”) . “://$_SERVER[HTTP_HOST]”;
header(“Content-type: application/json”);
header(“Access-Control-Allow-Credentials: true”);
header(“Access-Control-Allow-Origin: “. str_replace(‘.’, ‘-‘,’https://sonicseo.co.uk‘) .”.cdn.ampproject.org”);
header(“AMP-Access-Control-Allow-Source-Origin: ” . $domain_url);
header(“Access-Control-Expose-Headers: AMP-Access-Control-Allow-Source-Origin”);
header(“AMP-Redirect-To: https://sonicseo.co.uk“);
header(“Access-Control-Expose-Headers: AMP-Redirect-To, AMP-Access-Control-Allow-Source-Origin”);
exit; echo json_encode(array(‘name’ => $name));
}

* All you need to do is change your email and website details in the two locations above.

 

Install AMP Footer

You can grab the AMP follow icons from AMP Start web page.

My HTML and CSS is as follows. Bear in mind AMP uses SVG icons and although the code looks huge, it’s actually very small as they are vector icons. It just looks bulky and complicated.

This code goes in your footer.php file and the CSS goes in your theme extra CSS or style sheet.

<footer class=”ampstart-footer flex flex-column items-center p3″>
<ul class=”ampstart-social-follow list-reset flex justify-around items-center flex-wrap m0 mb4″>
<li class=”mr2″>
<a href=”https://www.facebook.com/Sonic-SEO-2147914105425859/” class=”inline-block” target=”_blank” aria-label=”Link to Facebook”>
<svg xmlns=”http://www.w3.org/2000/svg” fill=”#000000″ width=”24″ height=”23.6″ viewbox=”0 0 56 55″>
<title>Facebook</title>
<path d=”M47.5 43c0 1.2-.9 2.1-2.1 2.1h-10V30h5.1l.8-5.9h-5.9v-3.7c0-1.7.5-2.9 3-2.9h3.1v-5.3c-.6 0-2.4-.2-4.6-.2-4.5 0-7.5 2.7-7.5 7.8v4.3h-5.1V30h5.1v15.1H10.7c-1.2 0-2.2-.9-2.2-2.1V8.3c0-1.2 1-2.2 2.2-2.2h34.7c1.2 0 2.1 1 2.1 2.2V43″ class=”ampstart-icon ampstart-icon-fb”></path>
 </svg>
 </a>
 </li>
 </ul>
 </footer>

 .ul{
color: #fff;
}

.mr2{
display: inline-block;
padding-right: 30px;
}

.ampstart-footer {
background-color: #e5e5e5;
text-align: center;
padding-top: 20px;
}

 

Manually Installing Code for Sharing Icons

This HTML needs to go in your single.php file, presuming you want to use the icons for sharing posts. Otherwise, just place it wherever you want the icons to appear.

It’s really simple to style the icons, too. You can give them a class such as .rounded or .square and then either have them square or round, large or small. It’s entirely up to you.

<amp-social-share type=”email” height=”36″ width=”36″ class=”rounded”></amp-social-share>
<amp-social-share type=”facebook” height=”36″ width=”36″ class=”rounded”
data-param-app_id=”267380340856553″></amp-social-share>
<amp-social-share type=”pinterest” height=”36″ width=”36″ class=”rounded”></amp-social-share>
<amp-social-share type=”tumblr” height=”36″ width=”36″ class=”rounded”></amp-social-share>
<amp-social-share type=”twitter” height=”36″ width=”36″ class=”rounded”></amp-social-share>
<amp-social-share type=”whatsapp” height=”36″ width=”36″ class=”rounded”></amp-social-share>
<amp-social-share type=”line” height=”36″ width=”36″ class=”rounded”></amp-social-share>

//Wide Icons

@media screen and (min-width:1200px){
.rounded{
display: inline-block;
padding-left: 40px;
padding-right: 40px;
}
}

@media screen and (max-width: 1200px){
.rounded{
display: inline-block;
padding-left: 20px;
padding-right: 20px;
}
}

// Round Icons

.rounded {
border-radius: 50%;
margin-bottom: 50px;
margin-right: 10px;
}

* For standard square icons just use the HTML with no CSS.

 

Google AMP Analytics

Place this code in your header.php file. Replace my tracking number with yours.

        <amp-analytics type=”gtag” data-credentials=”include”>
        <script type=”application/json”>
        {
        “vars” : {
        “gtag_id”: “UA-12285071-6“,
        “config” : {
        “UA-12285071-6“: { “groups”: “default” }
                        }
                }
        }
        </script>
        </amp-analytics>

 

Google AdSense Code

There are two parts to this, if you go by Google AdSense Auto Ads for AMP advice. However, you don’t need to place the first script in the header because, as previously mentioned, the AMP plugin does that for you.

You only have to place the second part in your child theme’s header.php file.

<amp-auto-ads type=”adsense”
data-ad-client=”ca-pub-5045225331657990“>
</amp-auto-ads>

 

Facebook Pixel Tracking Code (Non-JavaScript Version)

All you have to do is place this code, with your own pixel number in place of mine, in your body section of header.php file.

<!– Facebook Pixel Analytics tracking –>
<amp-analytics type=”facebookpixel” id=”facebook-pixel”>
<script type=”application/json”>
{
“vars”: {
“pixelId”: “267380340856553
},
“triggers”: {
“trackPageview”: {
“on”: “visible”,
“request”: “pageview”
}
}
}
</script>
</amp-analytics>
<!– End Facebook Pixel Analytics example –>

This updated option below uses less code – plus it was created by Malte Ubl the Godfather of AMP!

<!– Facebook Pixel Analytics tracking –>
<amp-pixel src=”https://www.facebook.com/tr?id=267380340856553&ev=PageView&noscript=1″
layout=”nodisplay”></amp-pixel>
<!– End Facebook Pixel Analytics example –>

*Of course, change the red code out to your own tracking pixel numerical ID.

 

Conclusion

Now that you’ve got through that lot, you should have a perfectly good AMP website that is lightning quick. 

You can verify your hard work using the Google Chrome AMP validator addon. It uses a traffic light system to quickly tell you if your code is okay or needs adjusting.

One last check I’d do is, even though Native AMP errors are automatically handled by the plugin, it’s still a good idea to accept all the new errors. That clears them from the system and you know you’re all caught up.

Good luck getting your site AMP’d up. If you have any further questions, please get in touch either in the comments or hit me up on my email – admin@sonicseo.co.uk.

If you liked this article, please give it a quick like and share – it would be greatly appreciated.