Navigation Menu

Skip to content

Instantly share code, notes, and snippets.

@westonruter
Last active May 9, 2022 16:35
Show Gist options
  • Star 4 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save westonruter/b22cfae13f0862d5b9716c776c60f882 to your computer and use it in GitHub Desktop.
Save westonruter/b22cfae13f0862d5b9716c776c60f882 to your computer and use it in GitHub Desktop.
Basic plugin which adds a nav menu to Reader mode templates in the AMP plugin. When in Reader mode, upon activation a new “AMP Reader Sidebar” nav menu location is available for assigning the desired nav menu. Temporary until closed: https://github.com/ampproject/amp-wp/issues/2044
<?php
/**
* Plugin Name: AMP Reader Nav Menu
*
* @package AMP_Reader_Nav_Menu
* @author Weston Ruter, Google
* @license GPL-2.0-or-later
* @copyright 2019 Google Inc.
*
* @wordpress-plugin
* Plugin Name: AMP Reader Nav Menu
* Description: Add nav menu for Reader mode templates. If in Reader mode, upon activation you'll see a new nav menu location to which you can <a href="nav-menus.php">assign the desired nav menu</a>.
* Plugin URI: https://gist.github.com/westonruter/b22cfae13f0862d5b9716c776c60f882
* Version: 0.1.1
* Author: Weston Ruter, Google
* Author URI: https://weston.ruter.net/
* License: GNU General Public License v2 (or later)
* License URI: http://www.gnu.org/licenses/gpl-2.0.html
* Gist Plugin URI: https://gist.github.com/westonruter/b22cfae13f0862d5b9716c776c60f882
*/
namespace AMP_Reader_Nav_Menu;
const NAV_MENU_LOCATION = 'amp_reader_sidebar';
// Register the nav menu location if not in Standard/Transitional modes.
add_action(
'init',
function() {
if ( ! current_theme_supports( 'amp' ) ) {
register_nav_menu( NAV_MENU_LOCATION, __( 'AMP Reader Sidebar', 'amp-reader-nav-menu' ) );
}
}
);
add_action(
'amp_post_template_css',
function () {
printf(
'
#toggleNavMenu { font-size: 22px; color: white; position: absolute; top: .5em; %1$s: -15px; padding: 0 30px; background: none; border: none; }
.amp-site-title { position:relative; %1$s: 30px; }
#navMenu { padding: 1em; }
#navMenu li { display: block; }
',
is_rtl() ? 'right' : 'left'
);
}
);
add_filter(
'amp_post_template_file',
function ( $template_file ) {
if ( basename( $template_file ) === 'header-bar.php' ) {
$template_file = __DIR__ . '/header-bar.php';
}
return $template_file;
}
);
add_filter(
'amp_post_template_data',
function( $data ) {
$data['amp_component_scripts'] = array_merge(
$data['amp_component_scripts'],
array(
'amp-sidebar' => true,
)
);
return $data;
}
);
<?php
/**
* Header bar template part.
*
* This is a forked version of the header-bar.php in the AMP plugin.
*
* @link https://github.com/ampproject/amp-wp/blob/e63d2c3034d079f1a1b5bb2f0a2d1e0a221cadb9/templates/header-bar.php
* @package AMP_Reader_Nav_Menu
*/
namespace AMP_Reader_Nav_Menu;
/**
* Context.
*
* @var \AMP_Post_Template $this
*/
?>
<header id="top" class="amp-wp-header">
<div>
<?php if ( has_nav_menu( NAV_MENU_LOCATION ) ) : ?>
<button id="toggleNavMenu" type="button" on="tap:navMenu.open" aria-label="<?php esc_html__( 'Open nav menu', 'amp-reader-nav-menu' ); ?>">&#9776;</button>
<?php endif; ?>
<a href="<?php echo esc_url( $this->get( 'home_url' ) ); ?>">
<?php $site_icon_url = $this->get( 'site_icon_url' ); ?>
<?php if ( $site_icon_url ) : ?>
<amp-img src="<?php echo esc_url( $site_icon_url ); ?>" width="32" height="32" class="amp-wp-site-icon"></amp-img>
<?php endif; ?>
<span class="amp-site-title">
<?php echo esc_html( wptexturize( $this->get( 'blog_name' ) ) ); ?>
</span>
</a>
<?php $canonical_link_url = $this->get( 'post_canonical_link_url' ); ?>
<?php if ( $canonical_link_url ) : ?>
<?php $canonical_link_text = $this->get( 'post_canonical_link_text' ); ?>
<a class="amp-wp-canonical-link" href="<?php echo esc_url( $canonical_link_url ); ?>">
<?php echo esc_html( $canonical_link_text ); ?>
</a>
<?php endif; ?>
</div>
</header>
<?php if ( has_nav_menu( NAV_MENU_LOCATION ) ) : ?>
<?php
printf(
'<amp-sidebar id="navMenu" layout="nodisplay" side="%s">%s</amp-sidebar>',
esc_attr( is_rtl() ? 'right' : 'left' ),
wp_nav_menu(
[
'theme_location' => NAV_MENU_LOCATION,
'echo' => false,
'depth' => 1,
]
)
);
?>
<?php endif; ?>
@peppolone
Copy link

i think you have to change
'location' => NAV_MENU_LOCATION,
with
'theme_location' => NAV_MENU_LOCATION,

@westonruter
Copy link
Author

@peppolone Yes, I think you are right. Updated. Thanks.

@westonruter
Copy link
Author

@gydoar
Copy link

gydoar commented May 9, 2022

Hey @westonruter thank you for this solution, it worked perfectly in my project.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment