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:
[php]function m1_customize_register( $wp_customize ) {
// All the code in this tutorial goes here
}
add_action( ‘customize_register’, ‘m1_customize_register’ );[/php]
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.
[php]function m1_customize_register( $wp_customize ) {
$wp_customize->add_setting( ‘m1_logo’ ); // Add setting for logo uploader
}
add_action( ‘customize_register’, ‘m1_customize_register’ );[/php]
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.
[php]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’ );[/php]
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:
[php]require get_template_directory() . ‘/inc/customizer.php’;[/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:
[php]get_theme_mod( ‘m1_logo’ )[/php]
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]
[/php]
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:
[php]src=”“[/php]
That calls the file url for the uploaded logo, and sets it as the image source.
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.
That about does it, have fun!
Further reading:
Comments
26 responses to “Add a custom logo uploader to the WordPress theme customizer”
Its not work 🙁
Displaying, but dont uploading.
Same problem here.
Does any one find solution of this?
How to display logo witdth and height?
Hi
Same as above. When trying to load customizer.php I’m getting this error
” Fatal error: Call to undefined method WP_Customize_Manager::get_etting() in” …
Super article, works like a charm, Thanks!
awesome code, works supper. Thanks!
works great! thanks very much very easy to follow method 🙂
It’s works for me too.
Keep it up!
awesome code! it’s work good.
I did you getting it working everytime I get this message –> Warning: call_user_func_array() expects parameter 1 to be a valid callback, function ‘m1_customize_register’ not found or invalid function name in /Users/brandonpowell/sites/valet/wordpress-development/web/wp/wp-includes/class-wp-hook.php on line 298
Great!
Thanks Scott – just what I needed 🙂
Great article, works like a charm, thanks! Let move our stuff from theme options to Customizer!
Doesn’t work; it crashes my site.
It works! Thank you so much for this article.
Thanks man works really well!
for those of you who asked above how to add width height, you can add that in the display logo code, by adding a css class maybe.
Great help! Thanks heaps!
Nice Article
Great help! Thanks
Thank you so much for this! I’m nowhere near a programmer and have tried lots of different tutorials for adding a logo upload to themes, but this is the only one I’ve been able to get to work! 🙂
Worked great!
Thanks
Great Tutorial Work Awesume
Code Worked great!
Thanks ^_^
Thank you so much for this! just what I needed ?
Where is it stored in the database once it is set? Are you able to show the output please once set?