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:
In addition, each of the default header images is 770px wide by 140px high.
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:
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:
- 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 —
- single entry pages —
- non-entry pages (such as About or Archives) —
- archive index pages —
- 404 error pages —
And there you have it, folks! If you need additional help, please give a shout out in the comments.