How to post a custom banner image in the Barthelme WordPress theme

Barthelme screenshot
Barthelme screenshot

I’ve had to look this up a couple times and have to keep re-learning it, so I’m just making a simple step-by-step here to explain the process.

The default look for the Barthelme theme includes a gradient banner. If you want to replace the banner, it’s actually not too complicated, but you have to replace one line of code. So here’s the process.

0. Before you start, you should, of course, make backups of all the Barthelme files, so if you screw up you can restore them. You should also enable the Barthelme theme.

1. Create your banner image and upload it into the Barthelme images directory. Find the URL for the image. Mine is called “personalheader.jpg” The image will be displayed as a background css element, so be sure you know how that will scale and/or appear in your browser.

2. Now you need to edit the file called “functions.php” in the Barthelme theme directory. You can do this in one of two ways:

2.a. From the WordPress “Design” dashboard, you can use the “theme editor” to open functions.php

2.b. You can edit the file using a text editor, but be sure you use a programming-appropriate one like emacs or notepad. The key is that the program mustn’t add metacharacters to the file. Using Word will likely bork your file.

3. Add your new background instruction:

3.a. Go down to line 710. It’s part of the section labeled “CSS inserted by Barthelme theme options.” You can do a search for the string “div#header{background”. The line you’re looking for looks like this:

body div#header{background:#<?php echo $lowercolor; ?> url("<?php echo get_template_directory_uri(); ?>/images/header-img.php?upper=<?php echo $uppercolor; ?>&lower=<?php echo $lowercolor; ?>") repeat-x left top;}

3.b. Change line 710 to say this:

body div#header{background: url(wp-content/themes/Barthelme/images/personalheader.jpg) top center;}

You should change “personalheader.jpg” to whatever file name you used, and if you want to monkey with the alignment or display of the image, change “top” and “center” to appropriate commands.  Also, you should check to see if “Barthelme” is capitalized in your installation or not — apparently it sometimes installs without the capital B. Be careful, though, CSS is tricky and will do nothing at all if it’s coded wrong.

4. Save your new functions.php and upload it (if you used method 2.b.) to the server. Refresh your page and your new image should appear.

5. Depending on the size of your image, you may want to monkey with the alignment of the header block, the title and the subtitle. You can find these settings in style.css attached to the label “div#header”. I made my adjustments to “body div#header” by altering the “em” count slightly, uploading and refreshing, and repeating this process until the site looked the way I wanted it to.

Please add a comment if these directions have been helpful to you.

12 thoughts on “How to post a custom banner image in the Barthelme WordPress theme”

  1. Does WordPress 2.7 change all this? I upgraded today and got WHOA MAN THIS IS DIFFERENT. No way I’m upgrading the blogs for my class; the students would go ape.

  2. I have been trying to upload my header as per your instructions but it doesn’t work. I am not sure what I did wrong… followed the instructions to a T. I was able to fiddle with the font size and weight of my header though – thanks!

  3. Hrm — I looked at your page and can see your header image, but you have “clean-home” enabled now.. If you want to email me the code for your stylesheets and front page as it’s rendered, I’ll be happy to take a look.

    Or just activate Barthelme and I’ll take a look at the active page.

  4. Thanks for the guide! I had a little trouble with it at first as it could not find the new file – the directory path on my installation doesn’t have a capital on Barthelme so refused to work until I decapitalised it – just a little note in case anyone else is having the same problem. 🙂

  5. Thanks for this.
    However, image only shows on first page!
    also, I’d like to set the image size – height width – is this possible?.

  6. Marianne,
    As for the first page issue, I’m not sure what the problem could be. Two things to check: It seems most likely to me that your pages are cached and thus the code is not propegating. You could try flushing the cache on the wordpress end or you could do a “forced refresh” on your end by holding CTRL as you click refresh. If that doesn’t work, check that your archive / page templates use the same header that your front page does.

    You can send me the URL to your pages and I can glance at the code to see if something stands out as the problem.

    As for size, see step 5 for my knowledge about that.

  7. Hi there-

    I was wondering if you might be able to give me any advice. I installed Barthelme and am very happy with the way it looks. I managed to get the custom header/banner in place and all seemed to be good.

    Then, when I checked the “archives” none of the formatting for the text was there. When you load the main page it is, but whenever you check a tag or a category or monthly archive all the formatting disappears and it looks horrible. Do you know what is wrong here? Sorry to bug you, I just had no idea what to do.

    Also – do you have any idea how to still have a title on the blog but not have the words come up over top of the customised header?? My header has the words I want on it. Really I just want an image to completely replace the header section.

    Sorry if these are not the kinds of questions you can answer, just thought I would check.

    Thanks for the great post on how to get a custom header in.

    All the best-
    Dick Whyte

  8. Hi Dick,

    The archives are governed by their own template pages. If you click “Editor” in the dashboard “Appearance” sub-section, you should be able to open up the Main Index Template and the Archives Template. Comparing them should give you a sense of how to make your archives look like the main page.

    Regarding the title — look in the header.php document. There should be a line like this:

    <h1 id=”blog-title”><a href=”<?php echo get_settings(‘home’) ? rel=”nofollow”>/” title=”<?php bloginfo(‘name’) ?>”><?php bloginfo(‘name’) ?></a></h1>

    Deleting that line should delete the header text from your image.

    Good luck!

Leave a Reply