header.php (5110B)
1 <?php 2 /** 3 * Header file for the Twenty Twenty WordPress default theme. 4 * 5 * @link https://developer.wordpress.org/themes/basics/template-files/#template-partials 6 * 7 * @package WordPress 8 * @subpackage Twenty_Twenty 9 * @since Twenty Twenty 1.0 10 */ 11 12 ?><!DOCTYPE html> 13 14 <html class="no-js" <?php language_attributes(); ?>> 15 16 <head> 17 18 <meta charset="<?php bloginfo( 'charset' ); ?>"> 19 <meta name="viewport" content="width=device-width, initial-scale=1.0" > 20 21 <link rel="profile" href="https://gmpg.org/xfn/11"> 22 23 <?php wp_head(); ?> 24 25 </head> 26 27 <body <?php body_class(); ?>> 28 29 <?php 30 wp_body_open(); 31 ?> 32 33 <header id="site-header" class="header-footer-group" role="banner"> 34 35 <div class="header-inner section-inner"> 36 37 <div class="header-titles-wrapper"> 38 39 <?php 40 41 // Check whether the header search is activated in the customizer. 42 $enable_header_search = get_theme_mod( 'enable_header_search', true ); 43 44 if ( true === $enable_header_search ) { 45 46 ?> 47 48 <button class="toggle search-toggle mobile-search-toggle" data-toggle-target=".search-modal" data-toggle-body-class="showing-search-modal" data-set-focus=".search-modal .search-field" aria-expanded="false"> 49 <span class="toggle-inner"> 50 <span class="toggle-icon"> 51 <?php twentytwenty_the_theme_svg( 'search' ); ?> 52 </span> 53 <span class="toggle-text"><?php _ex( 'Search', 'toggle text', 'twentytwenty' ); ?></span> 54 </span> 55 </button><!-- .search-toggle --> 56 57 <?php } ?> 58 59 <div class="header-titles"> 60 61 <?php 62 // Site title or logo. 63 twentytwenty_site_logo(); 64 65 // Site description. 66 twentytwenty_site_description(); 67 ?> 68 69 </div><!-- .header-titles --> 70 71 <button class="toggle nav-toggle mobile-nav-toggle" data-toggle-target=".menu-modal" data-toggle-body-class="showing-menu-modal" aria-expanded="false" data-set-focus=".close-nav-toggle"> 72 <span class="toggle-inner"> 73 <span class="toggle-icon"> 74 <?php twentytwenty_the_theme_svg( 'ellipsis' ); ?> 75 </span> 76 <span class="toggle-text"><?php _e( 'Menu', 'twentytwenty' ); ?></span> 77 </span> 78 </button><!-- .nav-toggle --> 79 80 </div><!-- .header-titles-wrapper --> 81 82 <div class="header-navigation-wrapper"> 83 84 <?php 85 if ( has_nav_menu( 'primary' ) || ! has_nav_menu( 'expanded' ) ) { 86 ?> 87 88 <nav class="primary-menu-wrapper" aria-label="<?php echo esc_attr_x( 'Horizontal', 'menu', 'twentytwenty' ); ?>" role="navigation"> 89 90 <ul class="primary-menu reset-list-style"> 91 92 <?php 93 if ( has_nav_menu( 'primary' ) ) { 94 95 wp_nav_menu( 96 array( 97 'container' => '', 98 'items_wrap' => '%3$s', 99 'theme_location' => 'primary', 100 ) 101 ); 102 103 } elseif ( ! has_nav_menu( 'expanded' ) ) { 104 105 wp_list_pages( 106 array( 107 'match_menu_classes' => true, 108 'show_sub_menu_icons' => true, 109 'title_li' => false, 110 'walker' => new TwentyTwenty_Walker_Page(), 111 ) 112 ); 113 114 } 115 ?> 116 117 </ul> 118 119 </nav><!-- .primary-menu-wrapper --> 120 121 <?php 122 } 123 124 if ( true === $enable_header_search || has_nav_menu( 'expanded' ) ) { 125 ?> 126 127 <div class="header-toggles hide-no-js"> 128 129 <?php 130 if ( has_nav_menu( 'expanded' ) ) { 131 ?> 132 133 <div class="toggle-wrapper nav-toggle-wrapper has-expanded-menu"> 134 135 <button class="toggle nav-toggle desktop-nav-toggle" data-toggle-target=".menu-modal" data-toggle-body-class="showing-menu-modal" aria-expanded="false" data-set-focus=".close-nav-toggle"> 136 <span class="toggle-inner"> 137 <span class="toggle-text"><?php _e( 'Menu', 'twentytwenty' ); ?></span> 138 <span class="toggle-icon"> 139 <?php twentytwenty_the_theme_svg( 'ellipsis' ); ?> 140 </span> 141 </span> 142 </button><!-- .nav-toggle --> 143 144 </div><!-- .nav-toggle-wrapper --> 145 146 <?php 147 } 148 149 if ( true === $enable_header_search ) { 150 ?> 151 152 <div class="toggle-wrapper search-toggle-wrapper"> 153 154 <button class="toggle search-toggle desktop-search-toggle" data-toggle-target=".search-modal" data-toggle-body-class="showing-search-modal" data-set-focus=".search-modal .search-field" aria-expanded="false"> 155 <span class="toggle-inner"> 156 <?php twentytwenty_the_theme_svg( 'search' ); ?> 157 <span class="toggle-text"><?php _ex( 'Search', 'toggle text', 'twentytwenty' ); ?></span> 158 </span> 159 </button><!-- .search-toggle --> 160 161 </div> 162 163 <?php 164 } 165 ?> 166 167 </div><!-- .header-toggles --> 168 <?php 169 } 170 ?> 171 172 </div><!-- .header-navigation-wrapper --> 173 174 </div><!-- .header-inner --> 175 176 <?php 177 // Output the search modal (if it is activated in the customizer). 178 if ( true === $enable_header_search ) { 179 get_template_part( 'template-parts/modal-search' ); 180 } 181 ?> 182 183 </header><!-- #site-header --> 184 185 <?php 186 // Output the menu modal. 187 get_template_part( 'template-parts/modal-menu' );