Learning AMP Wordpress #2: Setting up Menu Sidebar and Breadcrumbs

Image for post
Image for post
Original photo by Goh Rhy Yan on Unsplash

Repository

What Will I Learn?

Requirements:

Difficulty:

Useful links:

Pro tip: Start developing a webpage with navigation

What I prefer is LOW to HIGH fidelity development, or to make it more precise, from abstract/universal to specific parts of the website. For such a development technique, setting up the navigation first, had proven to be very handy. In this tutorial, we will learn how to implement that, let’s start with the simplest.

Setting up home navigation logo on header

="<?php echo esc_url( home_url( '/' ) ); ?

Don‘t forget that in AMP website, amp-img tag is required instead of imgone. Everything combined, a home button on logotype can be achieved with a simple code like this:

<a href="<?php echo esc_url( home_url( '/' ) ); ?>">
<amp-img class="home-button" src="<?php bloginfo('stylesheet_directory') ?>/images/safari-logo.png" width="150" height="70" alt="safari.lt logotype"></amp-img>
</a>
Image for post
Image for post

Setting up AMP Menu via AMP-Sidebar

Image for post
Image for post
Image for post
Image for post

Before setting up a menu on Wordpress for your custom AMP theme, it is required to register it first. In my case, I want to register two different locations for menus: AMP Sidebar Menu for primary navigation; AMP Footer menu for the future development. It can be achieved on your functions.php with these few lines:

// Register Wordpress menus
function register_my_menus() {
register_nav_menus(
array(
'amp-footer-menu' => __( 'AMP Footer Menu' ),
'amp-sidebar-menu' => __( 'AMP Sidebar Menu' )
)
);
}
add_action( 'init', 'register_my_menus' );

After that, “Menus” option will show-up in “Appearance“ tab on Wordpress admin panel, where you can create a menu and allocate it to the positions, we just created in our functions.php.

Image for post
Image for post

Adding Wordpress menu to a custom AMP theme

<amp-sidebar id="sidebar" layout="nodisplay" side="right">
<?php wp_nav_menu(array('theme_location' => 'amp-sidebar-menu', 'container_class' => 'sidebar')); ?>
</amp-sidebar>

As you can see layout=”nodisplay” indicates that the sidebar is hidden by the default, therefore you need a button to display it. This can be achieved by adding on=’tap:sidebar.toggle’ to any element to open or close the sidebar. If it is required for an element only to open or close the sidebar, specifically, add .open or .close instead of .toggle.
So far, the whole code with the sidebar and the buttons to open/close it, together with our Wordpress menu and back-to-home logo, should look something like this:

<header>
<div class="amp-logo">
<a href="<?php echo esc_url( home_url( '/' ) ); ?>">
<amp-img class="home-button" src="<?php bloginfo('stylesheet_directory') ?>/images/safari-logo.png" width="150" height="70" alt="safari.lt logotype"></amp-img>
</a>
</div>
<div role="button" on="tap:sidebar.toggle" tabindex="0" class="hamburger">
<span></span>
<span></span>
<span></span>
</div>
</header>
<amp-sidebar id="sidebar" layout="nodisplay" side="right">
<div role="button" aria-label="close sidebar" on="tap:sidebar.toggle" tabindex="0" class="close-sidebar">✕</div>
<?php wp_nav_menu(array('theme_location' => 'amp-sidebar-menu', 'container_class' => 'sidebar')); ?>
</amp-sidebar>

Activating AMP Sidebar for your Custom Theme

<script async custom-element="amp-sidebar" src="https://cdn.ampproject.org/v0/amp-sidebar-0.1.js"></script>

Adding breadcrumbs to a custom AMP Wordpress theme.

Since I use Yoast SEO plugin on every website I manage, I use it to create breadcrumbs for the website as well. This can be done in simple two steps:

Image for post
Image for post

First, we need to activate breadcrumbs on Yoast SEO plugin.

Image for post
Image for post

Second, we need to call out the breadcrumbs in a place where we want them to be. The common practice is below the header, above the content, thus at the end of our header.php.

<div class="content-wrapper container">
<?php
if ( function_exists('yoast_breadcrumb') ) {
yoast_breadcrumb( '<p id="breadcrumbs">','</p>' );
}
?>
Image for post
Image for post

..and we are done! Don’t forget to close. content-wrapper on footer.php 😉

Originally posted on 4/1/2019
Versions:
Wordpress 5.1
AMP 1.02

Image for post
Image for post

Travel Blogger, Web Designer & AMP Developer | Travel & History Journal: https://www.ctdots.eu | AMP Development & Web Design Tutorials: https://ampire.city

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store