Client Friendly WordPress Themes: Header.php
So today I wanted to take some time to talk about how you can make a WordPress theme more friendly for your clients, friends and general distribution by taking advantage of the template system built in to WordPress.
We are going to start with the header, an often misunderstood part of the WordPress theme. The part of the theme that can do a fair bit of the heavy lifting in a theme.
Here is the full text of the code I am going to dissect for you today:
-
<!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">
-
-
<head>
-
-
<title><?php if ( is_home() ) { ?><? bloginfo('name'); ?> <?php bloginfo('description'); } else { wp_title(' '); ?> by <? bloginfo('name'); } ?></title>
-
-
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
-
-
<link rel="shorcut icon" type="image/x-ico" href="<?php bloginfo('template_url'); ?>/favicon.ico" />
-
-
<link href="<?php bloginfo('stylesheet_url'); ?>" rel="stylesheet" type="text/css" />
-
-
<script type="text/javascript" src="<?php bloginfo('template_url'); ?>/javascript/imghover.js"> </script>
-
-
<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'); ?>" />
-
-
<?php wp_head(); ?>
-
</head>
-
<body>
-
-
<!-- header START -->
-
<div class="Header">
-
<h1><a href="<?php echo get_option('home'); ?>/"><?php bloginfo('name'); ?></a></h1>
-
<div class="Desc"><?php bloginfo('description'); ?></div>
-
-
<!-- container START -->
-
<div class="Container">
The first thing that is relevant to WordPress theme authors is the title tag. Most people, by default just put the name of their blog, and a catch phrase as their title and while this is all well and good, for search engine optimization purposes, you might want to go another route. Sure, there are WordPress plugins that can help you add more optimizations to your blog, but I don't like to have to rely on plugins, unless I have to, especially when I am going to be giving a theme to someone else.
-
<title><?php if ( is_home() ) { ?><? bloginfo('name'); ?> <?php bloginfo('description'); } else { wp_title(' '); ?> by <? bloginfo('name'); } ?></title>
What I have done here is to basically say, "if we are on the home page, show the blog's name, and description, otherwise show the title of the current article and then the title of the blog." While this is not perfect, it is a huge step up from just showing the blog's name, and description on every page, and every article.
The bloginfo('name') and bloginfo('description') come from the WordPress administration under, the Options -> General panel in the sections that say, Blog Title and Tag line.
The next line of note includes another reference to bloginfo, but this time asking for the template URL.
-
<link rel="shorcut icon" type="image/x-ico" href="<?php bloginfo('template_url'); ?>/favicon.ico" />
This allows us to easily grab things from the themes folder, even if the user renames it for whatever reason. You will see this referenced in a few places in my WordPress themes, including the rare times I want to call a graphic without using CSS.
-
<img src="<?php bloginfo('template_url'); ?>/images/coolgraphic.jpg" />
The next relevant line is dealing with the stylesheet. WordPress looks for style.css when using their templating code, so make sure your style sheet is appropriately named.
To reference it, just use the following code:
-
<link href="<?php bloginfo('stylesheet_url'); ?>" rel="stylesheet" type="text/css" />
Next, we have the RSS code. This will allow certain browsers like Firefox, or websites like Bloglines, to find the RSS feed you want associated with the site.
Each type of feed that WordPress creates must be linked to if you want them to appear. Some people pick and choose which formats they like and display them, but I display the two most common: RSS 0.92 and RSS 2.0.
Here is the code to do that:
-
<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'); ?>" />
You will notice that almost everything I have mentioned thus far has made use of the very useful bloginfo function, and if you want to learn more about it, I suggest reading the WordPress Codex.
-
<?php wp_head(); ?>
If you want your theme to work with plugins that exist, then adding in the wp_head call is very important. This little function allows a vast number of WordPress plugins to add all sorts of code to the top of the theme. I have seen far too many of them not include it, and thus a huge number of users complained.
-
<h1><a href="<?php echo get_option('home'); ?>/"><?php bloginfo('name'); ?></a></h1>
The above code includes the get_option('home') function which is just one of the ways of linking back to the main page of a blog. I use this option to link to specific pages as well, though I don't always recommend it.
With this information, and the WordPress Codex, you too can start to make your WordPress theme work well, no matter who uploads it.
Idea for this post by Chris Garrett of the449.
Want an avatar? Get a gravatar! • You can link to this comment
You didn’t explain what the javascript file (imghover.js) was for? Is that important?
Nathan
Want an avatar? Get a gravatar! • You can link to this comment
Also,
Don’t forget wp_meta. Some plugins rely on this hook to add meta data to the top of the header.php file (although it could be argued that they should use wp_head).
It should also be added that the wp_head hook/template tag should be the last thing before the </head> tag so that if a stylesheet is linked via the wp_head hook will override default styles.
Nathan
Want an avatar? Get a gravatar! • You can link to this comment
a little basic for my taste, but its good
Want an avatar? Get a gravatar! • You can link to this comment
Nathan - I left that line in to show how to reference the JavaScript file with template_url, imghover is just something our themes use to do hover effects on certain graphics like the comment button and stuff.
And good call on wp_meta, though I agree, they should be using wp_head.
As for its position, I have always done that automatically. I guess I assumed it was implied. Thanks again.
Want an avatar? Get a gravatar! • You can link to this comment
I agree with hellyeahdude on this one.. seems a little basic for a developer’s lounge. It is good info, yes, but it would be great to get something a wee bit more advanced once in awhile, lest we all get bored and vanish
(Not that we would)
Want an avatar? Get a gravatar! • You can link to this comment
All the above are simple enhancements. Which makes it brilliant!
I particularly liked the one about having a custom title for the homepage then different ones for the rest.
Want an avatar? Get a gravatar! • You can link to this comment
Yes it may be basic but I personally have not seen many articles or documentation about this.
Want an avatar? Get a gravatar! • You can link to this comment
The template_url tag is a life saver! I’d somehow missed that in documentation for quite some time and have always been a little frustrated with was seemed to be a gap in planning for custom templates. I hated needing to hard code absolute paths for items that should be able to be dynamically called via a bloginfo call. Well - now I can! Thanks!
Want an avatar? Get a gravatar! • You can link to this comment
Seems a good way to make header.php neat and client friendly, thanks for sharing!