Adding a logo uploader to your WordPress theme with the Theme Customizer

Let’s create a logo uploader using the new Theme Customizer, which was released with WordPress 3.4. This will allow users to place an image in our theme’s header; if no logo has been uploaded, we’ll fall back to displaying the site title and description instead.

For a more in-depth description of the Theme Customizer, including practical examples, code and more, see Otto’s excellent tutorials. If you are completely new to the Theme Customizer, I highly recommend at least scanning through them, to better understand the methods we’ll be calling in our code.

When working with the Theme Customizer, we should be creating sections, settings and controls within a function being fired on the customize_register hook. Create this function in your theme’s functions.php. The next three code blocks will go within this function.

1 2 3 4

function themeslug_theme_customizer( $wp_customize ) {     // Fun code will go here } add_action('customize_register', 'themeslug_theme_customizer');

First, we’ll create a new section for our logo upload. Note that the description will not be displayed when using the Theme Customizer; it is simply used for the section heading’s title attribute.

1 2 3 4 5

$wp_customize->add_section( 'themeslug_logo_section' , array(     'title'       => __( 'Logo', 'themeslug' ),     'priority'    => 30,     'description' => 'Upload a logo to replace the default site name and description in the header', ) );

Next, we register our new setting. It doesn’t get any easier than this:

1	$wp_customize->add_setting( 'themeslug_logo' );

Lastly, we tell the Theme Customizer to let us use an image uploader for setting our logo:

1 2 3 4 5

$wp_customize->add_control( new WP_Customize_Image_Control( $wp_customize, 'themeslug_logo', array(     'label'    => __( 'Logo', 'themeslug' ),     'section'  => 'themeslug_logo_section',     'settings' => 'themeslug_logo', ) ) );

That wraps up our work in functions.php.

To output our new logo to the screen, we’ll need to call our setting with get_theme_mod somewhere in our theme’s header (I’ll be working in my theme’s header.php template file). However, if the user hasn’t set a logo, we’ll want to output the site title and description instead.

1 2 3 4 5 6 7 8 9 10

<?php if ( get_theme_mod( 'themeslug_logo' ) ) : ?>     <div class="site-logo">         <a href="<?php echo esc_url( home_url( '/' ) ); ?>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" rel="home"><img src="<?php echo get_theme_mod( 'themeslug_logo' ); ?>" alt="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>"></a>     </div> <?php else : ?>     <hgroup>         <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>     </hgroup> <?php endif; ?>

Style your logo container as desired, and you’re done! For an example of the above code in action, check out my Debut starter theme on GitHub.

Courtesy /Source:- http://kwight.ca/blog/adding-a-logo-uploader-to-your-wordpress-site-with-the-theme-customizer/

-By Parthiv Patel