Skip to content

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.

Post a Comment

Your email is never published nor shared. Required fields are marked *