Close sidebar
James Osborne
Blog, WordPress Tips

OceanWP – Making it AMP compatible with almost zero development work

ocean wp amp

For good reason one of the most popular WordPress theme based on total downloads is Ocean WP. This is the go to theme for many site owners, it looks great out of the box, it’s fast and is highly customisable. It’s also made in Ireland, just like me, and based in Limerick city, just like WP Engines Irish operation.

While Ocean WP is not fully AMP compatible by default following the guide below should allow you to use this theme while using AMP in transitional or standard mode using the official AMP plugin.

Firstly – the existing situation

Custom JavaScript is restricted in AMP, in the traditional sense anyway. This means that with many themes a JavaScript or jQuery based navigation menu won’t work by default. While there are workarounds such as using the amp-bind component or implementing JavaScript using amp-bind this isn’t easy for non developers. Ocean Press is not yet fully AMP compatible, so let’s get started using this theme in AMP without full theme support

Ocean WP with AMP – Identified issues

The usual JavaScript based suspects don’t work in AMP by default when using Ocean WP.

  • The JavaScript based mobile navigation menu (Hamburger menu)
  • The JavaScript based back to top button
  • The JavaScript based search box popup (on desktop only)

Notice: Depending on your configuration there may be additional aspects that don’t work, we’ll mention some possible features after this tutorial.

Creating a working Navigation menu in AMP

Follow the steps below to ensure you have a working navigation menu in AMP. As this theme is not AMP compatible the fix below uses the amp-sidebar component in the form of a plugin. It won’t use the native Ocean WP navigation menu on mobile.

Important notice: perform a backup of your site before making the changes below:

  1. Install and activate the AMP Sidebar Hamburger Menu plugin.
  2. Navigate to “Appearance > Menus”.
  3. Assign your existing primary menu to the “AMP sidebar menu” which should appear now that you’ve activated the plugin. Keep your existing menu assignments, no need to change anything else here.
  4. Navigate to “Appearances > Theme editor”.
  5. Providing you have the Ocean WP theme active you’ll notice it’s already selected in the top right drop down.
  6. Under the “Theme Files” section navigate to the “partials/mobile/mobile-icon.php” file and click on it to open it in the editor.
  7. Look for the following line of code (Line 87 at present version):
    <a href="#" class="mobile-menu" 
    aria-label="<?php _e( 'Mobile Menu', 'oceanwp' ); ?>">
    and replace it with the following:
    <a href="#" class="mobile-menu" 
    <?php echo do_shortcode('[jz-navbarattribute]'); ?>
    aria-label="<?php _e( 'Mobile Menu', 'oceanwp' ); ?>">
  8. Save the changes by pressing the “Update File” button below the editor
  9. Next you can visit any AMP URL on your site and check to confirm that the navigation menu is working as expected. How do you know if you’re on an AMP URL? Use this Chrome extension, or simply append ?amp to any of your site URLs in transitional mode. If you’re using AMP in standard mode all your site is fully AMP by default.
  10. Now that you’ve got a working AMP navigation menu lets move onto the next step.

Creating a working back to top button

  1. Install and activate the CSS Only Back to Top plugin.
  2. You should have a working back to top feature on your site now. Next is to limit this to your AMP URLs and style the button. Navigate to “Settings > CSS Back to Top”
  3. Set a preferred colour to match your active styling
  4. In the “Viewing Options” select “AMP Only”
  5. Done. That was easy. Check any AMP URL on your site to confirm it’s working as expected.

Creating a working search button

If you’re using the default settings with Ocean WP you may have noticed that on desktop there is a clickable search button. This won’t work in AMP by default. Follow the steps below to get a working popup search box.

  1. Install and activate this mini plugin (soon to be listed on the WordPress repository as a plugin)
  2. Navigate to “Appearances > Theme editor”.
  3. Providing you have the Ocean WP theme active you’ll notice it’s already selected in the top right drop down.
  4. Under the “Theme Files” section navigate to the “partials/mobile/mobile-icon.php” file and click on it to open it in the editor.
  5. Look for the following line of code (Line 1727 at present version):
    $items .= '<a href="#" class="site-search-toggle'.
    $class .'" aria-label="'. esc_attr( 'Search website', 'oceanwp' ) .'">';
    and replace it with the following:
    <a href="#" class="mobile-menu"
    <?php echo do_shortcode('[jz-navbarattribute]'); ?>
    aria-label="<?php _e( 'Mobile Menu', 'oceanwp' ); ?>">
  6. Save the changes by pressing the “Update File” button below the editor
  7. Now all that’s left to do it check. Access any AMP URL on your site and click on the search icon. Bear in mind by default the search box will only appear in desktop mode if you’re using the default Ocean WP configurations.

Wrapping up

You’re now ready to go transitional more or standard more AMP using Ocean WP. You’ve managed to get a working AMP navigation menu, back to top and search feature all working.

Depending on what plugins you’re using on your site some features may not work as expected in AMP, in particular if there is JavaScript output in the front end. If you encounter any such issues contact your plugin developer, check for AMP compatible alternatives, troubleshot and apply fixes where possible or use an AMP component as a replacement.


This website may use cookies, web beacons, tracking pixels, and other tracking technologies, including any other media form, media channel, mobile website, or mobile application.