Welcome! To use this support forum, please Login or Join Today!

   

Using Hook to Add Image above Header

{name}
Rank

Total Posts: 7

Joined 2014-04-25

PM

 

I want to add a graphic above the header image. I know there’s a hook that is supposed to allow me to do that, but I have NO idea how to use a hook.

Right now, I’m using a child theme. Can you please tell me how I apply the hook so the image shows above the header?

{name}
RankRankRankRank

Total Posts: 3667

Joined 2011-04-27

PM

 

Sure. You can do it like so:

function add_image_to_header() {
    
// align using classes: aligncenter, alignleft, alignright
    
echo '<img class="aligncenter" src="http://placehold.it/350x150/EEE/CCC&text=placeholder" class="scale-with-grid"/>';
}
add_action
('st_header','add_image_to_header'3); 


If you wanted a more portable solution, you could add the image to your child theme’s images folder and use the following:

function add_image_to_header() {
    $child_theme_url 
trailingslashit(get_template_directory_uri());
    
// align using classes: aligncenter, alignleft, alignright
    
echo '<img class="aligncenter" src="'.$child_theme_url.'images/YOUR-IMAGE.jpg" class="scale-with-grid"/>';
}
add_action
('st_header','add_image_to_header'3); 

*Note: the “scale-with-grid” class makes the image responsive to the parent #header container.