Random thoughts on art, technology, stuff, and occasionally Real Estate: Thesis Theme Notes: Custom Banner

For anyone not familiar with my style here:  Active Rain is one of my favorite places to save miscellaneous notes to myself.  But I also figure, if I need to save these notes, maybe someone else will also find them helpful. 

To use a customer banner in the Thesis Theme for WordPress.

Create the banner.

Upload it to your host site.

FTP to your Thesis Theme files on your host server.   wp-content -> themes -> thesis_16

Change the file name  "custom-sample" to just "custom" if you haven't done that already.  Open the "custom" file.

Open (Edit) custom-functions.php (The menu command will depend on which FTP program you are using - the file will open in Notepad or in whatever text editor you have associated with code files)

Paste this code into custom-functions.php at the end of the file, below the instructions and the default bookmark code:

 function mycustom_banner() {
?>
<div id="mycustom-banner">
  <a href="http://www.bobtaylorproperties.info" title="Bob Taylor Properties Inc. Home">
  <img src="http://www.bobtaylorproperties.info/bobtaylorpropertiesbanner.png"
 alt="Bob Taylor Properties, Inc." ></a>
  </div>
<?php
 }

add_action('thesis_hook_before_header', 'mycustom_banner');

You'll probably want to change the alt titles and URLs to your own.  Although if you want to use mine I won't complain.  :-)

Thesis works with "hooks" and "functions". 

The "function" is the actual executable code - in this case the insertion of a banner image.

The "hook" is the LOCATION on the page you want the "function" placed - in this case before the Thesis default header.

Now, close the FTP program, go to the wp-admin panel for the site. Click Thesis Options at the bottom of the left menu column.

Under Display Options -> Header uncheck "Show site name in header" and "Show site tagline in header"

Save.

One last thing:  You may want to reduce the spacing before your banner image, to do that, go back to the Thesis files via FTP.  In the custom file, open up custom.css and add this line of code to the end of the file

.custom #header  { padding: 0px; margin: 0px; }