Personalizing your WordPress.com blog: Part 2 – Custom Image Headers

Custom Image Headers by Guest Author Roads

Introduction

Many of the WordPress.com theme templates feature image headers, and these offer the perfect way to personalize your blog, right from the top.

This post provides some tips on how to use image headers, and how to make them work best for your site.

roads of stone front page with custom header image by roadsofstone

I’ll also post some of my own header images at the foot of this post, formatted for the Cutline theme, which you can download and use for yourself if you wish.

How to load a new image header

Header images come in different shapes and sizes, depending on the theme used.

cutline theme for wordpress com by chris pearson

Presently, I am using Cutline on my sites, which features a 770 x 140 pixel header. The theme has a default header image, but it’s possible to change this under

Dashboard -> Appearance -> Custom Header -> Upload New Header Image

where you can add your own header image by uploading the file from your computer. Bear in mind that it’s not presently possible to select an image from elsewhere on the internet or even from your site’s Media Library unless you have downloaded it onto your computer first.

Cropping and resizing header images

You can crop and resize your images directly in WordPress.com, but if you can it’s always best to optimize your image before uploading it. Check the pixel size of the image headers used for your choice of theme, and resize your image accordingly using image software.

irfanview image softwareI use the freeware IrfanView but you might prefer PhotoShop or PaintShopPro instead.

Header image file sizes

Whichever package you use, try to limit the image header file size — compressing to 30kB works well. Less compressed header images will slow down the loading time of all the pages on your site and this will frustrate readers working with slower internet connections.

Composition and header images

Bear in mind that an image which works in portrait format may not be effective once cropped into the horizontally elongated formats which are required for most blog image headers. Landscapes, night panoramas, city skylines and sunsets work well, though — and anything which features a horizon is likely to create a strong visual design impression at the top of your blog.

Likewise, the standard compositional ‘rules’ for placing skylines and points of interest which apply for standard 3:4 or 2:3 image dimensions may not work so well with horizontally elongated images. You’ll have to experiment with different crops to see what works best on your site.

roadsofstone image with text added in irfanviewAdding lettering to an image

You can add simple text directly onto your image directly in IrfanView.

Select a box in the part of the image where you want the text to go, and then follow

Edit -> Inset text into selection…

and then choose your font size and colour as desired.

Header images and branding

Clearly, you’ll want to find custom image headers which help establish the ‘brand’ of your blog. You might choose to incorporate a logo into your header, for example, and at the very least you’ll want the image to show a subject which is relevant to your blog.

Rotating custom image headers

Chris Pearson describes a widget for WordPress.org blogs which allows the random rotation of custom header images. That feature isn’t yet available at WordPress.com, but it’s easy to change custom image headers around to rotate them manually on a daily, weekly, or monthly basis.

Using header images as update clues

I like to go further, and where possible I aim to load a new header image every time I post. This helps to keep the site looking fresh, and it also means that I can select an image which is directly relevant to my latest writing.

Just as importantly, I’ve found that refreshing the image header with each new post provides an instant visual clue to your readers that the site has been updated. Right from the top, your new image header will catch the eye and let your visitors know that there’s new material posted on your blog.

Captions for header images

Although you can use IrfanView to add text directly onto your header image, there’s not presently a facility for adding captions below your header images in the same way that you can do this for images within a post.

example of masthead image caption and attribution by roadsofstoneHowever, it’s straightforward to add a caption, and a source link if you wish, at the top of your sidebar.

Go to

Dashboard -> Appearance -> Widgets …

add a text widget to the top of the sidebar, click on the widget and compose the caption text you need. Don’t forget to click ‘done’ and ”save changes’ afterwards or else any modifications you make to widgets will (annoyingly) be lost.

Free image headers

Finally, as promised, here is a selection of image headers from my own photography which I’ve previously featured at roads of stone.

Please feel free to use them under the terms of a Creative Commons Licence. An attribution to me as author would be welcome if you’ve found this post useful.

Wishing you all the best of luck, and enjoy personalizing your image headers.

Atlantic Ocean Bermuda by roadsofstone

Atlantic Ocean, Bermuda by roadsofstone

river wey st catherine's lock guildford england by roadsofstone

River Wey at St Catherine’s Lock, Guildford, England by roadsofstone

winter nightfall in almeria spain by roadsofstone

Nightfall in Almería, Spain by roadsofstone

the strength of shiny metal almeria spain crop by roadsofstone

The strength of shiny metal, Almería, Spain by roadsofstone

epsom racecourse surrey england tattenham corner 2 crop by roadsofstone

Epsom Racecourse, Surrey, England by roadsofstone

burgundy vineyards near roche solutre maconnais france by roadsofstone

Burgundy vineyards near Roche Solutré, Maconnais, France by roadsofstone

the future of green houston texas usa by roadsofstone

The future of green, Houston, Texas, USA by roadsofstone

houston-texas-morning-skyline-december-2007-by-roadsofstone

Houston, Texas, USA — morning skyline by roadsofstone

dream world internet cafe and child poverty kenya august 2007 by roadsofstone

Dream World internet cafe and child poverty, Kenya by roadsofstone

dawn, masai mara kenya august 2007 by roadsofstone

Dawn on the Masai Mara, Kenya, August 2007 by roadsofstone

dawn, masai mara kenya august 2007 by roadsofstone

Hogsmill River, Ewell, Surrey, England by roadsofstone

clopton bridge stratford-upon-avon england crop by roadsofstone

Clopton Bridge, Stratford-upon-Avon, England by roadsofstone

camber-sands-panorama-east-sussex-england-by-roadsofstone

Camber Sands panorama, East Sussex, England by roadsofstone

st marthas churchyard in snow at sundown guildford england Feb 2009 by roadsofstone

St Martha’s churchyard in snow at sundown, February 2009 by roadsofstone

Related posts found in this blog:

Personalizing Your WordPress.com Blog

Changing Your Blog? Start With the Colors

Blog Design: Which colors do you use and why?

Swing into Summer: New Themes and Headers

Why having a well designed blog is important

Widgets: Less is More

25 thoughts on “Personalizing your WordPress.com blog: Part 2 – Custom Image Headers

  1. Pingback: New Header Friday « Monson Shooter

  2. Timethief,
    I’ve just wandered in and around your site, page after page of insight! I wanted to pause and thank you for providing all of this infomation to us bloggers.You’ve done an excellent job here~
    Rebecca

  3. Great info on searching for people online.Reverse phone search is becoming very popular as well.I am always looking for info in this niche thanks for the info.

    • @Carol
      I don’t see any connection between this tutorial on customizing wordpress image headers and your interests. The niche my blog is in is “blogging tips and SEO”.

  4. Pingback: TwitPost: Update Your Blog Post Here

    • @himalman
      I removed the link from your comment because there are hundreds of wordpress free themes and I do not wish to be flooded with comments pointing to specific themes. This post is focused on headers.

  5. Pingback: Topics about Stratford-upon-avon | Personalizing your WordPress.com blog: Part 2 - Custom Image Headers

  6. Codesucker
    Thanks for your two comments above. I’m glad you found this post useful.

    This post is about WordPress.com sites, whilst your blog is currently on Blogger, which formats headers in a different way from WordPress.com. The option you describe of putting a blog description or title behind the header image just doesn’t arise in WordPress.com, since fortunately WordPress.com defines your blog title and tagline entirely separately from the image header.

    You’ll find the blog title and tagline options on the WordPress.com dashboard under

    Settings -> General Settings … -> Blog Title and … Tagline.

    The option of adding text to an image header is handy if you want to reinforce your ‘brand’ or supplement your tagline with additional text within your header image itself. Alternatively you may prefer to build on your brand recognition by superimposing your site logo onto the header image.

    Any text within the image itself won’t be read by search engines, but that shouldn’t really be an issue since the blog title and tagline always will be.

  7. I’m a first timer here and I thoroughly enjoyed your blog that you have. You can tell that you have a passion for helping newbies and even oldies in making ones blog even better than what they already have. I will be back and I’m glad that I found you through BlogCatalog.

  8. My Produksiyon and esferperfect:
    You’re very welcome, and I’m glad you found this post helpful.
    Best wishes from London, and happy blogging!

  9. Thank you, photographworks. It’s interesting to see that you have been able to feature rotating custom image headers by writing CSS for K2. But would you have been able to do this using the WordPress.com version of the theme ? — Your site is a WordPress.org blog and the versions of the theme which are provided in each case are often not the same.

    • As yes, – or as my teacher at school would have said “read the question, boy.”

      I started with a WordPress.com site and I still have it at http://photographworks.wordpress.com I ‘moved on’ to WordPress.org principally because I wanted to take ‘wordpress’ out the of the name of the site and run Google Adsense ads.

      And I wanted the challenge of loading WordPress on my own host server. I developed that as http:/photographworks.com and then I got the bug.

      It all seemed very daunting when I started, and still recognize that there is a huge amount to learn, but it is do-able for anyone who is tempted to do it but worried that it will be too difficult.

      And it does open up a lot of templates and tweaks that are not available in the dot.com variety.

      • Hi again David — I was asking the question since I was working remotely and couldn’t see directly whether or not you had succeeded in making your image headers rotate within a WordPress.com site.

        The manual changing of image headers as I describe here is very much a poor imitation of the slickly-changing headers you have achieved over at your quillcardsblog. That looks great!

        Looking at your two sites, as well as at Timethief’s crisply formatted site here at onecoolsite.wordpress.com, gives a great illustration of how alternative approaches to customization can be adopted by different users for different needs.

        Incidentally, for a small fee it’s now possible to have a wordpress.com site on your own domain. That’s the approach I’ve taken at roadsofstone.com — adopting a dedicated domain whilst still retaining the simplicity of a WordPress.com platform. Certainly I’d agree with you that switching your site onto your own domain is one of the single most important steps to customization of your site that you can make.

        Many thanks again.

  10. Ian:
    Thanks very much — you have a great image header on your site and a really crisp design. Cutline certainly isn’t the only WordPress.com theme where you can change the header image — Chris Pearson also built this in to Pressrow, with a slightly taller image, and Ocean Mist features an even bigger header image. In deciding your preference there’s a balance to be drawn between creating a dramatic effect and filling up an entire browser window with an image rather than posted text.

    I agree that it would be good to see more customisation possibilities at WordPress.com — although the possibilities are limitless if you have the time to build a self-hosted site at WordPress.org …

  11. I just wanted to add something, I don’t really suggest ‘drawing’ the text on your header image. The text should be written for search engine optimization.. TT you have done this with your blog, since the text can be highlighted search engines can pick it up. I’ve done this with my blog, in Blogger they have an option to replace your header image or to simply put it behind the title and desc of your blog. I suggest putting it behind, and letting the text naturally be written on top of it.

  12. Cool. I like the header collection you put together.

    I am making a new blog in wordpress (It’s a secret, shh!) and couldn’t figure out where to go to change the header pic. Honestly I didn’t look too long, but now that I know I can get right to work. Thanks for another great and thorough post.

  13. Thank you – These are great tips for a NBOTB – new blogger on the block. The headers are pretty cool too. I will be borrowing them for and will send a hattip your way (and roadsofstone’s)

  14. There is one WordPress Theme that I know of that has built in rotation of header images, and that is the free template called K2. The template is located at http://getk2.com and it is supported by a community at http://groups.google.com/group/k2-support

    The Theme is well-supported and is compatible with the latest version of WordPress. The latest stable build is at getk2.com/nightly/

    The theme has a ‘K2 Options’ page within WordPress Admin that enables you do the various things without knowing php, css, etc, including the following:

    – Choose the number of columns (from one to three) and to decide where you want the sidebar columns.

    – Choose a fixed header or one that rotates. At the moment I have got three header images and they rotate randomly.

    Then, for the more adventurous, you can make and use a style sheet other than the standard one that comes bundled in K2. So if your CSS skills are up to it, you can create a file with overrides so that everything you have changed that is not in the standard package, it in a separate file. And you can activate that from the Admin page. The community is very helpful with snippets of code you can put in your own style sheet.

    To see the headers rotate on my blog at http://www.quillcardsblog.com – just go the blog and refresh the page. I have three headers and I think three headers is the minimum number of headers I would recommend, and four may be better.

    I’d be happy to help with anyone who wants some guidance on the size of the headers, because it needs a bit of judgement to make just enough background space to show the names of the buttons on the tab at the top.

  15. Time thief, your post here is very good. I actually use the method you have described but never realised that this methodology would be helpful for many. :)

  16. Redoable lite is also custom headable – if that’s the right term. :-)

    Problem is, you’re always left with two red strips on either side. You cannot get rid of them.

    Just one of the many problems with that theme that I’ve tried to have
    addressed, but contacting the designer led to nada.

    Anyway wordpress.com is counting on you paying money so you can muck around with the CSS to change it, rather than offering a bug-free theme in the first place.

Comments are closed.