Skip navigation

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.

<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


Site Search Tags: , , , , , , ,
Copyright Lorelle VanFossen, member of the 9Rules Network

Member of the 9Rules Blogging Network

55 Comments

  1. Posted June 13, 2006 at 8:43 am | Permalink

    I am new to the WordPress world and definitely new to anything PHP.

    My problem is probably *Uber* simple – how many times have you heard that before, BUT I don’t know what to do.

    I just wanna change the Header Image to an image I’ve already made in Photoshop.

    I have the standard (I guess it’s called Kubrick – Blue header).

    So I go to the header.PHP file and I don’t see anywhere there where it reads .img or .jpg or .gif or even kubrick.

    I’ve wanted to change this for about a 3 months now.

    Help – help – help …
    Thanks
    Shai

  2. Posted June 13, 2006 at 9:16 am | Permalink

    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.

  3. Posted September 21, 2006 at 1:22 pm | Permalink

    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?

    thanks,
    Nicholas

  4. Posted September 21, 2006 at 2:40 pm | Permalink

    A couple of possible issues.

    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.

  5. Posted September 21, 2006 at 4:43 pm | Permalink

    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.

  6. Posted September 21, 2006 at 6:09 pm | Permalink

    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:

    #header { background: #73a0c5 url('images/kubrickheader') no-repeat bottom center; }

    All graphics must end in an extension which identifies the “type” of graphic such as “kubrickheader.jpg”. You don’t have one. The color comes in that section, too.

    Add the jpg and the image should show. Not to say I told you so, but every letter counts. ;-)

    And honestly, if you want to mess with the layout and look of your WordPress blog, start with another Theme. It’s MUCH easier.

  7. Posted September 24, 2006 at 9:54 am | Permalink

    I’m slow on the uptake. You are an awesome resource, thanks lorelle!

  8. Posted April 21, 2007 at 6:54 pm | Permalink

    Thank you. I just finished putting up my new header image using your information.

    Regards,

    Mr. Sporty

  9. Posted June 8, 2007 at 1:10 pm | Permalink

    Hi Lorelle,

    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?

    Thanks

    M

  10. Posted June 8, 2007 at 11:46 pm | Permalink

    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:

    Ajax Image Map Creator – free
    Lissa explains: How do I make an image map?
    DTP-AUS – About Image Maps – technical explanation

    That will get you started. Then just put that code in your header instead of what you have or in addition to, and you are set.

  11. conantheroparian
    Posted March 21, 2008 at 11:02 am | Permalink

    Hey there, I have an issue. I’ve put the header in but it’s over lapping a lot of the text. How do I move the text down the page? Is it a matter of padding or div tags? Thanks

  12. Posted March 21, 2008 at 10:29 pm | Permalink

    @ conantheroparian:

    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.

  13. Steven Gibbs
    Posted March 26, 2008 at 4:19 pm | Permalink

    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.

  14. Posted March 26, 2008 at 6:04 pm | Permalink

    @ Steven Gibbs:

    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.

  15. Posted March 29, 2008 at 12:39 pm | Permalink

    Useful article but I have no problem with Default WordPress theme. From my blog http://www.presentforblogger.com your readers can download Headers for Default Default WordPress theme.

  16. Scott
    Posted May 5, 2008 at 1:31 pm | Permalink

    Awesome! Thanks, made my job easy

  17. washwords
    Posted July 8, 2008 at 11:40 pm | Permalink

    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.

  18. Posted July 9, 2008 at 8:02 am | Permalink

    @ washwords:

    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.

    Good luck.

  19. Posted July 27, 2008 at 3:38 am | Permalink

    Hello Lorelle

    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

  20. Posted July 27, 2008 at 8:57 am | Permalink

    @ 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.

  21. Posted July 27, 2008 at 7:37 pm | Permalink

    Thank you Lorelle.

  22. Posted September 16, 2008 at 3:27 pm | Permalink

    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?

    Thanks

  23. Posted September 16, 2008 at 10:02 pm | Permalink

    @ Brett:

    Make sure you get rid of the old image from within your WordPress Theme template file. At a minimum, rename it “kubrickheaderold.jpg” and see if it still appears.

    You can get the help you need faster and more personal in the WordPress Support Forums, too.

  24. Posted September 26, 2008 at 5:19 pm | Permalink

    Hi!

    I hope you can help. I’m just tring to position the text in the description of the header.

    My code in the style.css reads:

    #header { width: 977px; height: 196px; background: #252525 url(images/header.jpg) no-repeat left top; }
    #header .blogtitle { width: auto; height: 118px; }
    #header h1 { padding: 20px 0 0 30px; }
    #header h1 a { color: #f7f7f7; text-decoration: none; }
    span.description { color: #999; padding: 0 0 0 0; float: right; font-size: 10px; }

    Can you tell me what aspects I change to lift my description up higher in my header?

    Thanks.

  25. Posted October 9, 2008 at 3:24 pm | Permalink

    Hi Lorelle,

    Firstly you are ding a great job!
    Just a quick one hopefully, my drop down menu buttons are overlapping my header graphic any advice would be grateful.

    Thanks

  26. Posted October 10, 2008 at 9:30 am | Permalink

    @ kees van der Wiele:

    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.

  27. Posted October 16, 2008 at 2:23 pm | Permalink

    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.

    Can you help me?

  28. Posted October 16, 2008 at 7:31 pm | Permalink

    @ Silvio:

    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.

  29. Posted October 18, 2008 at 11:16 pm | Permalink

    Hello, may I ask how to use an Image Map in wordpress, I can make one using Gimp, but I have no idea how to then make it work with my header image. Thank You!

  30. Posted October 19, 2008 at 10:21 am | Permalink

    @ James Higgins:

    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.

  31. Posted November 18, 2008 at 5:41 pm | Permalink

    Hi Lorelle,

    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

  32. Posted November 18, 2008 at 10:14 pm | Permalink

    @ Gusto:

    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.

  33. Posted November 19, 2008 at 10:43 am | Permalink

    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.

    I will get it just a matter of time this page might help if any of your other visitors are having the same problem.

    Have a great day

    Gusto

  34. Posted November 26, 2008 at 1:37 pm | Permalink

    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.

    Please help dear.

    Count
    thecount.com

  35. Posted February 5, 2009 at 2:28 pm | Permalink

    Any idea why /* */ would break in IE6? It is fine in Firefox.

    My site is at abridgebetween.net if you can take a look, thanks (I’ve tried the Revolution forum and have no answer) :)

  36. Posted February 5, 2009 at 2:29 pm | Permalink

    ooops… I see that didn’t post properly… I am wondering why my blog “name” breaks in IE6 but is fine in Firefox.

    • Posted February 5, 2009 at 5:50 pm | Permalink

      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.

  37. Posted June 13, 2009 at 2:44 am | Permalink

    My sites have been hacked.

    I have updated to latest wp version, 2.8 and dropped changed admin to another name and another password but they are still breaking in and scewing up my wp blogs.

    Hostgator has removed most of hacked code.

    One blog got over 1600 entries posted with ads.

    How can I make my blogs more secure?

  38. Miranda
    Posted February 26, 2010 at 11:04 am | Permalink

    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

  39. Posted April 9, 2010 at 5:02 pm | Permalink

    Lorelle,

    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?

    Thank you again for your wonderful support.

    -Dave

    • Posted May 7, 2010 at 2:45 pm | Permalink

      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.

  40. Posted December 20, 2010 at 11:10 am | Permalink

    hi
    will you plz tell me how to replace older post with page no thanks in advance

    • Posted December 20, 2010 at 12:15 pm | Permalink

      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?

  41. Posted August 24, 2011 at 4:17 pm | Permalink

    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?

    • Posted August 24, 2011 at 8:40 pm | Permalink

      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.

  42. Posted August 25, 2011 at 3:52 pm | Permalink

    Thank you.

  43. Posted February 27, 2012 at 1:19 pm | Permalink

    Hi Lorelle,

    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.

    [Code removed]

    Do you know how I can remove this script for good?

    Thanks for looking at the problem!

    Zach

    • Posted February 28, 2012 at 1:33 pm | Permalink

      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.

  44. Posted June 21, 2012 at 6:46 am | Permalink

    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]

    • Posted June 21, 2012 at 9:27 am | Permalink

      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.

  45. Posted February 14, 2013 at 7:28 am | Permalink

    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.

    • Posted February 14, 2013 at 11:59 am | Permalink

      Wow, you overdid it trying everything but contacting Automattic directly or going to the WordPress Support Forums where you can get the help you need. Check there for help. Good luck with it.

      You may also wish to clear your browser’s cache as it can often not update with such changes, showing you the old information even after the information has updated or been changed.

  46. Mason
    Posted February 26, 2013 at 5:05 pm | Permalink

    Hello, I am in need of assistance –> to anyone who is willing,

    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!

    • Posted February 26, 2013 at 11:43 pm | Permalink

      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.


8 Trackbacks/Pingbacks

  1. [...] 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. [...]

  2. [...] Problem Solving the WordPress Header [...]

  3. [...] Some great tips on changing the header image and other header related info is here: http://lorelle.wordpress.com/2005/09/24/problem-solving-the-wordpress-header/ [...]

  4. […] Problem Solving the WordPress Header […]

  5. […] Problem Solving the WordPress Header […]

  6. […] 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 […]

  7. […] Problem Solving the WordPress Header […]

  8. […] Problem Solving the WordPress Header […]

Post a Comment

Follow

Get every new post delivered to your Inbox.

Join 19,709 other followers

%d bloggers like this: