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

Repository

https://github.com/ampirecity/AMPWPBasics2

What Will I Learn?

• Setting up back to home navigation logo on Header via AMP-Img;
• Setting up AMP Menu via AMP-Sidebar;
• Adding breadcrumbs to a custom AMP WordPress theme.

Requirements:

• A prepared WordPress version for AMP development on your preferred server;
• AMP for WordPress plugin;
• Basic CSS & HTML knowledge;
• Basic PHP knowledge.

Difficulty:

Beginner

Useful links:

• Prepared WordPress AMP version: https://github.com/ampirecity/AMPWPBasics1
• Part 1: Setting up WordPress for a custom AMP theme: http://ampire.city/beginner/wordpress-amp-custom-theme/
• AMProject: https://www.ampproject.org/docs/reference/components/amp-sidebar
• AMPbyExample: https://ampbyexample.com/components/amp-sidebar/

Pro tip: Start developing a webpage with navigation

There are many ways to start developing a website, and some are easier than others. Most of the projects in my professional career were designing rather than implementing, therefore I’ve worked with many different developers and seen many different approaches. The main mistake I’ve seen is the development of the webpage page by page, which results in a lot of mess in CSS.

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

This part is particulary simple, just wrap website‘s logotype with HTML <a> tag directing to your homepage url inside your header. The php code to generate home url is:

<?php echo esc_url( home_url( '/' ) ); ?>

Don‘t forget that in AMP website, amp-img tag is required instead of img one. 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>

Setting up AMP Menu via AMP-Sidebar

In order to navigate within the website you need to have pages to navigate on. It can be done by adding as many pages as you want on WordPress admin panel. Creating pages for AMP doesn‘t require any special treatment.

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.

Adding WordPress menu to a custom AMP theme

Now that we have created our main menu and added it to AMP Sidebar Menu, we can add it to our custom AMP theme by simply calling it out at header.php, which will output the code throughout the pages on the website.

<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

Now that we have our code, all is left is to activate the AMP-Sidebar. One of the good things about having AMP for WordPress plugin installed is that you don’t need to add any required AMP scripts, like in this case – amp-sidebar-0.1.js. The plugin will do it for you once it detects the sidebar in your code. Without the plugin this can be achieved by adding this code to your header:

<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.

With everything else in place, all is left is adding breadcrumbs to our custom AMP WordPress theme before we are done. Implementing breadcrumbs to WordPress doesn’t require anything extra in order for the website to be AMP-ready. There are no breadcrumbs installed in the base of WordPress, therefore you need to either install a plugin or write the code for it.

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:

The common practice to call out the breadcrumbs 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>' );
}
?>

 

..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