Add site logo support to TwentyTwelve

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

@@ -125,6 +125,16 @@ function twentytwelve_setup() {
 		)
 	);
 
+	// Enable support for custom logo.
+	add_theme_support(
+		'custom-logo',
+		array(
+			'height'      => 90,
+			'width'       => 270,
+			'flex-width'  => true,
+		)
+	);
+
 	// This theme uses a custom image size for featured images, displayed on "standard" posts.
 	add_theme_support( 'post-thumbnails' );
 	set_post_thumbnail_size( 624, 9999 ); // Unlimited height, soft crop.
@@ -669,6 +679,14 @@ function twentytwelve_customize_register( $wp_customize ) {
 				'render_callback'     => 'twentytwelve_customize_partial_blogdescription',
 			)
 		);
+		$wp_customize->selective_refresh->add_partial(
+			'custom_logo',
+			array(
+				'selector'            => '#site-logo',
+				'render_callback'     => 'twentytwelve_customize_partial_site_logo',
+				'container_inclusive' => false,
+			)
+		);
 	}
 }
 add_action( 'customize_register', 'twentytwelve_customize_register' );
@@ -699,6 +717,15 @@ function twentytwelve_customize_partial_blogdescription() {
 	bloginfo( 'description' );
 }
 
+/**
+ * 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 twentytwelve_customize_partial_site_logo() {
+	echo get_custom_logo();
+}
+
 /**
  * Enqueue JavaScript postMessage handlers for the Customizer.
  *

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

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

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

@@ -553,6 +553,10 @@ a:hover {
 	padding: 24px 0;
 	padding: 1.714285714rem 0;
 }
+#site-logo {
+	margin: 0 0 1rem 0;
+	text-align: center;
+}
 .site-header h1,
 .site-header h2 {
 	text-align: center;
@@ -1559,6 +1563,17 @@ img#wpstats {
 		float: right;
 		width: 26.041666667%;
 	}
+	#site-logo {
+		float: left;
+		margin: 0 1.4em 1.714285714rem 0;
+		text-align: left;
+	}
+	#site-logo + .site-title {
+		clear: none;
+	}
+	#site-logo + .site-title + .site-description {
+		clear: none;
+	}
 	.site-header h1,
 	.site-header h2 {
 		text-align: left;