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.
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', ) ) );
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.
<?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.
christine
December 2, 2012 at 8:27pmCrickey that’s so super easy. The theme customizer looks pretty powerful. Thanks for sharing. I’ll need to update my theme and get rid of the theme options in favour of the customizer.
Kirk Wight
December 2, 2012 at 11:10pmHonestly, I never got in to options panels because I found working with the Settings API to be a pain in the ass for little return. The Theme Customizer has changed all that for me
For all things Theme Customizer, Otto’s tutorials are invaluable, particularly regarding the real-time postMessage transport stuff.
Sonia
January 14, 2013 at 10:01amMore Theme Customizer tutorials please. This, as always, was way easier to understand.
Kirk Wight
January 14, 2013 at 10:24amMore planned when time allows! The Theme Customizer is easily my favourite thing going on in WordPress themes these days.
Castle
April 1, 2013 at 12:29amNice tutorial.
I noticed that you cannot define an ‘default logo’ image, or at least i’m not being able to display it, if there is no logo uploaded. Any hints?
Thanks,
Castle
Kirk Wight
April 1, 2013 at 7:44amTo have a default logo, just place it between the “else” and “endif” in your header.php file, replacing the <hgroup> I’ve used above. This is the code that gets displayed if no logo is set in the Theme Customizer.
Native Imaging
April 1, 2013 at 9:01pmNot sure if there’s something wrong with the snippet copy & pasting, but this code didn’t work for me. Is there a full copy of the code for simple clean copy & paste? Thank You for the tut.
Kirk Wight
April 3, 2013 at 10:58pmWhen you say it doesn’t work, what problem are you experiencing? For more details, you can check out Otto’s tutorials mentioned above, that go into more detail. There’s also the Codex (https://codex.wordpress.org/Theme_Customization_API).
Native Imaging
April 6, 2013 at 4:52pmThank You for the tutorial. I found this on Github and thought you may find it interesting incase you haven’t found it yet. https://gist.github.com/eduardozulian/4739075
This is supposed to extend the options of the custom image uploader to function properly like the background and header image do by default. For some reason, I cannot get it to work. I posted a request on the page as well, but haven’t gotten any responses, so I thought it would be useful for everyone to share this code snippet here.