Skip to main content

Ivan Teoh

Something personal yet public

WordPress Theme Development 3 - Header

Normally, header.php will start with html doctype declaration, and xhtml namespace. By default, WordPress theme is using XHTML 1.0 Transitional. WordPress function, language_attributes();, will display the language attributes for the html tag. If you want your site supporting XFN (XHTML Friends Network), you can add profile="http://gmpg.org/xfn/11" for the header tag.

Inside header tag, you will have title, of course, content type and description meta tags, links to style sheet, blog RSS feed, comments RSS feeds and pingback. Action hook template tag, wp_head();, should be added too in order to support other WordPress plugin that you decided to install. Other WordPress plugin might add JavaScript in your header tag by calling wp_head();.

Here come to body tag, you might want to display title and desciption on every page in your web site. The header.php is the right place to put all this information. Following is the example header.php code that you can reference.

53-header.php (Source)

<?php
/**
 * @package WordPress
 * @subpackage Your_Theme
 */
?>
<!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" <?php language_attributes(); ?>>
<head profile="http://gmpg.org/xfn/11">
    <title><?php wp_title('&laquo;', true, 'right'); ?>
      <?php bloginfo('name'); ?></title>

    <meta http-equiv="Content-Type" content="<?php bloginfo('html_type'); ?>;
      charset=<?php bloginfo('charset'); ?>" />
    <meta name="description" content="<?php bloginfo('name'); _e(' - ');
        if ( is_single() ) {
            single_post_title('', true);
        } else {
            bloginfo('description');
        } ?>" />

    <link rel="stylesheet" type="text/css" href="<?php
      bloginfo('stylesheet_url'); ?>"  media="screen" />
    <link rel="alternate" type="application/rss+xml" title="<?php
      bloginfo('name'); ?> Blog RSS Feed" href="<?php
      bloginfo('rss2_url'); ?>" />
    <link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" />

    <?php wp_head(); ?>
</head>
<body>
    <h1><a href="<?php bloginfo('url'); ?>/"><?php bloginfo('name'); ?></a></h1>
    <p><?php bloginfo('description'); ?></p>
<!-- end header -->

If you see the example above, there is a condition in meta tag for description. It is showing different description on single post compare to the rest. In single post, it will describe the post title instead of the site description.

By default, WordPress has build-in feeds for blog web site. I choose RSS 2.0 feed. There are others you can choose from, but this is the common one.

Comments

Comments powered by Disqus