Header Image with Text – News Theme

[VisualFish]

Good Morning Team!

TIA for any help you can provide.

I am using the News Theme and I would like to put a logo next to the text in my header. I tried using the background image but that distorts the image.

An example of what I'm trying to achieve is on this very page. At the top of the forum page you see the STUDIOPRESS name but with a small image beside it. That is what I'm trying to achieve.

Any help would be appreciated!

site: http://www.scubagogy.com

~Lewis

http://www.scubagogy.com

[ᴅᴀᴠɪᴅ]

if you're comfortable editing your functions.php file (you will want to do this in a staging area or local environment, not on your live site) Then you can add this code to the bottom of the file and change it for your site.

// Filter the title with a custom function
add_filter('genesis_seo_title', 'wap_site_title' );

// Add additional custom style to site header
function wap_site_title( $title ) {

    	// Add your image location and the name of your website below.
	$custom_title = '<img class="site-logo" src="/images/custom-logo.png"> Your Site Title Here';

	// Don't change the rest of this on down

	// If we're on the front page or home page, use <code>h1</code> heading, otherwise us a <code>p</code> tag
	$tag = ( is_home() || is_front_page() ) ? 'h1' : 'p';

	// Compose link with title
	$inside = sprintf( '<a href="%s" title="%s">%s</a>', trailingslashit( home_url() ), esc_attr( get_bloginfo( 'name' ) ), $custom_title );

	// Wrap link and title in semantic markup
	$title = sprintf ( '<%s class="site-title" itemprop="headline">%s</%s>', $tag, $inside, $tag );
	return $title;

}

You can either shrink down your image before hand, so it fits nicely next to the text or style it using CSS to fit; eg..

.site-logo {
   height: 60px;
   width: 120px;
}

---

I love helping creative entrepreneurs build epic things with WP & Genesis.

Follow on Twitter

[Author]

Posts