Adding a menu to AMP header

The AMP plugin has a default template defined in the plugin’s templates directory. While most customizations can be done with existing hooks and filters, you may want to create your own template file. The site header in the default template includes only the site name, so we’ll put a new header template in our theme which includes a menu. We’ll also convert this to a mobile menu on smaller screens.

The first function registers a new menu location. Go to Appearance > Menus and add a menu to the “AMP Header” location.

The second function uses the amp_post_template_file filter to load a separate header-bar.php file, one in our theme.

The third function registers additional CSS for styling the menu. You’ll want to customize this to match your site’s styling.

Finally, you’ll see the header-bar.php file, which contains our custom header template.

<?php
/**
* Register AMP Menu
*
*/
function ea_register_amp_menu() {
register_nav_menu( 'amp-header', 'AMP Header' );
}
add_action( 'after_setup_theme', 'ea_register_amp_menu' );
/**
* Load header file from our theme
*
*/
function ea_amp_header( $file, $type, $post ) {
if( 'header-bar' == $type ) {
$file = get_stylesheet_directory() . '/amp-templates/header-bar.php';
}
return $file;
}
add_filter( 'amp_post_template_file', 'ea_amp_header', 10, 3 );
/**
* Header CSS
*
*/
function ea_amp_header_css() {
// only CSS here please...
?>
.amp-wp-title-bar {
background: #3daad4;
height: 68px;
}
.amp-wp-title-bar a {
color: #fff;
text-decoration: none;
}
.amp-wp-title-bar a.logo {
height: 68px;
line-height: 68px;
}
.amp-wp-title-bar .nav-header {
float: right;
width: auto;
}
.amp-wp-title-bar .nav-header .mobile-open,
.amp-wp-title-bar .nav-header .mobile-close {
display: none;
}
.amp-wp-title-bar .nav-header ul {
margin: 0;
padding: 0;
}
.amp-wp-title-bar .nav-header li {
display: block;
list-style-type: none;
float: left;
}
.amp-wp-title-bar .nav-header a {
display: block;
padding: 20px;
font-family: sans-serif;
}
@media only screen and (max-width: 767px) {
.amp-wp-title-bar {
height: auto;
}
.amp-wp-title-bar .nav-header {
float: none;
overflow: hidden;
width: 100%;
}
.amp-wp-title-bar .nav-header ul {
height: 0;
}
.amp-wp-title-bar .nav-header:hover ul {
height: auto;
}
.amp-wp-title-bar .nav-header .mobile-open {
position: absolute;
top: 0;
right: 0;
display: block;
color: #fff;
font-size: 18px;
padding: 20px;
cursor: pointer;
}
.amp-wp-title-bar .nav-header li {
float: none;
}
.amp-wp-title-bar .nav-header a {
padding: 10px 16px;
text-align: center;
}
}
<?php
}
add_action( 'amp_post_template_css', 'ea_amp_header_css' );
view raw functions.php hosted with ❤ by GitHub
<div class="amp-wp-title-bar">
<div class="wrap">
<a class="logo" href="<?php echo esc_url( $this->get( 'home_url' ) ); ?>">
<?php echo esc_html( $this->get( 'blog_name' ) ); ?>
</a>
<?php
if( has_nav_menu( 'header' ) ) {
echo '<nav class="nav-header"><div class="mobile-open">&#9776;</div>';
wp_nav_menu( array( 'theme_location' => 'header', 'container' => 'false', 'depth' => 1 ) );
echo '</nav>';
}
?>
</div>
</div>
view raw header-bar.php hosted with ❤ by GitHub

Bill Erickson

Bill Erickson is a freelance WordPress developer and a contributing developer to the Genesis framework. For the past 14 years he has worked with attorneys, publishers, corporations, and non-profits, building custom websites tailored to their needs and goals.

Ready to upgrade your website?

I build custom WordPress websites that look great and are easy to manage.

Let's Talk