Feature
Post

Category
Code


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'); ?>&nbsp;<?php bloginfo('description'); } else { wp_title('&nbsp;'); ?>&nbsp;by&nbsp;<? 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>  
<!-- header END -->

<!-- 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'); ?>&nbsp;<?php bloginfo('description'); } else { wp_title('&nbsp;'); ?>&nbsp;by&nbsp;<? 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.


  1. By Nathan Rice posted on December 10, 2007 at 4:56 pm
    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

  2. By Nathan Rice posted on December 10, 2007 at 4:59 pm
    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

  3. By hellyeahdude.com posted on December 11, 2007 at 1:23 am
    Want an avatar? Get a gravatar! • You can link to this comment

    a little basic for my taste, but its good

  4. By davidcubed posted on December 11, 2007 at 10:26 am
    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.

  5. By Jeff_ posted on December 11, 2007 at 5:54 pm
    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)

  6. By Danny Foo posted on December 13, 2007 at 7:15 am
    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.

  7. By Jermayn Parker posted on December 13, 2007 at 9:28 pm
    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.

  8. By Daniel Genser posted on December 28, 2007 at 6:48 am
    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!

  9. By Frank Richard posted on September 18, 2008 at 9:30 pm
    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!

  10. By Articles Book posted on May 25, 2009 at 8:55 am
    Want an avatar? Get a gravatar! • You can link to this comment

    Hi,

    can anybody send me a wordpress theme customization pdf file link, where content guide me how to customize wordpress.

    Thnaks

  11. Trackbacknuqueue | d-sign » Benutzerfreundliche WP-Themes» Making your themes “portable” » The 449What’s That Code in My WordPress Header? | Chipped PolishBenutzerfreundliche WP-Themes - D-Sign WeblogWordPress Developer’s Toolbox | rafdesignWordPress Developer’s Toolbox - 山歌好比春江水逐浪·网络 » Blog Archive » WordPress 开发者工具箱- WordPress 开发者工具箱(上)【联讯网】cssframework » WordPress 开发者工具箱【完整版】135+ Ultimate Round-Up of Wordpress Tutorials | About Us | instantShift我想网 » Blog Archive » WordPress 开发者工具箱(上)Wordpress o verdadeiro guia | Mais Tráfego250 Wordpress Tutorials135+ Ultimate Wordpress Tutorials30 WordPress Development Tutorials | Pro Blog Design30 WordPress Development Tutorials at BLOG GRAPHIC DESIGN30 WordPress Development Tutorials at BLOG GRAPHIC DESIGN30 WordPress Development Tutorials | SEO & Web Design250 Wordpress Tutoriels et liens pour tous | Guppytrucs Freeware30 WordPress Development Tutorials | Pro Blog Design – LearningismWordPress Developer’s Toolbox | 9Tricks.Com - Tips - Tricks - Tutorials  WordPress Developer’s Toolbox  by Oshoamy