Adding a Logo Uploader In WordPress Theme

A Logo is a design symbolizing ones organization. In a website logo plays an important role. Most of the WordPress theme comes with an in built feature of logo uploader. But when we works with any base theme like Twenty Fourteen there is no option like a logo uploader.

Here we learn to create a logo uploader using the Theme Customizer

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

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.

$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:

$wp_customize->add_setting( 'themeslug_logo' );

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

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

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

<?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 esc_url( 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; ?>

All done! Hope this tutorial will help you to make a custom logo uploader. For any further query please feel free to comment.