/images/header_2.jpg "Cutline Theme for WordPress")
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.jpgheader_2.jpgheader_3.jpgheader_4.jpgheader_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:
- Using your text editor of choice (for Windows, I recommend TextPad or Notepad++, both of which are free), open up the
header.phpfile from the Cutline theme directory. - The last 12 lines of code in the
header.phpfile 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. - 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". - Once you’ve made all the necessary changes, simply FTP the edited
header.phpfile 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 page —
header_1.jpg - single entry pages —
header_2.jpg - non-entry pages (such as About or Archives) —
header_3.jpg - archive index pages —
header_4.jpg - 404 error pages —
header_5.jpg
And there you have it, folks! If you need additional help, please give a shout out in the comments.
Hey there, great theme! And great instructions! I was wondering- would it be possible to replace the header images with flash animations/menus? Wouldn’t that be hot?
Chubot,
You could definitely do that. I wouldn’t do it for my public release, but some savvy theme-user out there could probably make it happen
Hi Chris,
Is there a way to make the theme use the same image for the header all the time…without resorting to the obvious of putting 1 version of the same image with 5 different file names?
5 different heads may be just too damn cool for me
Jon,
Making your site use a single header image is a pretty simple fix. Here’s what you need to do:
header.phpfile<div id="header_img"> ... </div>divfrom step two, except for theimgreference that points toheader_1.jpg!If you’ve made the changes correctly, the
<div id="header_img"> ... </div>wrapper will now only contain a singleimgreference.Oh, and the image you’ll want to use is, of course,
header_1.jpg.Chris –
Love the cutline skin, but here is a quick question. I like the random header deal you have going on over at pearsonified.com, any chance we could get the plugin/code to randomly generate headers for cutline? Thanks!
JM
I’ll do a post on it and make that my weekend treat.
Chris, walk a newbie through how to tie my feed to the RSS logo in the header. Please!
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…
Yes, I am talking about Feedburner. I’m also interested in the email feed addition. I’m so unskilled.
Chris, love the theme – reminds me of a great broadsheet we have here in the UK called The Guardian – http://www.guardian.co.uk (though not their site, their actual newspaper itself)
I’d be interested in you expanding on Jonathan’s suggestion of a random header. There seems to be some plugins to handle this and is simply a case of making a call to the plugin in the header.php file?
What would be nice too is the ability to overlay captions on the header, so we could write credits without having to embed them in the actual header photo.
Hi Chris,
I’ve started my migration from Typepad to WordPress & Cutline but am having trouble changing the header images.
I’ve overwritten all of the image files in the appropriate directory with my own pictures but they don’t change on my blog. I’ve no idea where it’s getting those pics from now I’ve overwritten them!
Also, any chance of a Tutorial to change the text header above the photo header to a graphic image?
Thanks!
Russell,
It appears as though you’ve made a change to the code in your
header.phpfile.I recommend uploading an untouched version of the
header.phpfile to your server — I think that will solve your problem…Chris,
That has worked on the front page but all the other images on the other pages are still there!
I’ve downloaded and then uploaded a fresh header.php file without making any changes to it.
Update: I have been in touch with the fantastic guys at Midphase about this and they say they have made some changes but I am still seeing your old images.
However, when I check my site using IE rather than Firefox everything is ok. I have access to another computer tomorrow that uses Firefox so will check on there.
Any ideas on why my FF browser shows me the old header images?
Cheers.
Update 2: I’ve cleared the cache in my FF browser and everything is working now!
Love it when this stuff works out!
Chris,
DOH! Told you I was an idiot. I realized the text box widgets allow coding. Plugged in the code for email subscription and bwallah! Works like a champ. Still tweaking, which is really hard for guys without skillz. I sure wish you’d clear your schedule so I could hire you.
any ideas/comeback about random header display? Was messing with the K2 skin and that has random header fucntion built in to the template’s core options. Very nice touch it is too.
Russell, I’ve been having same problem as you’ve been having with FF. I think it has to do with the cache, although when I clear it it still doesn’t update.
I’ve wasted a few hours with this problem. It’s not a problem exclusive to the cutline skin, I’ve tested a few others, same problem.
I’m wondering if this is a problem with WordPress?
I must say, I don’t have this problem with Textpattern, which is what my main site is run off.
Anyone here have any suggestions?
Mike,
Russell mentioned here that clearing the cache solved his problem.
Now, on the off chance that you also happen to be running the WP-Cache plugin, then I am fairly certain that is your problem. Other than that, I’m stumped, as this appears to be a one-off sort of problem.
Also, I am going to construct the random header post very soon — it’s basically been a matter of me clearing things out so that I can do the things I really want to do…You know, like giving out free advice over here
Chris,
I’m trying to run a WordPress site with about 360 categories to popular tv shows, movies, video games, etc… and trying to give each category the appearance of being its own blog.
Would it be possible to make pages like tv/lost only have random banners for the show Lost or movies/indiana-jones only rotate banners for that particular category?
How difficult would that be?… I’m eager for any advice… I may be making an average of 5-10 banners per category to rotate, so there will be a lot.
I will eventually add custom stylesheets for all the categories.
Nick,
Sounds like a helluva lotta work!
The good news, however, is that you absolutely CAN pinpoint particular categories in order to display certain headers.
For instance, let’s say that you are dealing with the LOST category, and you’ve got 3 images you want to rotate within that category.
The first step is to provide conditional PHP to determine if the page you are viewing is the category archive for LOST. Basically, this consists of constructing one huge conditional within your header, and this particular section would look something like this:
<?php if (is_category('lost')) { ?>etc etc.<img src="http://path/to/lost_<?php echo(rand(1,3)); ?>.jpg" width="width" height="height" alt="alt text" />
<?php } elseif ... ?>
So when you boil all this down, you get a two-part process:
lost_1.jpg,lost_2.jpg, and so on.When all is said and done, your conditional statement to determine header images will be huge. On top of that, you’ll have a ton of images.
For a site such as yours, this may not be the best approach. It may make much more sense to construct some JavaScript to control your header images across your site.
Try checking out this search for more information.
Is there any way to have seperate images for my about and page and the archive page?
Website Header Images Available | But Wait, There’s More // Oct 15, 2006 at 10:27 am
[...] Click on the small banner to see the full size version. I have cropped the full size images to 770 pixels wide by 140 pixels high to match the default in the Cutline theme, but you can use these images in any theme you want. The Cutline Theme website has good instructions for customizing your header images and adding random header images. Be sure to check them out. [...]
blazemd: If you’d like to force certain images to appear on your about and archives pages, you simply need to modify the existing PHP-conditional in the default
header.phpfile.Locate lines 35 and 36 — they address the header images that are set to appear on “paged” pages, which includes both your About and Archives pages.
Modify the following PHP-conditional (from line 35):
<?php } elseif (is_page()) { ?>and change it to this:
<?php } elseif (is_page('about')) { ?>In the above code,
aboutis the post slug for your About page.If you want to target your Archives page, add the following PHP-conditional:
<?php } elseif (is_page('archives')) { ?>Using this method, you can target any page of your site by using its post slug.
Downloaded CUTLINE, FTP’d folder into my themes folder, but when I attempt to locate the CUTLINE theme, it shows up as a “Broken Theme”, and give me the following:
Broken Themes
The following themes are installed but incomplete. Themes must have a stylesheet and a template.
Name Description
Cutline Stylesheet is missing.
I SEE the stylesheet.css in the folder, why does the error state it’s missing, and what do I do?
Thanks,
Brian
Brian, you have two themes folders in your root directory. I don’t know how this happened (and I’ve seen it happen once before), but I know that you have to delete one of these folders.
Make sure that the only file path that exists is the following:
path/to/wp/wp-content/themes/Cutline/Any other setup will cause an error.
Never mind, I figured it out.. haha..
I had uploaded the main CUTLINE folder, with both the Windows and MAC folders..
I think I’ve got it working.. looks great thus far..
I’ll reoprt back Chris, great looking template..
Chris, Thanks for the theme and all the hard work you’ve done with improvements and updates. I would like to ‘float’ the pictures behind the title and description on my site, to reclaim the extra 100px of space. I keep thinking it should be easy, but, so far, it has proved elusive. Do you have any suggestions I might try?
Larry,
This is actually a reasonably complicated issue. Some people have requested that I do a tutorial on how I was able to overlay the “random header images” link on the header image, and since your question and this topic are related, I’ll kill two birds with one stone.
Hopefully, I’ll be able to crank that out this week.
Thanks Chris. With my limited expertise, I was able to move the images to the top, and the image rotation worked fine, but I could never get the blog title and description back up over the pics. They wanted to be separate and no ‘float’ command, or anything else I could think of, would move them up.
Chris, I liked Cutline so much that I am using it in a 2nd blog-but this one is hosted and noticed when I tried to change the header that the WP.com version is way simpler than the 1.03 version. So for a n00b like me do you have the simplified version hidden away somewhere?
Gary
Cutline Theme Optimization for Joomla SEO Blog | Joomla SEO Blog by Pathos-Seo.com // Nov 14, 2006 at 3:14 pm
[...] Browsing through the post on the Cutline site, I found another coding example. How to Customize your Header Images Yet another eye-opener… [...]
After weeks of searching, I am please that I’ve found Cutline for WP. How can I put my logo at the top rather than the text for the title? I’ve seen this done on a couple of other sites so I know it can be done. Thanks!!
Mark
Mark,
In the
style.cssfile, there is a section demarcated by this code:/*---:[ header styles ]:---*/Underneath that section, the first two lines contain code that is commented out. If you uncomment those and follow the simple directions, you can add an image to your header (above the navigation links).
Give that a shot and let me know how it turns out.
I share the same need as Mark and would like to replace the header style to my logo. I have uploaded my logo image (mylogo.jpg) to the image folder. I read your instructions in the code but still couldn’t figure out how do make the necessary tweaks to link it to mylogo image. Which line do I need to change and where do I insert my link? My image size is 770 x 100px.
Thanks so much for the beautiful theme.
Hi Chris,
You have an amazing resource here. I’m trying to customize the Cutline theme with my own masthead graphic so I can implement the theme on my main blog. I have the graphic working by uncommenting the two lines in the style.css file but I can’t figure out how to get the default H1 name to disappear. Can you tell me how to accomplish that?
Thanks for online help!!
John
John,
Just delete the
<h1>reference that lies within themasthead divin yourheader.phpfile.Chris,
I just came across this template from a link Chris Glass posted on his LJ today. I realy like the way it’s laid out. I’ve uploaded and activated it, but the ‘About’ and ‘Archives’ pages give an HTTP 404 File Not Found error. How do I create pages for those two tabs?
Thanks.
Matt,
Ordinarily, I would suggest changing your WordPress permalink structure. However, because your site has been around for a while, changing the permalink structure is probably not an option (because it would blow all your current incoming links).
Instead, you can modify the header links to work with your existing permalink structure. Follow these instructions, and it ought to work like a champ.
Excellent. That seems to have worked. I have two other questions now that I just came across.
1. When I click on my Dashboard, I get an image of my home page, instead of the WP Dashboard, with this error at the top:
“Warning: extract(): First argument should be an array in C:\hshome\spectre\thepsychicpilot.com\wordpress\wp-includes\functions.php on line 2109″
What would cause that and how can I correct that?
2. I don’t see a built-in link to access the Dashboard from the website. All other themes I’ve used have had a login or admin link that would take you to the WP dashboard login page. I like not having one on this theme, but how do you access the dashboard without it?
Thanks again.
Matt,
/wp-admin.I just deactivated all Plug-ins (I was only using Akismet, a LiveJournal cross poster and video plug-in that I have used for months) and the error is still there. I switched back to my previous theme and I see a picture of that theme now, along with the same error. This sounds like something in the functions.php is corrupt, but I’ve never messed with it before. Any clue?
Matt,
That error has nothing at all to do with themes. A common misconception among WordPress users is that themes can cause problems with the Dashboard, but this is simply not the case.
Anyway, I recommend re-installing your functions.php file. I know that certain plugins modify core WordPress files, and that may be the case here. So, try overwriting that file with a fresh version, and then see if things start working properly.
Thanks, I’ll try that. One curious thing I’ve just noticed in playing around with it, is that if I use this extention: “/wordpress/wp-admin/” it goes to the dashoard without any problems. But, if I click on the Dashboard button on the Dashboard, it goes to this extention: “wordpress/wp-admin/admin.php?page=index.php”
So
Is it possible to have more than five random images?
Chris,
Thanks for CL, I’ve been having a good time putting KGP back together this week…
Two questions though, if you have the time:
1. Put my custom header in (I think to spec as you’ve laid it out above), but seem to have lost the “home” link to it somewhere along the way….
2. I can’t seem to up the font size in my little (literally) navigation menu located directly below the header image. Its barely readable at the moment due to my amateur hacking.
May have hacked away just a bit too much…. can you help me on these two points when you get a chance?
Thanks man. Take it easy.
Hey thanks for the theme, for some reason it made my site load a lot faster let alone made my site layout a lot cleaner. I am pretty new to all of this but found it easier to change to one header image without losing the random image function if I ever want to change it back. I just took my custom header image and changed the name to header_1.jpg and replaced it in the wp-content/themes/cutline/images via Filezilla. And then I simply renamed the header_1.jpg to header_2.jpg, then header_3.jpg, and so on until I replaced all the files with the same image with different file names. So now when I want to enable the original header switching function
all I have to do is upload a header file with the name replacing any of the header_.jpg file and I can enjoy the luxuries of this beautiful theme. It’s not rocket science but I thought it might help people if they didn’t want to lose the random image function. Thanks again for the theme but I thought I would suggest next time to have all the pages on a blog load with the cutline theme instead of just “front page” “archive” and “about” for us who are new to the WP.
Hi Chris,
I have uploaded CL as my wordpress presentation, but I am having trouble uploading a file from my Emac. The button won’t allow me to select a file to upload it’s so frustrating! please advise
Many Thanks
Abby
G’day,
Fantastic theme! How do I go about changing the color of the blog title (above the image header) from black to brown?
Thanks!
Broken theme cutline 1.1 Stylesheet is missing??
I have just tried to change my theme to Cutline 1.1 and it comes up with a Broken Theme “stylesheet is missing”.
I realise CP has designed it to work a stylesheet – custom.css but WP doesnt seem to be taking it. I also have read the intro set out in the custom.css file but I am struggling to work out what to do!
Ive got the blog on theworldofspain.com/wordpress you obviously wont be able to see the warning but it explain something?