Problem Solving the WordPress Header

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.

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.

If you are using Kubrick for your WordPress Theme, simply download and run the Kubricker Header Art utility and within seconds it’s fixed to whatever you tell it you want it to be.

To change it manually, as the article explains:

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.

This requires access to your stylesheet and the use of an FTP program and text editor to change the name of the file. If you are using Windows, you can use Notepad for a quick change like this. Or, if the file is writable, you can also use the Theme Editor in WordPress under Presentation to make your changes.

Hi lorelle,
thanks for all of this.
I have done all of these suggestions for changing manually. On the wordpress admin panel it shows the jpg I have loaded, but on my site, I still get the blue (although it looks like has resized to the photo, which was slightly oversized. I have since recut it).

I have tried kubricker, but I do not see my photo. It probably needs some time to index. Is there a quick fix for this?

1. Have you checked to make sure that you’ve uploaded the image and checked the file path in your header image reference? One keystroke and the link is broken and the image not found. Try using an absolute link rather than a relative link (starts with http:// and your address to the image rather than /files/image.gif).

2. Do a FULL refresh. In Firefox, Ctrl+Shift+R and in IE, hold down the shift key and hit the REFRESH button on the toolbar. You might have to click to another page and then click back to try again.

Other than that, it’s just a matter of checking code to see if you missed a letter. It should work.

Oh, and as noted above, any Theme based upon the Kubrick or Default WordPress Theme will have the header styles stored in the header.php template file.

hey lorelle, thanks for the input. definately none of these. I renamed my image, and thus, it came up for preview…the url was recognized. In the theme editor, the only url reference I could find for this image was in the “stylesheet” portion of the editor, nothing in the “header”.The only url I found was images/kubrickbg.jpg and images/kubrickbgwide.jpg anyway.
I do not see a jpeg image in that folder for a blue heading. It continues to show color references in the header color. If I could get rid of that, I think I might have my image behind it.

As I mentioned before, you have two places to look for the header image. On your blog, it’s embedded in the header.php head section and in the style.css file. Both work together to create the heading, a horrid layout in the Default Theme.

In your case, you made the changes but you forgot a few things in the header.php styles:

First, great tips and tricks. I am in the process of modifying and improving my Blog in WordPress. I have been searching for a way to create ‘hotspots’ within a header graphic, like you can do in so many WYSIWYG HTML editors. Is this do’able?

What you are talking about, I believe, is called an “image map”. There are free programs that will create those for you and many graphics programs have the function built in. You can check the following for more information:

For individual help, please try the WordPress Support Forum. The overlapping issue could be anything, including padding or problems with the DIV tags – not the tags themselves but the styles within them. Without a specific site to look at, I can’t help you, but the WordPress Support Forum can, if the issue is with a WordPress blog, but they will need the blog’s URL to help you resolve this issue.

Hi Lorelle,
I have been reading your answers to these questions. Very nice. I have a question you might be able to answer for me. If there is a /images/header_1.jpg,/images/header_2.jpg and so on up to 5. Does this mean that the images are layered? Hope to hear from you. Thank you Lorelle.

Honestly, it depends upon how they are styled and what styles are associated with each header, if there are any. Images tend to push each other around on a web page, vying for space. This causes a lot of problems if they aren’t styled to float and position themselves through the stylesheet instructions.

However, if the images are in the background of a web page design, rather, the images are called as background images within an HTML container, they can be layered as the browser doesn’t recognize them as competing for space on a web page.

Either way, all images within a design must be styled, so I wouldn’t know how these particular images are styled, layered or otherwise. Check the stylesheet for the instructions associated with the images and the container the images are within to be sure.

you are awesome lorelle! So … I have just switched to my own domain (washwords.com) and I have my first question for you… ummm, so the theme I downloaded (successfully, yay) has a series of page tabs. How do I change them/make them functional to my own real pages. sorry to be such a noob. your blog is incredibly helpful and I will keep reading it. just feeling a tad overwhelmed/scared at present.

Do you want to change the design or rename the Page tabs to your own names? If the latter, simply edit the Page in the Manage > Pages panel and change the name and the page-slug to whatever you want. Take care that you don’t do something silly like rename Contact to “Find Me” or something not user friendly. Keep traditional names like About, Contact, and such. If you don’t want the Page, delete it. It will disappear from the menu automatically.

I’m new to WP and been reading your recommended ‘Designing Headers’ article to solve my problem. Just can’t work out what to do. My navigational menu is pushed too far up the top of my header such that it is only partly visible on my website. Would you know what change I need to make, to make it fully visible?
Many thanks
Kamil

Help like this comes from the WordPress Support Forum, but I took a look and whatever is wrong appears solved. Web design uses containers with margins and padding and float positioning. A few pixels too large or off and the containers get pushed around all over the place. It’s just trial and error for beginners to figure out what to add and subtract from the width, padding, and margins of the containers to put them into place. Good luck.

I did just what you said at the top of the page. In fact I made a header and named it kubrickheader.jpg and jst replaced the old image. But the old image is still there just moved down and to the right with the new one showing behind it. How do I get rid of the old one?

For specific free advice like this, you need to go to the WordPress Support Forums where you can get personal attention and help for resolving these issues. This is a design issue and not really a specific WordPress issue, but you will find plenty of help there. Good luck and thanks.

Hi. I want to put a flash menu on my template (Aspire theme). But everything I do on header.php mess with the layout. If I change a single letter anywhere on code, the layout cracks a little bit on the top.

No, I cannot help you. I do not believe that Flash is a good replacement for web design elements. Many people can’t see it, use it, or have Flash turned off. Flash currently does not meet web standards for accessibility.

Are you trying to turn your header into an image map? Then add the header as a an image map in your header section of the Theme replacing the current header art either in the Theme or in the stylesheet. Just remove the header image from your stylesheet and place the image map code from Gimp or where ever in your header.php template file of your WordPress Theme. You’ll have to do some architecture rearrangements to accommodate the different size, if there is a difference, but it should work, though used rarely.

Thanks for having this information here and answering all of these questions it is really nice to give back to the community keep up the great work.

I have been struggling all day to figure out how to add a different banner to each page/category without creating a new blog for each section. I tried putting in the code that was on the Conditional Tags page but I keep getting a parse error. Do you have or know any good pages that might help me figure this out I have 6 banners for my site that go into my header I created multiple headercontacts.php ect but still not working. Thanks again

I’m sorry you are having problems with the use of the conditional tags, but that is the only solution. See Conditional Tags in the WordPress Codex for specifics. You have problem messed up some minor detail in the conditional tag.

I also recommend that if you are using that many banners, which I presume are ads, that you use a WordPress Plugin that deals with monetization and advertising, such as some of the ones listed in Monetizing WordPress Plugins.

Thanks Lorelle , no we are a marketing firm so the banners are more attention grabbers that give a visual to what the page is about it separates the different sections and drives home what we want our visitor to see.

Hello! Glad I found you! I am new to wordpress and css/ div. I am not complete dummy tho. I have been trying to fix my header, google banner and some links to my header area. I have really given it my best shot. Problem I have is finding correct code and where to place it, also if it should go in 2 places like style.css and header. I tried good old fashion table with little success. Every few downloads the google banner moves down a line under the header logo and I always want it to the right of it.

I’m traveling and recommend that you will get a faster reply if the issue is specific to WordPress from the WordPress Support Forum. There are a lot of design problems with different browsers, and if the Theme author can’t help you, the Support Forums might be able to. If this is the commercial Revolution Theme, I can’t help you. You will have to get help from the Theme author of their forum. You might want to start by validating the code to see if messing with the Theme left behind an error or code missing. Good luck.

I am so new to WordPress and PHP. I activated the Kubrick theme for my header in admin panel (…./wordpress/wp-admin). Only the headermysite (…/wordpress) is updated, not the admin panel which still shows the classic theme. Do you have any ideas? Thanks

First, let me say thanks for taking time out of your busy day(s) to help beginners like myself. My question is: In this tag: <a href="”>

is (‘name’) the name we are to insert our new Header?

I have been researching how to change the Header for two days straight and I’m still not sure how to do it. I also went to the Kubrick site you and others have suggested, but it seems, well…strange. It asks the user to put in a descriptive word. I couldn’t find a place to download the tool.

I just need to know what tag I need and I think I can insert it into the Header editor. Do I need to delete the original Header or can I try to insert where a ‘h’, ‘header’, or something like that is? I tried inserting my Header which is: experience fellowship…but it didn’t work. Is there a simple tag I can copy to insert?

That is a link. Without more information on what you are doing, I can’t help you. The “name” is put there by default by WordPress. You don’t have to do anything. I recommend you do not use the Kubrick site and try another Theme as it is way to complicated to do simple things. That should resolve your issue. Or try the new WordPress Default Theme coming in WordPress 3.0. This Theme is more of a headache than useful when it comes to changing the header art.

Replace older posts with a page that says “no thank you?” I don’t understand. Are you talking about deleting a post? Then delete it when you are ready. Are you talking about comments? You can now set comments to close after a certain amount of days on WordPress.com, though I have never understood that. I still get comments on old posts and they still have value. You just left a comment on one. Is this what you are looking for?

I would like to remove the header entirely from my posts, which are sorted by category. When a viewer selects a category to view, I would like this fill the page, not fall in the lower half below the header. My Theme is 2011. Can I edit the “post” php file in the editor and remove the “get header” line?

Your comment site lists WordPress.com. If that is your main blog, if you pay extra to customize the look of your site, you can set the header to not display on category pageviews in the CSS without editing any core Theme code. If your site is self hosted, you can do the same. Removal of the header in the post.php file of the Theme will not help. In a child Theme, either use CSS to make the changes or add a conditional statement.

However, if the header area changes when someone clicks through to your category pages, it can be distracting. If you get a majority of your unique traffic (first time visitors) to your category pages, you are missing out on a chance to inform them with your header branding and blog title. Removing the header could be something you want to do that doesn’t serve your readers. Consider resizing the header art instead.

I have a question concerning my php4 file to my website. It seems as though every day a script keeps getting added to my php file. When I delete the file, it simply gets added back after several hours.

If it is a WordPress issue, please ask in the WordPress Support Forum. WordPress no longer supports any version of PHP below 5.2. It looks like a hack but I don’t know. The folks in the WordPress Support Forum may be able to help.

Hi my name is joel and I’m trying to put together a half way decent e-commerce sire using wordpress and i have taught myself everything so far so asking these type of questions are the only solution for me to accomplish my goal. The theme I’m using is the woo themes, sentient theme. Now this theme has the site name and description that I would like to leave for the time being as I am having a logo graphic made for the top left corner of the website. But my question today is concerning a header that I would like to input into the theme so it shows up on every page.
I have graphic made that would fit perfectly to the left of the site name and description. I think I found the part of the theme.php file that I need to alter ..I made a copy of the file in case I mess it up just need to know what adjustments to the file I need to make to get the result I’m looking for..if anyone can help i would appreciate it. Here is the part of the theme.php that I’ve been looking at…maybe Im wrong and if you need a glimpse of a different part of that file i will copy and paste it
[Removed due to lack of readability]

As you are using a Woo Theme, you will need to contact them for support. You must also not directly edit the original Theme. You must create a Child Theme to protect the original for future updates. They will be able to help you with specifics.

My plugin updater has stopped working. When I click on Dashboard > Updates I’m told all my plugins are up to date, but they aren’t. My plugin page shows Jetpack, for example, as version 2.0.4 and the latest version is 2.1.2. The only way I can update to the latest version is to delete the plugin and re-install it. I have several plugins like this. I tried re-installing WordPress but it had no effect.

I have been trying to remove the header echo on each page. I have gone to several forums, asked many people, and to no avail, the repeat is still there. The spacing on the page is also off; I would like to move the flyer up a couple of inches to format it better with the rest of the sight, as well.. If anyone can assist me, it would be greatly appreciated. Thanks and have a great day!

Please direct your question to the designer of your WordPress Theme or the WordPress Support Forum. Someone will be able to help you there. Or check with your local WordPress Meetup group to find someone who can help you close to you. Thanks.

I am desperately looking for help, in my web radio wordpress theme, there is a fixed player that plays radio broadcasts continuously while you surf.
Now, the header has the classic ”
“, BUT many plugins only work if I take off COMPLETELY ” “” (even only ).
I do not know what to do, if you have an idea?

8 Trackbacks/Pingbacks

[…] The Default WordPress Theme, aka Kubrick, is an amazing piece of web page design. It pushed the envelope on what a web page could do using WordPress. I’m not here to debate whether or not the way Kubrick was developed right or wrong, but I do have tips for dealing with some of its eccentricities that causes endless questions on the WordPress Forum. […]

[…] with CSS, XHTML, and PHP. If you are using a Kubrick/Default based WordPress Theme, there is even a utility that will help you change it fast and easy. Don’t like the background color, that’s an easy fix. Want to change the fonts and […]