How to add your own custom header with hooks

To put your own image or header image in the “header location”, its a really simple matter of writing a function. The function makes it easy to upload the image. It’s a lot easier when you upgrade as well.

Make sure your image is in your custom/images folder.

In your custom_functions.php file add the following code. You can put it anywhere you want but I recommend putting it at the top after the <?php tag. Always describe the function and put it between the comment tags /*  */ at the beginning shown below in green. The comments aren’t shown on your rendered page and it just makes things easier for you to remember…

/*custom header image*/
function mycustomheader () { ?>
<div id =”headername” ><img src=”<?php bloginfo(’template_directory’) ?>/custom/images/myheader.png” alt=”  ” />
</div>
<?php }
remove_action ( ‘thesis_hook_header’,'thesis_default_header’);
add_action (’thesis_hook_header’, ‘mycustomheader’);

Name your custom function. I used “mycustomheader” just for an example.

Wrap it in a div tag, give it an id or class name whatever you want. That way you can style it in the custom.css with the name of “.headername” or “#headername”.  Name it whatever you want.

Check out the php code in the img src. It makes it a lot easier than having to type the entire path.

You have to “un-hook” the default header first. That’s what the “remove_action” does.

Add your image in your header area with the add_action ‘thesis_hook_header’ and hang your “mycustomheader” on it.

Tagged as: add, add your own custom header, custom, functions, header, hooks