logo added to or instead of title

Hi there!

Misty Lake wasn’t built with logo support, but you can add it with a child theme if you’d like!

Once you have a child theme set up, there are a few things you’ll want to do.

First, make sure you have the Jetpack plugin installed and activated, so we can use it’s built in logo functionality.

Next, in the child theme’s functions.php file we’ll add support for the logo feature with the following code:

//Site logo
add_image_size( 'misty-lake-site-logo', 300, 150 );
add_theme_support( 'site-logo', array(
	'header-text' => array(
		'site-title',
		'site-description',
	),
	'size' => 'misty-lake-site-logo',
) );

From there, we’ll need to actually display the logo. That comes in two parts. First, we’ll need to make a copy of the parent theme’s header.php file in our child theme folder.

In that copy we’ll want to find the site-branding section, which looks like this:

<div class="site-branding">
	<h1 class="site-title"><a>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a></h1>
	<h2 class="site-description"><?php bloginfo( 'description' ); ?></h2>
</div>

We’ll replace that with a modified version that adds the logo, and groups the title and tagline together for easier alignment later on:

<div class="site-branding">
	<div class="site-logo">
		<?php
		if ( function_exists( 'jetpack_the_site_logo' ) ) {
			jetpack_the_site_logo();
		}
		?>
	</div>
	<div class="site-identity">
		<h1 class="site-title"><a href="<?php echo esc_url( home_url( '/' ) ); ?>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a></h1>
		<h2 class="site-description"><?php bloginfo( 'description' ); ?></h2>
	</div>
</div>

Lastly, a bit of CSS to make it all line up:

.site-logo,
.site-identity {
	float: left;
}

.site-logo {
	margin: 0 10px 10px 0;
}

Let me know how it turns out!

• This reply was modified 8 years, 1 month ago by Kathryn Presner. Reason: fix code formatting