[Tutorial #12] WordPress Header File Detailed Explanation

[Tutorial #12] WordPress Header File Detailed Explanation

The Structure

This is the header.php code. You can download the source file from here in Github:

To make it easier to understand, her we trim out the details and only show the generic header structure:


The following explaanation refers to header.php

Line 1-11: wordpress theme file information

The description here between <?php and ?> is for documentation. You can find the standard specification in wordpress Codex page here.

Line 11-13: Standard HTML starting tags. Just use default from underscore theme.

Line 14-35: The <head> section

As described before the <head> is where we (1) specify page attributes (2) load resources.

Line 14-17: Default theme attributed. Leave it untouched.

Line 19-21: <link> tag loading Google Font

Google provides a nice font service to load fonts directly from the Internet:

Google font home page

Google Fonts homepage.

Once you select a font, follow the instructions on the page to include the font in your page by:

  1. Add the <link> tag in the header.
  2. Specify the CSS codes to apply fonts to desired part on your webpages.

Google Fonts usage code

Google Font embedding and usage codes.

Line 22-23: Bootstrap CSS file inclusion <link> tag

As described in the previous post , you need to include both CSS and Javascript Bootstrap files in order to use it. In the header is where you include the CSS file via <link> tag.

Line 25-26: Font Awesome CSS file inclusion <link> tag

Font Awesome is a collection of vector image icons (a vector image will automatically scale with sizes and won’t lost resolution). It is very useful to enhance your website’s user experience by guiding viewers with icons.

Font Awesome homepage.

The way to use Font Awesome is the same as Google Fonts: you first get the library from the header via <link> tag and use it via HTML/CSS tags. We will see the HTML/CSS tags when we configure the menu.

Line 28: Default wordpress head content function.

Line 30-34: Old IE compatibility code

These are for displaying website properly in older IE versions.

Line 38-end: beginning <body> section

This is where the visible webpage content begins.

Line 40: wordpress theme default screen reader link.

Line 42-83: the HTML <header> section

The header section represents the introductory part of the webpage. This usually includes navigation bar and introductory texts.

Line 46,80: just a wrapper

Sometimes it is useful to wrap the Bootstrap content inside an extra <div> tag for applying styles. We didn’t use any here, but it’s a good habit to do so.

Line 49-78:  Bootstrap navbar codes

Bootstrap uses classes to specify the component type and properties. We will explain them below. For more class options see this page.

Line 49 class explanation:

  • navbar: tell Bootstrap this is a navbar
  • navbar-default: default navbar style (we mod it in style.css).
  • navbar-fixed-top: when scrolling down fix the navbar on top of the page.

Line 51 container:

As a reminder Bootstrap’s components must be put into “container” to work.

Line 52-63 navbar-header:

Navbar header is the “introductory” part of navbar. This usually includes two items:

  1. Line 53-58: Menu square icon that appears in top right of mobile screen.
  2. Line 60-61: Hyperlinked website logo(s). Default location is aligned at left.

The menu square icon codes are standard. Don’t change them. For hyperlinked logos, the wordpress PHP code <?php bloginfo('stylesheet_directory'); ?> returns the current wordpress theme directory. Use this rather than hard-coded directory path so your codes won’t break when you move your site’s folder.

(IMPORTANT) Line 65-74 WordPress Menu Usage:

This is one of the tricky part of using wordpress and Bootstrap together.

Since in wordpress we assign menus from the admin panel, we must use wordpress’ function to insert the menu into Bootstrap’s navbar. Hence the function wp_nav_menu(...).

We will explain the setting in more details when we add menus. For now it’s informative to know the paramaters of wp_nav_menu:

  • theme_location: specify the menu location in the theme (will expalin what this means later).
  • container: the HTML tag that contains the menu.
  • container class: the classes of the above mentioned HTML tag.
  • menu_class:  The menu is represented by the list <ul> tag, thus menu_class specifies the classes for the <ul> tag.