Creating a navigation menu in AMP ‘Reader’ mode…

By default there is no navigation menu when using the official AMP plugin in “Reader” mode. Follow the steps below to create a useful sidebar navigation menu.

Before you begin this tutorial we assume you have already installed and activated the official WordPress AMP plugin, and selected “Reader” mode. It’s important to note also that you should backup your files first, and any updates to the official AMP plugin will result in the loss/removal of the changes below.

Note also that the menu location of this hamburger menu will be titled “Primary”, you might need to assign your menu to that location.

For this tutorial it assumes you have access to your WordPress theme files via FTP or via your web host control panel.

Step 1: Copy the required reader mode template files

It’s important to not overwrite your core AMP plugin files, so we first of all make a copy of the required files. These copied template files overwrite the main plugin files. If changes were make to the core AMP plugin files directly all your hard work would be undone each time you update the plugin.

  1. Copy the following files from the amp plugin folder (yourwebsite.com/wp-content/plugins/amp/templates)
    1. html-start.php is where we need to call the amp-sidebar component
    2. header-bar.php: This file contains the code for the header area which viewers see on your website when in AMP reader mode.
  2. Create a folder titled “amp” and place it in your active themes root directory. (If using ampface the folder should be added to yourwebsite.com/wp-content/themes/ampface/amp)
  3. Paste the mentioned 2 files into the amp folder

You’ve now create the template override files which you can safely edit.

Step 2: Enqueue the amp-component sidebar

The best method of enquing the amp-component sidebar is to add the library via your themes functions.php file.

  1. Open your active themes functions.php file
  2. Add the following code at the end of that file
add_action('amp_post_template_data', 'xyz_amp_component_scripts');     function xyz_amp_component_scripts( $data ) {             $data['amp_component_scripts']['amp-sidebar'] = 'https://cdn.ampproject.org/v0/amp-sidebar-0.1.js';             return $data;     } 

You’ve now called the sidebar library, and ensured it’s called on AMP URLs only. Next we’ll add the hamburger menu to your theme, so we can toggle the sidebar.

Step 3: Adding the hamburger menu to your website

  1. Open the “html-bar.php” file from with the amp folder in your active themes root directly.
  2. Just before the “get( ‘post_canonical_link_url’ ); ?>” code (Possibly line 20) copy and paste the following code
<div class="headerNavMenu">
<div role="button" on="tap:sidebar1.toggle" tabindex="0" class="hamburger">☰</div>
<amp-sidebar id="sidebar1" layout="nodisplay" side="left">
 <div role="button" aria-label="close sidebar" on="tap:sidebar1.toggle" tabindex="0" class="close-sidebar">✕</div>
    <ul class="sidebar">	 
         <?php
		wp_nav_menu( array(
		'theme_location' => 'primary',
		'menu_class'     => 'primary-side-menu',

	) );
	?>
    </ul>
</amp-sidebar>
</div>

Next simply save that file.

Step 4: Add some styling

For this step we need to add some CSS styling to improve the look and appearance. Without styling it will look very basic. Open your active themes functions.php file and add the following before saving: (feel free to make any CSS modifications to suit your preference.


add_action( 'amp_post_template_css', 'xyz_amp_my_additional_css_styles' );
function xyz_amp_my_additional_css_styles( $amp_template ) {
        // only CSS here please...
        ?>

amp-sidebar{padding: 30px 20px 0 20px;
 }
amp-sidebar a{padding: 0 25px;
    font-size:18px;}
.menu-menu-prime-container ul,ul.primary-side-menu {
    list-style: none;    margin: 0 0 0 0 !important;
    padding: 0 20px 0 0px;
    font-size: 1.6em;
}

amp-sidebar ul > ul > li,amp-sidebar ul > li{
    padding: 6px 0;
    border-bottom: 1px solid #444;
}
amp-sidebar ul li.current-menu-parent,amp-sidebar ul > ul > li.current-menu-parent{
    padding: 0px 0;
    border-bottom: 0px solid #444;

}
     

Save button once you have added the above.

You have now created a custom reader mode template! Next see if you can add more features to your reader mode template using the same process as above.

Leave a Reply

Your email address will not be published.