Head | Website In A Weekend

Head vs. Header — A critical difference for modifying WordPress themes

(Reading time: 4 – 7 minutes)

Creating effective websites requires understanding a little bit about what goes on “under the hood.” For example, if you want to do the entirely reasonable modifications of adding a favicon, or changing the banner image for your website, you will need to know the correct incantations for making this webpage magic work.

It’s not difficult, but it can be confusing at times.

Consider the difference between the <head> element of the web page, and a “header” element of the web page design. These are two different things. The <head> element is part of every web page, and contains meta-information that isn’t displayed in the browser. Your readers never see this, but your browser and search engines do see it.

A “header” is a graphical element that’s part of the readable web page and is specified by the design of the web page. It’s displayed by the browser, and usually consists of information such as text and graphics that are common across your entire web site. Really understanding these concepts requires understanding just a little bit of HTML, and I’m going to draw a picture of what’s going on to make it easier for both of us.

<html> element (whole web page)

<head> element (not displayed)

<body> element (displayed)

displayed header content

displayed main content

displayed footer content

Graphical HTML elements

Take a look at the layout to the right.

The outer pink-colored box represents the entire web page, everything that is delivered from the web server and represented by the <html> element.

Contained with the <html> element are the <head> and <body> elements. These are “child” elements of <html>. Nothing in the <head> element is displayed directly within the web page, although the various subelements within the head element control favicon display, CSS and Javascript behavior. In a sense, the <head> element can be thought of as the place where the “document controls” live.

The <body> element contains one or more child elements that contain text and images. These child elements are commonly arranged as header content, main content and footer content. The header and footer content typically remains the same for all web pages on the website. For example, the banner above appears no matter which webpage is being viewed on Website In A Weekend, and the footer always contains the copyright and links to associated pages such as Privacy Policy, Terms and Conditions, etc.

What goes where?

The diagram now makes figuring out where to put things much easier.

favicons go into the <head> (light blue) element, using the code shown in the article “Adding favicon.ico to WordPress For Professional Appearance.”

Header images are added to the HTML code that controls the dispayed header content (light tan color). In WordPress, this HTML code is controlled by it’s CSS class which is named (surprise!) “header.” We’ll cover adding a header image to your WordPress blog in a future article, which requires modifying your CSS file. In the meantime, take some time to study this article, and compare the diagram above with the source code for this page. You can examine the source code using the keyboard shortcut “ctrl-u” in the Firefox, Safari and Chrome web browsers.

Simplied HTML code

Now all that was pretty straightforward… but there’s more…

…WordPress puts head and and header into file: header.php.

Here’s what header.php looks like in the theme installed on Katherine Kendall Salon & Spa:

<!-- Start of the "head" element, nothing in 
       here is displayed directly on the page. -->
<head profile="http://gmpg.org/xfn/11">
	<meta http-equiv="Content-Type" content="<?php bloginfo('html_type'); ?>; charset=<?php bloginfo('charset'); ?>" />
	<title><?php bloginfo('name'); ?><?php wp_title(); ?></title>
	<style type="text/css" media="screen">
		@import url( <?php bloginfo('stylesheet_url'); ?> );
	</style>
 
	<link rel="alternate" type="application/rss+xml" title="RSS 2.0" href="<?php bloginfo('rss2_url'); ?>" />
	<link rel="alternate" type="text/xml" title="RSS .92" href="<?php bloginfo('rss_url'); ?>" />
	<link rel="alternate" type="application/atom+xml" title="Atom 1.0" href="<?php bloginfo('atom_url'); ?>" />
 
        <link rel="shortcut icon" href="/favicon1.bmp" type="image/x-icon" />
	<link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" />
	<?php wp_get_archives('type=monthly&format=link'); ?>
	<?php //comments_popup_script(); // off by default ?>
	<?php wp_head(); ?>
</head>
 
<body>
<!-- Here's where the top of the web page is 
built by WordPress.  You can find explanations 
of functions like "bloginfo" on
http://codex.wordpress.org/ -->
<div id="header">
	<div class="img1"><div class="img2">
		<h1><a href="<?php bloginfo('url'); ?>/" target="_self"><?php bloginfo('name'); ?></a></h1>
		<h4><?php bloginfo('description'); ?></h4>
		<div class="search">
			<?php include (TEMPLATEPATH . '/searchform.php'); ?>
		</div>
		<div class="clear"></div>
	</div></div>
</div>
<!-- end display header, posts and pages follow -->

Website In A Weekend runs the Thesis theme, which has it’s own “hooks.” In Thesis, the architecture of header.php is the same, but the coding is more difficult to understand without understanding how Thesis does it’s magic.

[Update 12/24/2009: Here's an excellent article on the head element from Sirius Graphix: "html: keep a good head on your shoulders."]

[Update 12/31/2009: Another superb article from Sirius Graphix: html: getting inside your head.

Any questions? Drop Dr WordPress an email!

How to Add favicon.ico to WordPress For Professional Appearance

March 11, 2009 By Dave Doolin

(Reading time: 5 – 8 minutes)

Favicon.ico: Who, What, Where, When, Why and How

Look up in URL field of your web browser, or on the browser tab if you have a tabbed browser like Firefox or Internet Explorer… you will quite likely see a little icon, called a “favicon.” It looks a little this this:

favicon on tab

Favicons are low-cost, easy to make and install, and provide one of those critical necessary details separating websites that mean business from website that don’t.

>>>NOTE: Check out Chapter 1 of the new EBook we’re creating — Fastest WordPress Graphics Using Photoshop: 7 Killer Tutorials for $17. It’s all about creating favicons for your WordPress website, and we broke it down into simple, easy steps so that anyone could do it!

Favicons provide many other benefits:

Your readers will be able to find your web pages, easily, even when they have many browser windows or tabs open at once.
Your bookmarks and favorites folder usually show favicons next to stored web site links, again providing a fast visual cue for your readers to return to your web site.
Favicons provide visual reinforcement for your brand. You can make a favicon representation of your logo for added reinforcement.

Given how easy it is to add a favicon, you don’t have an excuse for NOT having one on your web site!

Hey! You're in the middle of the Website In A Weekend eCourse. Learn how to create and operate a complete WordPress-based website in a single weekend. Start here: Website In A Weekend: Friday Evening - Off to the Races. (If you already have a blog... "audit" the eCourse... you'll find plenty to do.)

Creating a favicon

There are many ways to create one of these little images. You can take an image and just scale it down to 16 x 16 pixels in Microsoft Paint (Go ahead, try it, see how it works). You can fire up Adobe PhotoShop or Gimp and create something truly professional. You can even upload an image to a website and have one created for you. You won’t have much control over how it turns out though, other than finding an original image that works well. For example, go try out favicon.cc. Unless your image is really, really simple, automatic favicon generation isn’t likely to produce professional looking icons.

(As it turns out, Website-In-A-Weekend is working a small, secret project that is going to help you understand everything you need to know about creating your own favicon, or what you need to understand if you want a graphics professional to create a favicon for you. Watch this space (or sign up to the Website-In-A-Weekend newsletter, top right corner), and I’ll update you when we’re ready to unveil. UPDATE: See note above or banner below for EBook on creating favicon.ico images for WordPress!)

Adding the favicon to your blog

There’s two ways to add a favicon to your blog. One is to use a WordPress plugin to add the icon and handle inserting the correct code into your theme’s header. The other is to manually upload the favicon directly to your website using FTP, and make a simple edit to your header.php file… easy to do from the administrator web page: “Appearance > Editor.” Let’s take a look at manual procedure first. (BTW, at some point, you will need to more than you want to know about the guts of WordPress, and doing these simple tasks of installing favicons and copyright notices helps you get comfortable for when it really matters.)

Since we recommend installing your WordPress favicon manually, let’s look at that first:

FTP the favicon.ico to your web root directory. This might be /public_html, it might be another directory, depending on how your WordPress installation is configured.
Add to theme header.php:
Reload blog page in browser, clearing the browser cache if necessary.

Other image types can be used. For example, here’s how to specify a png image for a favicon:

Note that this favicon is directed to the WordPress theme installation directory. Feel free to install the favicon into your theme directory, but understand that this exposes information about your site structure in the favicon path to malicious hackers.

You can also name the icon file anything you want, as long as you tell the browser. Here’s how Edgewall’s Trac system specifies the name of the favicon as “trac.ico”:

Remember to clear your cache when you reload your web page to examine your new favicon (CTRL – F5 in Firefox).

WordPress favicon plugins

Plugins… we did some investigation, here’s what we found out: There are surprisingly few plugins for favicons, 3-5, with varying capabilities.
Of the plugins we did find:

Many of them required you to manually upload the favicon anyway.
At least one required the favicon to be installed in your web root directory instead of your WordPress directory.
Others required you to link to a favicon already hosted on a web server. Now, this could be your web server, and you could upload it using the WordPress media tools, but that’s almost as much work as doing it manually!

Here’s a list of what we found using both Google and the plugin browser in WordPress “Plugins » Add New”:

Favicon Manager WordPress Plugin from Digital Ramble.
Admin Favicon by John Kolbert.
MaxBlogPress Favicon By MaxBlogPress.
Shockingly Simple Favicon By Matias S

We’re sticking with manually uploading favicons for now. And make sure to check out Chapter 1 of our new EBook “Fastest WordPress Graphics Using Photoshop: 7 Killer Tutorials for $17″

[sniplet bookblurb1]

More information

Dig deeper, here are some links:

Lanna Wuthenow of My Internet Stuff gives us a great “how to” for WordPress favicons.
Fred Peters from Newest on the Net provides another really good “how to” for adding favicons to WordPress.