How to add custom logo in wordpress theme

The WordPress theme customizer is famous for being able to change your theme colors in real time, but did you know it can handle almost any type of theme option?
You can add layout options, image uploaders, text fields, and lots more. The possibilities are endless!
There is almost no need for theme options pages anymore. I personally like the idea of having no theme options page, and limiting everything to the theme customizer.
I’m going to show you how to add a custom logo uploader to your theme customizer, then display it in place of the site title and tagline.

Create the logo uploader setting

This may be review for some of you, but I’ll go over my basic setup for using the theme customizer. In my custom theme folder most of the code is going into /inc/customizer.php, and then we will include that file via functions.php. You could put all the code into functions.php and it will work, but it’s nice to keep functions.php uncluttered.
First, we create our function to register the new settings. I’ve prefixed my function name with m1, but you can use whatever you want:

function m1_customize_register( $wp_customize ) {

    // All the code in this tutorial goes here

}

add_action( 'customize_register', 'm1_customize_register' );

Inside our function we need to register a setting. This saves the logo url in the database so we can use it in our theme.

function m1_customize_register( $wp_customize ) {

    $wp_customize->add_setting( 'm1_logo' ); // Add setting for logo uploader

}

add_action( 'customize_register', 'm1_customize_register' );

Next, we add the uploader and assign it to a section. You could create a new section, but I think it goes nicely with the title and tagline. If you are using a different name for your setting, make sure you change all instances of m1_logo to something else.

function m1_customize_register( $wp_customize ) {

    $wp_customize->add_setting( 'm1_logo' ); // Add setting for logo uploader

         

    // Add control for logo uploader (actual uploader)

    $wp_customize->add_control( new WP_Customize_Image_Control( $wp_customize, 'm1_logo', array(

        'label'    => __( 'Upload Logo (replaces text)', 'm1' ),

        'section'  => 'title_tagline',

        'settings' => 'm1_logo',

    ) ) );

}

add_action( 'customize_register', 'm1_customize_register' );

That’s it for the code in customizer.php. To make sure our theme uses this file, simply add this one line of code in functions.php:

require get_template_directory() . '/inc/customizer.php';

That’s it! We kept our functions.php file clean as a whistle.
Next we need to display our logo.

Displaying the logo

We are going to work in our theme’s header.php file to display the logo. If there is no logo, we’ll just display the site title and description.
To get the logo url from our theme customizer, you use this code:

get_theme_mod( 'm1_logo' )

You can store that in a variable if you want, or echo it out as is. Since we are only using this value once in our theme, we don’t need to store it in a variable.
Wherever your site title is displayed in header.php, you’ll want to replace it with this code:

<?php if ( get_theme_mod( 'm1_logo' ) ) : ?>

    <a href="<?php echo esc_url( home_url( '/' ) ); ?>" id="site-logo" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" rel="home">

        <img src="<?php echo get_theme_mod( 'm1_logo' ); ?>" alt="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>">

    </a>

    <?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>

        <p class="site-description"><?php bloginfo( 'description' ); ?></p>

    </hgroup>

               

<?php endif; ?>

So let’s talk through that chunk of code. First, we create an if statement that says, “if a theme logo has been uploaded, display this logo code. Otherwise, display the site title and site description.”
The logo is linked to the homepage, it has some alt text, blah blah blah. The important part is this:

src="<?php echo get_theme_mod( 'm1_logo' ); ?>"

Make sure to tell the user a recommended logo size, otherwise they can upload a huge file that doesn’t fit quite right. You might also want to give the container around the logo a constrained width, so it will fit no matter what.