Cutline Theme for WordPress

One Giant Leap for Mankind

Cutline Theme for WordPress header image 2

How To Customize Your Header Images

September 25th, 2006 · 92 Comments · How To

Customize your header images with Cutline!

Your blog is an expression of you, and one of the most striking, visible features of your blog is the header image. Therefore, it stands to reason that many of you (perhaps all of you?) will be interested in personalizing your header images, and Cutline has been constructed in such a way as to make it simple for you to do just that.

Actually, Cutline comes with five default header images, and in this post, we’ll not only examine when these headers appear, but also how to change them!

Header Image Conventions

Cutline was constructed with simplicity in mind, as the five default header images follow this naming convention:

  • header_1.jpg
  • header_2.jpg
  • header_3.jpg
  • header_4.jpg
  • header_5.jpg

In addition, each of the default header images is 770px wide by 140px high.

Customization

If you construct your own header files following the conventions outlined above, then all you’ll need to do is upload your images to the following directory:

http://yourWPdir/wp-content/themes/Cutline/images/

The Cutline header.php file is constructed so that images created and uploaded in this manner will integrate seamlessly.

But I want header images that are taller than 140px…

Fine, have it your way! I still recommend that you follow the header naming convention, but by following the directions in this section, you’ll be able to incorporate taller header images as well.

To illustrate, let’s assume that your header image files have all been constructed at 770px wide by 200px high. If you simply upload these files to the /images/ folder in the Cutline directory, then you’ll notice that each image will have 60px clipped off the bottom. Since this is a bummer, we need a way to fix it!

Fortunately, even a complete novice can make the edits necessary to remedy this situation. Here’s what you need to do:

  1. Using your text editor of choice (for Windows, I recommend TextPad or Notepad++, both of which are free), open up the header.php file from the Cutline theme directory.
  2. The last 12 lines of code in the header.php file are all dedicated to handling the header images. Among those 12 lines of code, you’ll notice five separate image (img) references — these are where you’ll be making your changes.
  3. If you followed the header naming convention outlined above, then all you have to change are the height="140" declarations. In the example here, our header images are 200px high, so the edited reference should look like this: height="200".
  4. Once you’ve made all the necessary changes, simply FTP the edited header.php file to the Cutline theme directory.

Assuming you’ve done everything correctly to this point, your new header images should be appearing on the different pages of your site. But wait a tick…Which header images appear on which pages?

Headers on Different Pages

You’ve undoubtedly noticed that the header images change as you navigate through different portions of your site. When customizing your site, you may want to have certain images appear on certain pages, and you can use the following list to help guide you in your endeavor:

  • the front pageheader_1.jpg
  • single entry pagesheader_2.jpg
  • non-entry pages (such as About or Archives)header_3.jpg
  • archive index pagesheader_4.jpg
  • 404 error pagesheader_5.jpg

And there you have it, folks! If you need additional help, please give a shout out in the comments.

Tags:


92 Comments so far ↓

  • Chris

    Hallas — You’ve installed too many levels of Cutline folders into your /themes directory. When you unzipped the theme, it created a folder with two sub-folders. You need to install the Cutline subfolder into your /themes directory, and everything will work like it’s supposed to.

  • Graham

    Hi Chris Thanks for your quick response
    I ‘think’ i have got the cutline folder in the correct folder /structure, but still not working and saying same message. I have sceen dumped the file structure as it would look in DWeaver and saved it on my server see http://www.theworldofspain.com/art/wordress_file_structure.gif
    I hope this helps you see and hopefully help me !
    Thanks again H

  • Graham Hallas

    Chris …. I put Graham instead of Hallas if you hadnt already realised …my eyes are tired and its v.late for me in the UK

  • Charlie

    I love the theme, Chris. Thankyou.
    Here’s my troubleshooting question: I have deleted the masthead H1 reference in my header.php file, and it knocks out the title, as it should.

    But it won’t show my custom header image. It’s named logo.gif, it’s in the right directory, the lines in the css are uncommented and the image dimensions correspond to those in the image.

    Not sure where to go from here. I can live with just having the header image lying under the links and all, but would prefer to have a clickable banner image up top.

  • Chris

    Graham — The problem is that you’ve only uploaded some, but not all, of the Cutline theme files. Try downloading and installing the theme again, and you should be fine.

  • Graham

    Hi Chris
    Thank you for that I thought I didnt have enough files but I wasnt sure …Alls well now cant wait to get optimising.
    All the Best G

  • Voros

    Hey Chris,

    Brilliant work. With that out of the way :) I’m having trouble getting the 404 page to work properly.

    All I get is a blank (in both Firefox and IE).

    I looked through the theme files and didn’t find anything that jumped out at me as the right fix.

    I’m sure I’m being a complete Bozo (it’s my specialty) but even those of us with 87 IQs would like to have blogs so any help would be appreciated.

    Everything else works swimmingly though. Big ups.

  • Ten Free Cutline Header Images

    [...] Find them all in the right size, 770×140,  in my Flickr set of Cutline Header Images. Captain Hops also has ten free headers. In case you don’t know how to customize youe theme, here’s the guideline. [...]

  • ovizii

    hello,

    I am using your theme on a wpmu install, this means anyone signing up can have his own custom blog.
    any chance that you will include an options panel, like K2 where one can select header images? I would love this, as that would enable me to upload like 20 images and each user could have a unique blog (as I would love to have the option to show the selected header for each blog, on all his pages)

    thx for the great theme
    ovidiu

  • Thibaud ALEZIARDO

    Great! I was looking for such a function for a while. Thanks

  • Daniel Su

    Hi, i really do not know how to change my header. Can anyone please help me? i design my header in photoshop. then which directory in ftp should i upload to? because i can’t find header.php in my ftp.

  • Lisa

    I followed your instructions for customizing the size of my header and it worked except for one thing…now it’s not centered on my page. Can you help me figure out how to center it?

  • WordPress setup at halvorsen.org

    [...] are cropped images taken from Homemade’s Flickr collection. The sequence for changing what images are shown using Cutline is documented, I am currently using random header [...]

  • Disco4Life

    Chris, I’m more than a newbie, i’m one of those people who should be banned from even saying the word “code”. I’m trying to use the random images, but I don’t even know where to add the code that you so generously provided. And I don’t even know where I should store them. I thought maybe on the “write page” page, but that doesn’t seem to make much sense to me. Help an ultra-newbie look good with her team? Could you walk me through it as much as you’re willing to do?

  • drew

    Hi I was wondering, how would I remove the header image altogether? Want text to start higher up…

    Thanks!

  • tasha

    LK, are you referring to a Feedburner RSS feed?

    I’m curious about what your answer was to LK on this issue. I couldn’t find it in the follow-up. I’m also using feedburner and can’t figure this out…

    “LK, are you referring to a Feedburner RSS feed?

    If not, then that logo and link are already “broadcasting” your RSS 2.0 feed, which is the latest and greatest that WordPress can generate.

    Write back and let me know if you’re talking about Feedburner, because the solution to that may be post-worthy in and of itself…”

    Can you answer this????

  • Kevin

    I’m still lost on how to upload a different header photo. You said just put it in the images file, but don’t you have to rename the new photo to header_1.jpg ?

    How do you resize a photo to 770x 140? Can I do that in Photoshop Elements?

    Thanks for any help, I new.

  • Lazarus

    forgive me if this question has been asked already and i overlooked it.

    i have replaced my header images without any problem and all of them are pointing to my satisfaction except the one on the contact page. the contact page is bringing up header_3.jpg which is the same as the one used on the about page, however i want it to bring up header_4.jpg.

    this image:

    http://www.bloggingbroker.com/wp-content/themes/Cutline%201.1/images/header_4.jpg

    instead.

    so my question is how to direct the header_4 image to load on the Contact page.

  • Lizzy

    Hello,
    I’m still struggling with the same issue a number of these other posters have referenced…changing header images. I’ve been stumped with this one for about 48 hours now and I’m looking for someone to help put me out of my misery. I’ve replaced the header_1 thru header_5 jpeg files in the images folder and ftp’d them. I’ve resized the images to 970×200 and changed the code according to your directions on the header.php page. I tried clearing my cache…does that mean deleting cookies and temporary internet files? That’s what I did and that didn’t do the trick. Now, instead of any images at the top of my pages, there are just the photo titles and a little box with a red x. Does anyone know what I might be missing? Thanks so much,
    Liz

  • aaron thompson

    Hey I downloaded Cutline and finally got my headers to be the way I wanted them(thanks so much!!), but now my pages don’t appear at the top(above the image) like they did when I was using it through WordPress.com; also to go along with that, how do I get the Acrhive and About pages to go away? they only say ‘Not Found’. Please help.

  • Rahmi

    Chris, is there any way to make to do away with the Blog Title and description, and instead, ‘move’ them over to on-top of of the image?

    After that, can we make the header image a link?

    Thanks!

  • How To Customize Your Header Images

    [...] to change my header image so it wouldn’t look like everyone else. The post is titled “How To Customize Your Header Images“. You may learn a thing or [...]

  • Lane

    I’m with Rahmi. …

    Can someone please advise how to modify and/or do away with the Blog Title and description.

    Also, how do I add additional buttons across the top of the screen (along with ” front page, archives, and about)?

    Thank you in advance for your assistance.

    Lane

  • Addie

    Hi,
    I got the 3 columns cutline 1.1 and am trying to change the masthead text with a graphic /logo, but can’t figure it out. Could you please be more explicit about these instructions? I’ve read all posts above, but still I don’t really understand how can I replace the text with my logo?

    Any help is greatly appreciated!

  • Valen

    Hi Chris, thanks for the nice template. I am currently using it for my new blog. I would like to remove the ‘Archive’ link under the header. How could I do that? Thanks!

  • Valen

    Hi again Chris. I’ve already figured out how to remove the ‘Archive’ link. ;)

  • Interested In How to Change Your Header Images?

    [...] Related article:How To Customize Your Header Images. [...]

  • Shannon

    Hi Chris,

    I am new to all of this and would like to change the header image of all the pages just to ONE image, which is my logo to my main website.

    I have tried all the tips here and end up completely messing up the entire blog. Can you please help a newbie and explain how to do this in “layman” terms for me.

    I GREATLY appreciate ANY help that you can offer!!

  • Gireesh Sharma

    Chris I would like to create a hot-spot on the header image so if people click my Company Logo they navigate to our corporate website. Ho to do that?

  • Raheem

    Great theme and great support.
    Thanks

  • Jane

    Shannon, just name your graphic header_1, 2, 3, 4, 5 and so on and it will be the same.

  • Jane

    I was even able to figure out how to make the PAGES appear as a LIST on the sidebar since there is only room for 8 or so up in the menu.

    :-)

  • Jo

    I have just noticed a bug. I changed the headers on my site. When I go in through Internet Explorer, my pictures show up. However, when I go in through Firefox, they don’t appear and the photos are the Cutline stock photos. How do I get my photos to appear when I use Firefox?

  • Greg

    Hi! Great theme. I love the work that’s gone into it, and its greatly appreciated. Quick question for you. I downloaded the header.php file that you provided to randomly select images when a page is loaded. This does exactly what I wanted it to do, however I ran into a secondary problem when I changed to that header file. The “Archives” tab did not recognize my “Archived” file, and the “Contact” page that I added was no longer present. I have switched back to the original header file for the moment, but wondered if anyone could provide a workaround?

    Thanks.

  • Glen

    I have downloaded Cutline 3-column split with the intentions of upgrading and replacing my existing blog. Naturally, I am playing around with it on my computer using Mowes to get it the way I want. I’ve run into a minor problem. I want to use the customer random header feature that came in header.php of Cutline 3 column, but I also want to use a static page for my Home (Front Page). I have uploaded the header pictures I want to use for each of the “header_1 thru _5″ uses. With the use of a static page for my Home Page, I still want to use the header picture that is for the Front Page (header_1), but when I use a post page for the static home page, it automatically uses the header_3 picture, which is assigned to pages. I intend to have other pages in the navigation bar, along with “About”, and I still want to use the “header_3″ picture for that. How can I make my static home page use the same picture that Front Page calls for, which is header_1?

    Thanks

  • Matty Byloos

    Chris you are the bomb. I’m using Cutline for all my web properties. Having lots of fun learning how to get in there and move stuff around, making things personal and givin’ ‘em my own touch. THANK YOU!

  • Header Images and Cutline Theme | The Northern View

    [...] how to manipulate all the php header image files and entries to give you control over the theme and How to Customize Your header images and personalise your blog without too much stress. The comments that follow the post also seem to [...]

  • Kate

    Help! I’ve uploaded five images (header_1.jpg, header_2.jpg, header_3.jpg, header_4.jpg and header_5.jpg) into my wp-content/themes/cutline 1.1-3 column split/images directory, but I’m getting the dreaded red box on all of them. I really love the look of the theme, but I need my own header image.

  • Razvan

    Hello,

    I want to custom my header and to put a link on the new image. How can I put a link on the new image on wordpress ?

    Thank you.

  • capresso mt500

    thanks for the info. though i am confused with wordpress, you made it very clear to make things more easy.

Leave a Comment (Need help? Visit our Support page and Forums first.)