Today we’re going to continue looking at the themestarter files and talking about PHP concepts, looking at header.php.
header.php contains the <head> section and, the site title, description, main page container, and main navigation menu. Depending on the structure of your portfolio this section may have other elements, like an image or logo, so it will change with the site design.
The <head> section is necessary, as the header is the first thing loaded into each page as it is rendered in the browser, and the head contains things like the doctype declaration and stylesheet. However, there are some things we can remove to simplify the header.
All of the underscores templates will begin with a php comment explaining the purpose of the template.
<?php
/**
* The header for our theme
*
* This is the template that displays all of the <head> section and everything up until <div id="content">
*
* @link https://developer.wordpress.org/themes/basics/template-files/#template-partials
*
* @package portfolio
*/
?>The <head> section of the HTML is inside the header.php file. There are some basic php statements in here that we can look at but we don't need to do much here.
<head>
<meta charset="<?php bloginfo( 'charset' ); ?>">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="profile" href="http://gmpg.org/xfn/11">
<?php wp_head(); ?>
<head>After <head> we have the <body> and site containter:
<body <?php body_class(); ?>>
<div id="page" class="site">We can add .site to style.css to add some basic page styles.
Notice that <?php body_class(); ?> actually generates the class names for the body section. When the site is generated that turns into <body class="home blog hfeed">
We can also add .home or .blog into the style page to specifically style this page.
The end of the header.php is the beginning of the page content:
<div id="content" class="site-content">Let's add .site-content in the style.css file and add some styles for the content of the page.
header.php also contains the main title for the site and the site description that is sourced from WordPress. The site description could be a good place for your bio, but you may not need a site description. The title and description are contained in the .site-branding section:
<div class="site-branding">
<?php
if ( is_front_page() && is_home() ) : ?>
<h1 class="site-title"><a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a></h1>
<?php else : ?>
<p class="site-title"><a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a></p>
<?php
endif;
$description = get_bloginfo( 'description', 'display' );
if ( $description || is_customize_preview() ) : ?>
<p class="site-description"><?php echo $description; /* WPCS: xss ok. */ ?></p>
<?php
endif; ?>
</div><!-- .site-branding -->Finally, the header.php section loads the main navigation menu into the page. This is also something that you may change depending on the design of your site, but if you have a navigation menu in the header of your page, this is where it would be build.
<nav id="site-navigation" class="main-navigation" role="navigation">
<button class="menu-toggle" aria-controls="primary-menu" aria-expanded="false"><?php esc_html_e( 'Primary Menu', 'portfolio' ); ?></button>
<?php wp_nav_menu( array( 'theme_location' => 'menu-1', 'menu_id' => 'primary-menu' ) ); ?>
</nav><!-- #site-navigation -->The main things to look for here are the 'menu-id' parameter, which is how you assign which menu to add here, and the 'theme_location' which tells WordPress which part of the theme this is and what menu to look for.