you're reading:
Blog title, Featured image, Header customization, Header tabs, Images, Themes, Top navigation

Header images

http://wpbtips.wordpress.com/

In several themes you can use an image of your own for the header (the possibility isn’t always obvious when you view the thumbnails under Appearance > Themes, as some of them sport no image at all). The image can be a jpg or a png, or an animated gif.

Two thirds of those themes also include the option to “Hide Text”, i.e. exclude the regular blog title and tagline from showing in the header. This is useful when you want to incorporate the blog title and the tagline in the design of the image itself.

You add the image in Appearance > Header, or in Appearance > Themes > Header (the tab shows only when you have loaded a theme that supports this option). In all themes except Regulus, you get an image uploader, and select the file from your computer. In Regulus you get a “Current Theme Options” tab instead, and you must paste the URL of the image, so you must have already uploaded it via Media > Add New.

The image needs to be in specific dimensions (varying from theme to theme – very few themes share the same ones). When you upload an image, you are supposedly able to crop it to those dimensions. But this may result in poor image quality, or not work at all. So it’s best to upload images in the dimensions specified by the theme.

Supported in Dimensions (px) Hide Text option Header tabs
Adventure Journal [optional] 920 x 360 no above image
Ambiru 500 x 225 yes below image
Andrea [optional] 1270 x 260 yes below image
Autofocus [optional] 800 x 216 yes below image
Benevolence 700 x 225 yes no
Black-Letterhead 760 x 200 yes no
Blix 690 x 115 yes below image
Blogum [optional] 945 x 150 no above image
Bold Life [optional] 950 x 264 no above image
Bouquet 1100 x 180 yes below image
Bueno [optional] 930 x 198 yes above image
Chaotic Soul 760 x 151 no no
Chaos Theory [optional] 780 x 180 yes below image
Chateau [optional] 960 x 260 yes above image
Chunk [optional] 800 x 140 yes below image
Clean Home [optional] 900 x 200 yes above image
Comet [optional] 960 x 200 yes default above image [*]
Connections 741 x 142 yes above image
Contempt 750 x 140 yes below image
Coraline [optional] 990 x 180 yes above image
Day Dream 527 x 273 yes below image
Digg 3 Column 904 x 160 yes above image
Dusk to Dawn [optional] 870 x 220 yes below image (in sidebar)
Duster [optional] 1000 x 300 yes below image
Elegant Grunge [optional] 956 x 160 yes above image
Enterprise [optional] 960 x 80 yes below image
Fjords 04 900 x 200 yes no
Forever [optional] 885 x 252 yes below image
Fresh & Clean [optional] 920 x 116 yes below image
Freshy 780 x 95 no below image
Fruit Shake 980 x 285 no below image
Fusion [optional] 980 x 148 yes bottom of image
Greenery 740 x 171 yes top of image
Grid Focus [optional] 970 x 175 yes no
Iceburgg 790 x 150 no above image
Imbalance 2 [optional] 210 x 170 yes next to image
iTheme2 [optional] 978 x 288 yes below image
K2-lite 780 x 200 yes bottom of image
Koi [optional] 980 x 200 yes below image
Kubrick 760 x 200 yes no
Liquorice [optional] 900 x 235 yes below image
Manifest [optional] 500 x 160 no above image
Matala [optional] 940 x 150 yes below image
Misty Look [optional] 760 x 190 yes above image
Modularity Lite [optional] 950 x 200 no above image
Motion 50 x 50 no pages above, categories below
Mystique [optional] 940 x 200 yes below image
Neat 700 x 200 yes no
Neo-Sapien 480 x 250 no above image
Next Saturday [optional] 615 x 85 yes no
Nishita [optional] 1024 x 295 yes below image
Notepad [optional] 974 x 240 yes above image
Nuntius [optional] 980 x 155 yes default below image [*]
Ocean Mist 736 x 229 no bottom of image
Oulipo [optional] 712 x 80 no below image (left sidebar)
P2 [optional] 980 x 120 yes no
Parament [optional] 950 x 200 yes below image
Piano Black [optional] 951 x 160 yes above image
Pilcrow [optional] 770 x 200 yes above image
Pink Touch 2 [optional] 690 x 185 yes no
Pool 795 x 150 yes below image
Prologue [optional] 726 x 150 no no
Quintus 1100 x 250 yes below image
Reddle [optional] 1120 x 252 yes below image
Redoable Lite 730 x 180 yes below image
Regulus 730 x 140 yes top of image
Retro-fitted [optional] 1020 x 150 yes below image
Retro MacOS [optional] 758 x 180 no below image (in sidebar)
Rubric [optional] 215 x 150 yes no
Rusty Grunge [optional] 658 x 240 no above image
Sapphire 740 x 180 yes no
Selecta [optional] 940 x 150 no above image
Shaan [optional] 950 x 100 yes above image
Simpla [optional] 750 x 120 no no
Skeptical [optional] 940 x 200 no above image
Spectrum [optional] 938 x 150 no above image
Splendio 980 x 174 no above image
Strange Little Town [optional] 950 x 200 yes above image
Structure 960 x 120 yes below image
Suburbia [optional] 155 x 155 yes below image
Sundance [optional] 984 x 242 yes below image
Sunspot [optional] 257 x 157 yes below image (in sidebar)
Tarski [optional] 720 x 180 no below image
The Morning After [optional] 960 x 70 no above image
Titan [optional] 960 x 180 no below image
Triton Lite [optional] 960 x 270 yes above image
Twenty Eleven [optional] 1000 x 288 yes below image
Twenty Ten [optional] 940 x 198 yes below image
Under the Influence 980 x 180 yes below image
Vertigo [optional] 960 x 240 yes above footer!
Vigilance 920 x 180 yes below image
Vostok [optional] 600 x 126 no below image
Wu Wei [optional] 700 x 144 yes above image
zBench [optional] 960 x 200 yes above image

[Grid Focus: see here]
[iNove: see here]
[NotesIL: header displays your blavatar]

Check these workarounds too:
Custom header image in Inuit Types
Hiding title and tagline in MistyLook
Custom header image in Motion

Notes:
• The width for Under the Influence refers to the default version of the theme (its width is customizable).
• if you have applied CSS customization, the uploader in Appearance > Header usually doesn’t work: you have to upload the image in Media > Add New, get its URL and add the image via CSS editing.
• In a few themes, if you set a “featured” image to a post or a static page, it shows up in place of the regular header image when viewing that post or page – see my post on featured images.
• You can select a random display of several images (the option shows up in Appearance > Header only after you upload more than one image).

[*] If default menu replaced by custom menu(s), can be above image, below image, or both.

____________________
Bonus: the Misty Look bridge photo. Since the default header image of that theme is much liked, here’s the complete photo (click on it for the full-size version):

mistylook bridge
Stock photo by Agnes Scholiers aka TouTouke

http://wpbtips.wordpress.com/

Please don’t paste code in comments – see comment guidelines.
About these ads

Discussion

17 thoughts on “Header images

  1. My theme, Andreas09 doesn’t support customizable headers with the above method. I do have the CSS editing option, and have experimented trying to find which rule should contain the image, but with no success. Do you by chance know if it’s even possible on this theme?

    Posted by GrokSurf | December 19, 2009, 20:15
  2. @GrokSurf: I’ve no idea, as I haven’t tried CSS editing at all. You should ask at the CSS section of the wp.com forum: we’ve got several experts in CSS (devblog, thesacredpath, and others) who can tell you for sure.

    Posted by Panos | December 19, 2009, 21:54
  3. GrokSurf’s question posted in the forum and answered by thesacredpath:

    http://en.forums.wordpress.com/topic/custom-header-via-css?replies=11

    Posted by Panos | December 20, 2009, 04:50
  4. Just the info I was looking for. Thanks!

    Posted by Pied Type | May 27, 2010, 22:09
  5. @Pied Type: You’re welcome! (In this blog you can find several pieces of info not included in the WP Support docs – especially on themes.)

    Posted by Panos | May 28, 2010, 05:10
  6. People,
    I feel tha I must begin this reply with an apologee. I don’t know where to go to find the answer to fix what I see as a problem. This is particularly awkward after my latest post on my aphasia blog http://www.byonaphasia.wordpress.com entitled “What I Know is Revelant” essentially pleading with people not to assume that because I have aphasia, I have lost all of intelligence. Aphasia, due to a traumatic brain episode, has taken away some of my ability to communicate, in both directions (in and out). I am sure I have over looked the answer to my question, but right now I can’t find it. I love the picture of the tree-lined path with a solidary walker that is used in the sample of the Twenty-Ten Theme. So I adapted that theme. However to my surprise the banner picture that comes up when I post something is a wild filigree print that I don’t think is appropriate for postings about aphasia or epilepsy. Is there a catalog of usable banner pictures? How can I select one that I like? Please I need simple, step-by-step insturctions at this point. I couldn’t follow the steps to change the banner appearance that I found on the dashboard page under appearance. Please believe me this is frustrating. Three years ago, I was not hesitant about trying anything on the computer. Today, I have trouble following what seem to be simple directions. The reason I started blogging was to have an outlet for the 40 years worth of knowledge that I accumulated working in higher education. After I got started with that, some people encouraged me to also tell people what I learned about aphasia and epilepsy through living with them. Thanks.

    Posted by By Baylis β2 | September 10, 2010, 20:10
  7. Hi Baylis, and welcome to the WordPress community.

    To change the header image, you click “Header” under Appearance in your dashboard sidebar. You’ll see the eight options available for the theme; click on the one you prefer, then scroll down and click “Save Changes”.

    Posted by Panos | September 10, 2010, 22:02
  8. Hi Panos,

    You mention that

    “You add the image in Appearance > Custom Header, or in Appearance > Themes > Custom Header (the tab shows only when you have loaded a theme that supports this option).”

    Supposedly the Bueno theme has this option but it doesn´t appear anywhere in the Panel. You mention also that in Bueno the header is “optional” what do you mean by that? do I have to buy the upgrade or something? Please help!

    Posted by Arturo | February 7, 2011, 05:30
  9. Hi, but check point 1 here:
    http://wpbtips.wordpress.com/comment-guidelines/
    ‘Our’ Bueno is not ‘your’ Bueno.

    Posted by Panos | February 7, 2011, 09:03
  10. Thanks – just saved me a lot of work finding the new header size & Theme

    Posted by captnmike | October 14, 2011, 03:09
  11. I think I know you, Captain!

    Posted by Panos | October 14, 2011, 14:09
  12. Hi — newbie here.

    My apologies if this is a dumb question, but does “[optional]” in the WordPress-hosted themes above mean you have to upgrade in order to change the featured image?

    Does this mean that themes without the “[optional]” allow you to change the image without upgrading?

    Posted by rosewardsky | October 27, 2011, 03:18
  13. Hi,

    All my theme surveys have to do with the free, no-upgrade, out-of-the-box wordpress.com themes as found under Appearance>Themes in your dashboard. In the rare cases in which I’m talking about something that requires an upgrade, the specific upgrade is clearly mentioned (for example, there may be a note somewhere in the vein of: if you have the Space upgrade you can also do such and such).

    Most themes that support header images have a preloaded one, and require one: you can leave the original image in place, or you can upload your own in its place, but you cannot eliminate the header image area (unless you buy the Custom Design Upgrade). The ones that say “optional” have no preloaded header, the header image area will show up only when you upload an image in Appearance>Header, and will disappear again when you remove the image. So “optional” means just optional, that is, the theme allows you to add a header image if you wish.

    Posted by Panos | October 27, 2011, 03:52
  14. PS Header image and “featured” image aren’t the same thing – see here:
    http://wpbtips.wordpress.com/2010/08/23/featured-images/

    Posted by Panos | October 27, 2011, 03:55
  15. thank you very

    Posted by xuthi | December 1, 2011, 17:38
  16. Thank You Very Much.

    Posted by Irfan Handi | December 6, 2011, 06:19

Author

author's avatar panos (justpi)

 Subject Index

Announcement 22/03/2012: After WP's latest move, this blog will no longer offer active support and assistance. The blog will remain online but commenting on older posts has been disabled.
✶ All theme-related posts are updated up to and including theme 189 in this list, but will not continue to be updated.

Stats

  • 2,407,678 views
  • Views per month:
Safari Icon Firefox - Never Internet Explorer
Note: if you see ads on this site, they are placed by WordPress, not me.
wpbtips.wordpress.com
Mostly on themes, formatting, coding, tweaks and workarounds.
Based on or springing from my contributing in the wp.com forum.
Theme-related posts constantly updated
Premium themes and Annotum not included
%d bloggers like this: