How to Add a Logo Uploader to a WordPress Theme

Many WordPress themes have a built-in logo uploader, and there are some that don’t. If your WordPress theme doesn’t utilize one, you’ll learn how to create and implement one in this post. You probably have seen forum posts and other blogs demonstrating the same thing, but there are two problems:

  • The final product will prevent the website from loading and make WordPress backend access impossible (oh, the horror…).
  • The scripts won’t function at all.

Eventually, I have worked out an unfailing solution. We’ll create a file called customizer.php and add some code to functions.php and header.php. To gain full control of the WordPress files and directories, use an FTP client such as FileZilla.

customizer.php

Before creating customizer.php, we’ll add a new folder called ‘inc’ within the theme folder. We will use this folder for additional includes like the customizer.php file we’ll create. After that, we’ll add the following code to customizer.php that will register a Logo panel to the Customizer (Appearance > Customize).

<?php
function theme_customize_register( $wp_customize ) {
	$wp_customize -> add_section( 'tagline' , array(
		'title' => __( 'Logo', 'theme' ),
		'priority' => 30,
		'description' => 'Replaces site name and description',
	) );
		 
	$wp_customize -> add_setting( 'theme_logo' );
		 
	$wp_customize -> add_control( new WP_Customize_Image_Control( $wp_customize, 'theme_logo', array(
			'label' => __( 'Upload Logo', 'theme''section' => 'tagline',
			'settings' => 'theme_logo',
		) ) );
	}
	add_action( 'customize_register', 'theme_customize_register' );
?>

The theme_customize_register() function here will write the Logo section, description, and an underlying Upload Logo heading in the Customizer’s left panel. It’ll also add and register the setting for it.

functions.php

Then, we’ll add the following PHP code to functions.php. This will import the code that from customizer.php file.

<?php
    require get_template_directory() . '/inc/customizer.php';
?>

header.php

In header.php, we’ll add the code below to where you want your logo to be located. In this case, I used a div with an id of banner, as it would be a good place for any website banner or logo.

<div id="banner">
	<?php if ( get_theme_mod( 'theme_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( 'theme_logo' ); ?>"
	  	alt="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>">
	  	</a>

	<?php else : ?>

		<span 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>
		</span>
		<br>
		<span class="site-description"><?php bloginfo( 'description' ); ?></span>

	<?php endif; ?>
</div>

If PHP finds an uploaded logo, then it will print the <a> element containing the <img> element for the logo. And if it cannot find a logo, then it will print the site title and description instead.

Finally, in your WordPress backend, let’s go to Appearance > Customize, and we should now see an additional Logo panel in the Customizer!

Logo uploader option in Customizer

Conclusion

With this nice little feature for your WordPress theme, there will be no need surf through any HTML or PHP code to add or change your website logo ever again. Having this logo uploader in the Customizer will provide a necessary interface that allows you to update or remove your logo easily.


Posted in: Wordpress