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 3831 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 3831 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 3831 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 3831

The header.php Template File

I like to start with first things first, so the header.php is usually where I begin theme development. If you recall, this is one of the special template files, I suppose it’s a sub-template file, since it is only included by other templates.

Maximize Common Text

You should put the maximum amount of common text into the header.php file. What I mean by “common text” is text and code at the beginning of all the template pages that will be identical. We do this for two reasons: it’s more efficient to store that text in 1 shared file than the same exact text in 20 different files; which highlights reason two, by keeping the common text in just one place, we can make changes to all 20 files with one edit. Otherwise we would have a tough time doing even minor changes consistently across all those files.

Remember, header.php is not just for <head>

The word header is used here in its more general meaning, which is, “the top of something.” Header is kind of a loaded word in web development since it can imply HTML headers, or the <head> section, or any other number of vaguely named things. (That’s why I usually use the term masthead or branding to describe the content header, when practical.) You can put whatever HTML you want in the header.php. Heck, you could put the whole theme in there if you really wanted to, and it would still work… it would just be weird.

Your header.php should probably go into the first couple elements of the <body> tag (unless you are doing something weird). Put as much of your code in the repeating header/footer/sidebar templates as possible to save yourself headaches down the road.

Quick and Dirty HTML/CSS Tutorial

This is as far as we can go without addressing the way HTML and CSS works. This section is for complete HTML novices (or those who would like a refresher), feel free to skip to the section below if you don’t need it.

All HTML documents have the same essential structure. The most basic, proper, HTML document looks like this:

<html>
	<head>
		<title>Page Title</title>
	</head>

	<body>
	</body>
</html>

This would produce an all white page with the title “Page Title.” The word inside the carrots is called an elements. All elements have opening and closing tags (the same tag with a slash before the word). The text inside the opening and closing tags gets the element applied to id. Therefore <title>Page Title</title> means the text “Page Title” will be the <title> of the page.

<html> is the King

The <html> element always wraps the rest of the code, first in, last out. Inside that, there are two main sections, the <head> and the <body>. Elements that appear in the <head> don’t actually get displayed on the page directly like the elements in the <body> do. The <head> section is primarily for meta data about the page itself.

Self-Closing Syntax

An element that wraps nothing can close itself with a slash at the end instead. For instance the tag to insert an image is <img>. Nothing gets wrapped, so it would be silly to type <img></img> every time we want a picture. The alternate syntax would look like <img /> instead.

You may be wondering how the browser knows what image to display from just <img />. Very smart, it doesn’t actually. You need to include attributes inside the tag. Attributes describe an element the same way <head> elements describe the page. Continuing with the image example, we would include the attributes src (short for “source”, this is the location of the file) and alt (short for “alternate text”, the text to display if the image can’t be found, also more generally used by search engines and other robots to figure out what a picture is about).

The final full image element source code would look like something like this:

<img src="images/the-filename.jpg" alt="A made up picture" />

<head> Elements

Almost all of the <head> elements are self closing since they only contain meta data about the page, and not text to be displayed (with a few exceptions). Here are the common elements that appear in the <head> section that you need to know. Each of these tags follows this same general format:

  • <meta> <!– add meta data to the page (commonly “description” and “robots”) –>
  • <link> <!– include a css or javascript file on the page –>
  • <script>/* directly input javascript */</script>
  • <style>/* directly input jcss styles */</style>

And here’s an example of each in use:

<meta name="robots" content="noindex nofollow" />
<link rel="stylesheet" type="text/css" href="style.css">
<script>window.open("http://wordpress.org")</script>
<style>body{color:black;}</style>

<body> Elements

Elements in the <body> can also have attributes. The most important of these are the id and class attributes. By assigning IDs and classes to our elements, it gives us something to refer to when adding styles in our CSS style sheet.

ID vs. class

IDs and classes are both simply ways of naming our elements so we can assign styles to them. The main difference is that IDs must be unique on a page, that is, an ID can belong to only one element on a page. &lt;body&gt; by elements and elements can contain multiple classes (just separate them with a space).

Let’s take a look at some common <body> elements, and put everything we’ve just learned together:

<div id="divider-1" class="generic dividers divs">
	<p id="paragraph-44">New paragraph</p>
	<span class="inline">Text contained in this divider.</span>
	<p><em>italic</em> <strong>bold</strong></p>
	<blockquote class="fey">A block of text</blockquote>
</div>
Display: Inline vs. Block

There are two main groups of body elements: inline and block. Inline elements butt up right next to each other, block elements get their own lines. By default: p, div, and blockquote are all block elements, while span, em, and strong are inline. However, this is really just for organizational purposes, since you can change an element’s display type by using the CSS “display:” attribute. Let’s apply some CSS to our body text example above.

CSS Syntax

The syntax when declaring CSS syles can seem a little confoluded until you get used to it.

  • A CSS rule defines style information for a particular element (or elements using commas).
  • The element is “selected” using one of 3 selectors.
    • No prefix for elements (top level tags)
    • a period prefix for classes,
    • and a hashtag prefix for IDs.
  • After the selector, there is a pair of curly braces that hold individual style rules, separated by semicolons.

So for example, we could add this to an attached CSS file:

blockquote { padding:4px; margin:8px; }
.generic { background-color:red; }
#divider-1 { display:inline; }

It will be a bit confusing for awhile, but just keep staring at the code and looking up what you don’t know until it gets familiar. Hopefully this was enough of a crash course to make the following section with the header.php template code marginally comprehensible.

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