Support » Theme: Misty Lake » logo added to or instead of title

  • Hallo,
    I would like to add my logo to the title. Is that possible and how can I do it?
    Thanks for an answer
    Meike

Viewing 1 replies (of 1 total)
  • 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 2 months, 1 week ago by Kathryn. Reason: fix code formatting
Viewing 1 replies (of 1 total)
  • You must be logged in to reply to this topic.