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:
[php]

<?php if ( is_home() ) { ?><? bloginfo('name'); ?> <?php bloginfo('description'); } else { wp_title(' '); ?> by <? bloginfo('name'); } ?>

” rel=”stylesheet” type=”text/css” />

[/php]

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.

[php]<?php if ( is_home() ) { ?><? bloginfo('name'); ?> <?php bloginfo('description'); } else { wp_title(' '); ?> by <? bloginfo('name'); } ?>[/php]

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.
[php] /images/coolgraphic.jpg” />
[/php]

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:
[php] WordPress Codex
.

[php]

[/php]

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.

[php]

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