This is the second in a series of articles on the parts and pieces of WordPress, and how they go together. As I said in my introductory article, I came to WordPress from a background of hard-coding my own HTML, CSS, PHP, and JavaScript. Learning the basics of WordPress—and CMS more broadly–took me a great deal of time.
I learned how to store post and page information in a database, and then extract that information to build pages “on the fly” using templates–which results the WordPress page seen by the end user. This page has a header, footer, perhaps a sidebar or two, a navigational area, and content.
In my first article, I discussed how to customize the footer. This is because—in my opinion—the footer is the simplest to understand. The remaining theme and template files are more complex and can vary quite a bit in their usage.
For this article, I’m going to tackle header.php using Twenty Thirteen as our parent, and making modifications for our child theme.
The following PHP gives you—the developer—information about what the file is and what the code within it actually does.
<?php /* * The Header template for our theme * * Displays all of the <head> section and everything up till <div id="main"> * * @package WordPress * @subpackage Twenty_Thirteen * @since Twenty Thirteen 1.0 */ ?>
Below is a step by step comparison of the header.php file, followed by the resulting code for the page that gets served up to a browser.
Although there is a lot of code here and it may seem a bit jumbled, what it’s doing—in simple terms—is putting together the information in the <head>…</head> section of each page that gets generated and served to a browser. Some basic elements are there, and are allowances made for plugins to add their scripts as needed.
The main navigation, the site title, stylesheet(s), and the site URL are all pulled from settings in the WordPress Dashboard and Appearance (Menu) configurations. In a majority of sites, the header.php is consistent from page to page, and contains all the code up to the content part of the page (I’ll discuss this in the next installment of this series).
<!DOCTYPE html> <!--[if IE 7]> <html <?php language_attributes(); ?>> <![endif]--> <!--[if IE 8]> <html <?php language_attributes(); ?>> <![endif]--> <!--[if !(IE 7) | !(IE 8) ]><!--> <html <?php language_attributes(); ?>> <!--<![endif]-->
The doctype declaration tells the web browser how to render the code and the attached CSS style sheet parameters. The Twenty Thirteen theme has CSS classes defined for IE7 and IE8, which keep the pages similar across browsers. But, this is an entirely different topic and series of articles . . .
<!DOCTYPE html> <!--[if IE 7]> <html class="ie ie7" lang="en-US"> <![endif]--> <!--[if IE 8]> <html class="ie ie8" lang="en-US"> <![endif]--> <!--[if !(IE 7) | !(IE 8) ]><!--> <html lang="en-US"> <!--<![endif]-->
The <head> of an HTML document contains instructions for the browser—which allows it to link to, and pull in, various resources to render the page properly. Tags used can include <meta>, <title>, <link>, and <script>.
The next several lines pull in these resources, and generate the HTML that is seen and used by the browser.
<head> <meta charset="<?php bloginfo( 'charset' ); ?>"> /* Defines the character encoding, pulls from database */ <meta name="viewport" content="width=device-width"> /* Allows for varying device sizes */ <title><?php wp_title( '|', true, 'right' ); ?></title> /* Page title, shows in browser tab, pulled from database and uses the post or page name with the “ | “ character separating the blog name from the page name. (simplified) */ <link rel="profile" href="http://gmpg.org/xfn/11"> /* Adds support for XFN (http://gmpg.org/xfn/) */ <link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>"> /* Adds pingback support */ <link rel="stylesheet" type="text/css" media="all" href="<?php bloginfo( 'stylesheet_url' ); ?>" /> /* Links our stylesheet */ <!--[if lt IE 9]> <script src="<?php echo get_template_directory_uri(); ?>/js/html5.js"></script> <![endif]--> /* Adds support for IE 8 and earlier for html5 elements via a javascript file. */ <!--[if lt IE 9]> <![endif]-->
<head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width" /> <title>Site Title from WP Settings</title> <link rel="profile" ref="http://gmpg.org/xfn/11" /> <link rel="pingback" href="http://mysitename.com/xmlrpc.php" /> <link rel="stylesheet" type="text/css" media="all" href="http://mysitename.com/wp-content/themes/childof2013/style.css" /> <!--[if lt IE 9]> <script src="http://mysitename.com/wp-content/themes/twentythirteen/js/html5.js" type="text/javascript"></script> <![endif]-->
The final piece before the closing </head> tag is:
<?php wp_head(); ?> </head>
This bit of code pulls in a variety of plugin resources—scripts, fonts, additional style sheets, and more—to add functionality. Many plugins use this hook to add their scripts and stylesheets to the <head> section.
Now we are ready to begin the <body> of our WordPress page. This is included in header.php because every page needs to have a <body> tag. In fact, pretty much everything up to the actual content of the page is included in header.php, so it can be confusing. I will present the php code from header.php, and then follow with the html that is generated.
<body <?php body_class(); ?>> /* Assigns css class designations based on the template file being used to call this header.php file. */ <div id="page" class="hfeed site"> <header id="masthead" class="site-header" role="banner"> <a class="home-link" href="<?php echo esc_url( home_url( '/' ) ); ?>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" rel="home"></a> /* Gets information and instructions from stylesheet and database, creating a link to the site homepage */ <h1 class="site-title"><?php bloginfo( 'name' ); ?></h1> /* Puts the Site name in the page text */ <h2 class="site-description"><?php bloginfo( 'description' ); ?></h2> /* Site description pulled from database */
<body class="home page page-id-2 page-template-default custom-font-enabled"> <div id="page" class="hfeed site"> <header id="masthead" class="site-header" role="banner"> <hgroup> <span><a href="http://mysitename.com/" title="My Site Name" rel="home">My Site Name</a></span> <h1 class="site-title"></h1> <h2 class="site-description"></h2> </hgroup>
Next is the navigation and menu setup.
The PHP grabs the information from the database—the HTML that gets served up varies immensely depending on the menu setup chosen in the WordPress configuration.
<div id="navbar" class="navbar"> <nav id="site-navigation" class="navigation main-navigation" role="navigation"> /* Setting up the navigation divs and classes; customize the menu in the css child theme file! */ <h3 class="menu-toggle"><?php _e( 'Menu', 'twentythirteen' ); ?></h3> /* Responsive theme; text shown in mobile devices when full menu is not shown */ <a class="screen-reader-text skip-link" href="#content" title="<?php esc_attr_e( 'Skip to content', 'twentythirteen' ); ?>"><?php _e( 'Skip to content', 'twentythirteen' ); ?></a> <?php wp_nav_menu( array( 'theme_location' => 'primary', 'menu_class' => 'nav-menu' ) ); ?> /* Gets the actual menu used, as set up in WordPress, from the database */ <?php get_search_form(); ?> /* The search form can be in the header, or in a widget – this is the hook that pulls in the code, generated for each page it is shown on. Place it here to have it show in the main navigation. */ </nav><!-- #site-navigation --> </div><!-- #navbar --> /* Close div tags */ </header><!-- #masthead --> /* Close common header sections */
<div id="navbar" class="navbar">
<nav id="site-navigation" class="navigation main-navigation" role="navigation">
<h3 class="menu-toggle">Menu</h3>
<a class="assistive-text" href="#content" title="Skip to content">Skip to content</a>
/* Full menu code goes here based on menu setup in WordPress */
<form role="search" method="get" class="search-form" action="http://mysitename.com/">
<label><span class="screen-reader-text">Search for:</span>
<input type="search" class="search-field" placeholder="Search …" value="" name="s" title="Search for:" />
</label>
<input type="submit" class="search-submit" value="Search" />
</form>
</nav><!-- #site-navigation -->
</div><!-- #navbar -->
</header><!-- #masthead -->
And finally, here is the beginning of the content portion of the page.
<div id="main" class="site-main"> <div id="content" role="main">
Our page-template-specific code takes over at this point, filling in the content area, sidebar(s), and other page-specific elements. Our footer.php contains the closing tags for the “main” and “content” divisions.
This concludes my article on customizing header.php; next, I will use a page template, and show how all the pieces (should) fit together!
Feedback and suggestions for what you need help with are more than welcome!
Sue Laren is a freelance website designer/developer living in the SF Bay Area (North Bay), married 33 years, with four grown children and two grandchildren. She taught computer lab (basic computer skills) at a local elementary school for many years, and in 2007 started her own web design business, Laren Net Works. Follow her on Twitter at @LarenNetWorks.
1 Comment