Problem Solving the WordPress Header

Tips Apply to the Full Version of WordPress.

In order to learn more about WordPress, I started hanging out in the WordPress Codex and on the WordPress Support Forum. Over time, as I became more familiar with the inner workings of WordPress and read much of the documentation in the WordPress Codex, I started answering a few questions in the Forum. Part of giving back to the WordPress Community.

After a while, I found that many of the same questions were being asked over and over again, especially related to the WordPress Theme Header. So I thought I would tackle some of the questions and the answers here.

The main focal point for most websites and blogs, the header, seems to be of great importance and fascination to many users. Along with that fascination, they come up with a lot of problems with their headers in WordPress.

There is an article in the WordPress Codex that tackles just about all you could want to know about designing, styling, and figuring out your WordPress header called Designing Headers. It takes you into the two main versions of the header’s tags and structure, their styles, and the template tags used within them. It features examples of some of the award winning headers from recent WordPress Theme contests, and shows you how to change the header image or header art to better suit your site’s needs.

Here are a few of the most common questions people ask about their WordPress headers.

What are those strange code things in my WordPress header?

Inside the WordPress header of your Theme’s template files are strange looking code that WordPress uses to generate information you provide in your Administration Panels. These are examples of template tags.

<a href="<?php bloginfo('url'); ?>"><?php bloginfo('name'); ?></a>
<?php bloginfo('description'); ?>

The bloginfo() is one of the busiest template tags in WordPress. It features a wide selection of parameters to get different information from your database. In this instance, it pulls information you set in your Administration Panels for the URL or address of the website and puts it in a link, and then uses the “name” of the site as set it in the Administration Panels for the title of the site. The parameter “description” gets the website description and adds that to your header content.

To change the text in these, go to Options > General and change the information in the forum and click the Update button at the bottom of the panel. To change the structure of the tags and HTML code in the template page, open your Theme’s header.php in a text only editor and look for this code and make your changes there.

How Do I Change the WordPress Header Image?

To change the image in the header, the style references are found in the style.css style sheet file or in the head of the header.php template file. Look there for a reference to header, headerimage, or h1 and change the background image reference to the graphic image file you want to replace it.

If you are using a Kubrick/Default WordPress based Theme, a utility tool called Kubrickr changes the header image quickly and easily for you.

How Do I Center My WordPress Header Title

Each WordPress Theme positions the text within the header in a different way, often moving it around to accommodate the header art within it. To position the text to the right, left or center, find the h1 styles and add or change the text-align:right, text-align:left, or text-align:center.

Sometimes you want more control over the positioning of the title. You can use CSS positioning properties to move the text around within your header. The positions are left, right, top, bottom, and vertical-align.

To move the h1 to the upper right corner of the header, you might use:

h1 { position: absolute;
    top: 10px;
    right: 20px
    }

Experiment with the different positions to find the right placement for the text.

How Do I Add/Eliminate the Description in My WordPress Header

Many WordPress Themes include the blog or site description in the header. To remove or add the description, open the header.php template file.

To add the description to the header, below the h1 tag, add:

<div id="description"><?php bloginfo('description'); ?></div >

To remove it, find the above tag and delete it.

To style your description, add #description to your style.css style sheet and add the styles you want.

Related Articles

• Creating Effective, Attention-Getting Headlines and Titles
• Future of Header Art in WordPress 1.6?
• New Kubrick Header Switcher for WordPress 1.6
• Customizing wordpress.com Default Theme Headers
• Designing WordPress Themes
• Designing WordPress Themes for the Public
• WordPress Tips, Tricks and Techniques

---

Site Search Tags: header, wordpress header, header art, headline, masthead, blog header, web design, designing the header
Copyright Lorelle VanFossen, member of the 9Rules Network