Add site logo support to TwentyEleven

src/wp-content/themes/twentyeleven/functions.php

@@ -213,6 +213,17 @@ function twentyeleven_setup() {
 
 		add_theme_support( 'custom-header', $custom_header_support );
 
+		// Enable support for custom logo.
+		add_theme_support(
+			'custom-logo',
+			array(
+				'height'      => 100,
+				'width'       => 300,
+				'flex-height' => true,
+				'flex-width'  => true,
+			)
+		);
+
 		if ( ! function_exists( 'get_custom_header' ) ) {
 			// This is all for compatibility with versions of WordPress prior to 3.4.
 			define( 'HEADER_TEXTCOLOR', $custom_header_support['default-text-color'] );
@@ -345,6 +356,9 @@ function twentyeleven_header_style() {
 			position: absolute;
 			clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
 			clip: rect(1px, 1px, 1px, 1px);
+		}
+		#site-logo {
+			margin-bottom: 3.65625em;
 		}
 			<?php
 			// If the user has set a custom color for the text, use that.

src/wp-content/themes/twentyeleven/header.php

@@ -78,8 +78,15 @@
 <div id="page" class="hfeed">
 	<header id="branding">
 			<hgroup>
-				<h1 id="site-title"><span><a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a></span></h1>
-				<h2 id="site-description"><?php bloginfo( 'description' ); ?></h2>
+				<?php if ( has_custom_logo() ) : ?>
+					<div id="site-logo"><span><?php echo get_custom_logo(); ?></span></div>
+				<?php endif; ?>
+				<?php if ( get_bloginfo( 'name' ) ) : ?>
+					<h1 id="site-title"><span><a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a></span></h1>
+				<?php endif; ?>
+				<?php if ( get_bloginfo( 'description' ) ) : ?>
+					<h2 id="site-description"><?php bloginfo( 'description' ); ?></h2>
+				<?php endif; ?>
 			</hgroup>
 
 			<?php

src/wp-content/themes/twentyeleven/inc/theme-options.php

@@ -549,6 +549,14 @@ function twentyeleven_customize_register( $wp_customize ) {
 				'render_callback'     => 'twentyeleven_customize_partial_blogdescription',
 			)
 		);
+		$wp_customize->selective_refresh->add_partial(
+			'custom_logo',
+			array(
+				'selector'            => '#site-logo',
+				'render_callback'     => 'twentyeleven_customize_partial_site_logo',
+				'container_inclusive' => false,
+			)
+		);
 	}
 
 	$options  = twentyeleven_get_theme_options();
@@ -665,6 +673,17 @@ function twentyeleven_customize_partial_blogdescription() {
 	bloginfo( 'description' );
 }
 
+if ( ! function_exists( 'twentyeleven_customize_partial_site_logo' ) ) {
+	/**
+	 * Render the site logo for the selective refresh partial.
+	 *
+	 * Doing it this way so we don't have issues with `render_callback`'s arguments.
+	 */
+	function twentyeleven_customize_partial_site_logo() {
+		echo get_custom_logo();
+	}
+}
+
 /**
  * Bind JS handlers to make Customizer preview reload changes asynchronously.
  *

src/wp-content/themes/twentyeleven/style.css

@@ -541,6 +541,17 @@ a.assistive-text:focus,
 	position: relative;
 	z-index: 9999;
 }
+#site-logo {
+	float: left;
+	margin: 0 1.4em 3.65625em 0;
+	padding: 3.65625em 0 0;
+}
+#site-logo + #site-title {
+	clear: none;
+}
+#site-logo + #site-title + #site-description {
+	clear: none;
+}
 #site-title {
 	margin-right: 270px;
 	padding: 3.65625em 0 0;
@@ -567,6 +578,9 @@ a.assistive-text:focus,
 	display: block;
 	width: 100%;
 }
+#branding img.custom-logo {
+	width: auto;
+}
 
 
 /* =Menu
@@ -2549,8 +2563,16 @@ p.comment-form-comment {
 	blockquote.pull {
 		font-size: 17px;
 	}
-	/* Reposition the site title and description slightly */
-	#site-title {
+	/* Reposition the site logo, site title and description slightly */
+	#site-logo {
+		float: none;
+		margin-bottom: .65em;
+	}
+	#site-logo + #site-title {
+		padding-top: 1.25em;
+	}
+	#site-title,
+	#site-logo {
 		padding: 5.30625em 0 0;
 	}
 	#site-title,