How to add image to header from child theme, use themeblvd_header_addon

[merrymint]

We are trying to add a linked image to the header on http://www.eissinc.com – to fall in line between the logo on the left and the social icons on the right. We’ve tried to follow some of your suggestions on other threads but nothing we try has worked yet. The image we are adding either ends up above the header, pushing it down, or between the header and the navigation area below it. We are not very familiar with PHP code, so any assistance you can give would be helpful. Thanks!

Note: Currently, we’ve just added the code to header.php to at least get it on the page, since it is a crucial element needed by our client.

Topic

[Jason Bobich]

Hi,

This will work best if you hook your content it to the action, themeblvd_header_addon.

In doing customizations like this, it’s crucial that you setup a child theme. And you’ll need to start learning a bit of PHP if you want to customize WP themes in this way. But don’t worry, many have gone down this path and succeeded. 😉

Please watch this video from your documentation:

https://vimeo.com/70832266

And since you’ve already started configuring your site, be aware of the following things when activating your child theme:

http://dev.themeblvd.com/tutorial/switching-to-a-child-theme-after-youve-already-started-building-your-website/

Then just hook your callback function, which outputs the HTML to themeblvd_header_addon. It can be easy as this from your child theme’s functions.php:

/**
 * Add promo image to header
 */
function eiss_header_addon() {
	?>
	<a href="http://www.eissinc.com/?page_id=4316" class="eiss-promo">
		<img src="http://www.eissinc.com/wp-content/uploads/2015/04/promo_seal_short.png" />
	</a>
	<?php
}
add_action( 'themeblvd_header_addon', 'eiss_header_addon' );

Then, you need to style your promo badge with CSS from your child theme’s style.css to sit exactly where you want.

Notice how I added the class “eiss-promo” to the HTML? This way you can style like this:

.eiss-promo {
	/* position your element ... */
}

[merrymint]

Thanks so much for the info – we will definitely look into learning child themes for the future!

[Author]

Replies