Notice: get_settings is deprecated since version 2.1.0! Use get_option() instead. in /var/www/vhost/shinraholdings.com/wp-includes/functions.php on line 3828

The header.php Code

I recommend the following for a simple, HTML4 theme header file. I will go over the new stuff introduced below the code example. Just take a second to see how it all fits together first. Remember, this is just the very top of each page.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" <?php language_attributes(); ?>>
<head profile="http://gmpg.org/xfn/11">
<title><?php wp_title(); ?></title>
<?php wp_head(); ?>
</head>

<body <?php body_class(); ?>>

	<div id="container">
		
		<div id="header">
		</div>
		
		<div id="main">

Code Analysis

I know that was quite a jump, but don’t worry. Now we’re going to go over the code line by line.

  1. The <!DOCTYPE> element actually preceeds the actual HTML code and the <html> tag. It’s long and complicated, but it is essentially robot speak that identifies what kind of rules the code on the page follows. You can copy it verbatim.
  2. The <html> element has two additonal attributes, and one of them looks weird!
    • The xmlns="http://www.w3.org/1999/xhtml" attribute is more robot speak for page typing;
    • But the <?php language_attributes(); ?> is our first encounter with a PHP function! You know it’s a PHP function because PHP code must be wrapped inside <?php and ?> tags or else it will just show up as text. This is so the parser engine knows what is PHP code, and what is HTML code or plain text.
    • This is a special PHP function defined by WordPress that "echos" (or prints on the page) the HTML attributes related to language, dynamically!
    • If you speak English, the entire <?php language_attributes(); ?> will be replaced by lang="en" dir="ltr"
      in the page’s source code. So our finialized <html> element is actually: <html xmlns="http://www.w3.org/1999/xhtml" lang="en" dir="ltr"> which looks a little more familiar.
  3. Our <head> element also has a new attribute: profile="http://gmpg.org/xfn/11" . This defines the XML profile that lets your theme use cool rel="" features to show how links are related to you and your site. For more information you can checkout, unsurprisingly:, http://gmpg.org/xfn/11.
  4. Our <title> line doesn’t have any new attributes, but it is now wrapping the php functon <?php wp_title(); ?>. This instructs the core to echo the page title. It’s probably blank on index pages right now, we will come back later and tweak this, don’t worry.
  5. Next up, another PHP function: <?php wp_head(); ?>. Remember earlier when I brought up hooks? This is one of those in the flesh. By putting this function just before the closeing </head> tag, the core will pause before closing the <head> and "ask" the theme, "are there any functions you want me to run now?" This is a required part of the theme structure, as is <?php wp_footer(); ?>, it’s bottom of the page counterpart. We will learn how to hook into this theme a little later in this tutorial.
  6. </head> … Finally! Someone we recognize!
  7. The <body> tag also looks… odd. Much like the language_attributes() function, the body_class() function echos HTML attributes into the element.
    • In this case, it is replaced with class="and bunches of-classes that-wordpress applies".
    • If you want to add your own class, simple put it in the parenthesis in the button of the function call (inside some quotes), like so <body <?php body_class( 'custom-class' ); ?>>.
    • This would then show up as <body class="custom-class and bunches of-classes that-wordpress applies">.
  8. We then have:
    • an open <div> with an id of "container"
    • followed by an open and closed <div> with an id of "header"
    • And another open <div> with an id of "main"

It may seem odd to open two divs and not close them in the file, but I promise we will close them further down in another template. You of course remember that this is only the very top of the final file, right?

Our header template is still pretty lean, but we will come back and add the PHP functions that draw our navigation menu(s) and the custom header, but I figured we should wait until I explain those functions (and PHP in general) a little bit more.

If you haven’t taken one yet, now is a nice place for a little break.
Eat a sandwich, go outside, call your mother (she worries about you). Take a minute and assess how comfortable you are with what we’ve done so far. If it’s hazy, you might want to repeat the process or take a look at some additional outside resources (I’ll list some good ones below). It’s only going to get more complicated from here so it’s important that you have a solid grasp of the fundamentals.

If you’re feeling good, hop on over to the next section where we will get started on the functions.php file. I will preface this with a “quick and dirty” overview of PHP (just as we had earlier when we encountered HTML and CSS for the first time in our theme). Unlike all the other theme files, the functions.php is not meant to be seen. It should not have any output to the page (except what is conditionally directed inside of functions). The header.php file was an HTML file with some PHP in it, but the functions.php is a PHP file with some HTML in it. But it’s okay, I’m here to guide you. Ready to go? Did you call your mother?

If you’re feeling less than confident, here are some excellent, free, online resources that can sharpen your skills and perhaps answers some questions I failed to anticipate:

3 Thoughts on “Making a WordPress Theme – World’s Most Detailed Tutorial

  1. George Doe on July 13, 2013 at 4:13 am said:

    The end?

Leave a Reply

Your email address will not be published. Required fields are marked *

Post Navigation