Skip to content

Instantly share code, notes, and snippets.

@dustinleer

dustinleer/header.php

Created June 7, 2019 17:19
Show Gist options
  • Save dustinleer/a493073b89a80694922e79b9b9d7484b to your computer and use it in GitHub Desktop.
Save dustinleer/a493073b89a80694922e79b9b9d7484b to your computer and use it in GitHub Desktop.
Download ZIP
Do you need to move nav items in a complicated navigation? Here's what I did for a solution on a WordPress site that had 3 separate navs that needed to become one at a certain breakpoint for mobile and then resume their normal states when not at that breakpoint for desktop.
Raw
header.php
<?php
// Site specific vars
$lang_att = get_language_attributes();
$charset = get_bloginfo( 'charset' );
$pingback = get_bloginfo('pingback_url');;
$site_url = get_bloginfo( 'wpurl' );
$site_name = get_bloginfo( 'name' );
// Get Body Classes then turn them into string values
$body_classes = get_body_class();
$body_class = implode( " ", $body_classes);
echo '<!DOCTYPE html>';
echo '<!--[if lte IE 6]> <html ' . $lang_att . ' class="no-js lte-ie9 lte-ie8 lte-ie7 lte-ie6"> <![endif]-->';
echo '<!--[if lte IE 7]> <html ' . $lang_att . ' class="no-js lte-ie9 lte-ie8 lte-ie7"> <![endif]-->';
echo '<!--[if lte IE 8]> <html ' . $lang_att . ' class="no-js lte-ie9 lte-ie8"> <![endif]-->';
echo '<!--[if lte IE 9]> <html ' . $lang_att . ' class="no-js lte-ie9"> <![endif]-->';
echo '<!--[if gt IE 9]><!--> <html ' . $lang_att . ' class="no-js"> <!--<![endif]-->';
echo '<head>';
echo '<meta charset="' . $charset . '">';
echo '<meta id="viewport" name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=1" />';
echo '<title>';
wp_title('|', true, 'right');
echo '</title>';
echo '<link rel="pingback" href="' . $pingback . '" />';
echo '<link rel="profile" href="http://gmpg.org/xfn/11">';
wp_head();
echo '</head>';
// Options page vars
$options = get_field( 'general_information', 'option' );
$logo = $options['company_logo'];
$url = $logo['url'];
$alt = $logo['alt'];
$title = $logo['title'];
// Contact
$phone_primary = $options["phone_number_primary"];
$phone_secondary = $options["phone_number_secondary"];
$email = $options["email_address"];
// Hero vars
$hero_id = get_post_thumbnail_id( $post->ID );
$hero_url = wp_get_attachment_url( $hero_id );
$hero_alt = get_post_meta( $hero_id, '_wp_attachment_image_alt', true );
// ACF Options Deafult Banner image
$default = get_field( 'header_image', 'option' );
// ACF Hero vars
$header_choice = get_field( 'hero_or_banner' );
$hero = get_field( 'featured_image' );
$add_text = get_field( 'add_hero_text' );
$hero_text = get_field( 'featured_hero_text' );
$banner = get_field( 'featured_banner' );
if ( $header_choice == 'hero' ) {
$hero_url = $hero['url'];
$hero_alt = $hero['alt'];
$class = ' featured-hero';
} else if ( $header_choice == 'banner' ) {
$hero_url = $banner['url'];
$hero_alt = $banner['alt'];
$class = ' banner';
} else if ( !$hero_id ) {
$hero_url = $default['url'];
$hero_alt = $default['alt'];
$class = ' banner';
} else {
$hero_url = $hero_url;
$hero_alt = $hero_alt;
}
echo '<body class="' . $body_class . '">';
echo '<header id="masthead" class="site-header" role="banner">';
echo '<div class="site-header-inner' . $class . '" role="banner" style="background-image: url(' . $hero_url . ')">';
// Navigation
echo '<section class="navigation">';
// Top Navigation
echo '<div class="top-bar">';
echo '<nav class="nav nav-top" role="navigation">';
wp_nav_menu( array(
'menu' => 'Top Nav',
'container' => false,
'menu_class' => 'top-nav',
'menu_id' => 'top-nav',
) );
echo '</nav><!--END nav-->';
// Top Contact Information
if ( $phone_primary ) {
$phone = $phone_primary;
} else {
$phone = $phone_secondary;
}
if ( $phone ) {
echo '<a href="tel:' . $phone . '" class="phone">' . $phone . '</a>';
}
echo '</div><!--END .top-bar-->';
// Main Navigation
echo '<div class="nav-wrapper">';
echo '<div class="site-branding">';
if ( is_front_page() ) {
echo '<h1>';
echo '<a href="' . $site_url . '" rel="home" class="logo">';
echo '<img src="' . $url . '" alt="' . $site_name . '" />';
echo '</a>';
echo '</h1>';
} else {
echo '<a href="' . $site_url . '" rel="home" class="logo">';
echo '<img src="' . $url . '" alt="' . $site_name . '" />';
echo '</a>';
}
echo '</div><!--END .site-branding -->';
echo '<nav id="site-navigation" class="nav nav-main" role="navigation">';
echo '<a href="#" class="menu-toggle" id="menu-toggle"><span class="icon"></span>Menu</a>';
wp_nav_menu( array(
'menu' => 'Main Menu',
'container' => 'div',
'container_class' => 'main-nav-wrapper',
'menu_class' => 'main-nav',
'menu_id' => 'main-nav',
) );
// SEARCH
echo '<a href="#" class="search close-search">Close Search</a>';
echo '<a href="#" class="search open-search is-active">Open Search</a>';
echo '<div class="search-wrap">';
echo '<form class="search-box" role="search" action="' . $site_url . '" method="get">';
echo '<label class="visually-hidden" for="s">';
_e( 'Search' , 'mytextdomain' );
echo '</label>';
echo '<input type="text" id="search" name="s" placeholder="Search" aria-label="Search" autocomplete="off">';
echo '<input type="submit" aria-label="Submit Search" value="">';
echo '</form>';
echo '</div>';
echo '</nav><!--END #site-navigation -->';
echo '</div><!--END .nav-wrapper-->';
$service = get_field( 'service' );
if ( $service ) {
if ( $service === 'this-service-id' ) {
$menu = ' These Services';
} else if ( $service === 'this-service-id' ) {
$menu = 'These Services';
} else if ( $service === 'this-service-id' ) {
$menu = 'These Services';
}
// Top Navigation
echo '<div class="service-nav">';
echo '<nav class="nav nav-service" role="navigation">';
wp_nav_menu( array(
'menu' => $menu,
'container' => false,
'menu_class' => 'service-menu',
'menu_id' => 'service-menu',
'fallback_cb' => '',
// 'depth' => 3,
) );
echo '</nav><!--END nav-->';
echo '</div><!--END .service-nav-->';
}
echo '</section>';
if ( $hero_url ) {
echo '<img class="hero' . $class . '" src="' . $hero_url . '" alt="' . $hero_alt . '"/>';
}
echo '</div>';
if ( $add_text ) {
echo '<div class="hero-blurb">';
echo '<p>' . $hero_text . '</p>';
echo '</div>';
}
echo '</header><!--END #masthead-->';
Raw
nav-system.js
jQuery(document).ready(function($) {
//--------------------
// VARS
//--------------------
var
// NAV
navbutton = $('.menu-toggle'),
navWrap = $('.main-nav-wrapper'),
navmenu = $('.main-nav'),
servicemenu = $( '.service-menu' ),
topmenu = $('.top-nav'),
// WATCHER
watcher = window.matchMedia("(max-width: 1079px)"),
// SEARCH
openSearch = $('.open-search'),
closeSearch = $('.close-search'),
searchWrap = $('.search-wrap');
//--------------------
// NAV
//--------------------
navbutton.on("click", function(e){
e.preventDefault();
openSearch.addClass('is-active');
$([closeSearch, searchWrap]).removeClass('is-active');
if ( navbutton.hasClass('active') ) {
navbutton.removeClass('active');
navWrap.removeClass('active');
} else {
navbutton.addClass('active');
navWrap.addClass('active');
}
});
$([navmenu, servicemenu, topmenu]).each(function(i) {
$this = $(this).find('li.menu-item-has-children');
$this.find('> a').append('<button class="dd-btn" href="#">Open Sub Menu</button>');
});
windowWidth( watcher ); // Call listener function at run time
watcher.addListener( windowWidth ); // Attach listener function on state changes
function windowWidth( watcher ) {
if ( watcher.matches ) { // If media query matches
servicemenu.addClass('attached-nav').detach('.nav-service').appendTo(navWrap);
topmenu.addClass('attached-nav').detach('.nav-top').appendTo(navWrap);
} else {
servicemenu.removeClass('attached-nav').detach().appendTo('.nav-service');
topmenu.removeClass('attached-nav').detach().appendTo('.nav-top');
}
}
$('.main-nav, .service-menu, .top-nav').on('click', '.dd-btn', function(e) {
e.preventDefault();
var $this = $(this);
$this.closest('li').toggleClass('active');
if ( $this.closest('li').hasClass('active') ) {
$this.text('Close Sub Menu');
} else {
$this.text('Open Sub Menu');
}
});
$('a, .main-nav, .service-menu, .top-nav').focus(function() {
$(this).parents("li").addClass("hover");
}).blur(function() {
$(this).parents("li").removeClass("hover");
});
//--------------------
// SEARCH
//--------------------
openSearch.on('click', function(e) {
e.preventDefault();
$(this).removeClass('is-active');
navbutton.removeClass('active');
navWrap.removeClass('active');
closeSearch.addClass('is-active');
searchWrap.addClass('is-active');
});
closeSearch.on('click', function(e) {
e.preventDefault();
$(this).removeClass('is-active');
openSearch.addClass('is-active');
searchWrap.removeClass('is-active');
});
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment