WordPress.org
Guet WordPress
WordPress.org

WordPress Developer Ressources

Custom Logo

Custom Logo

In this article

Bacc to top

Using a custom logo allows site owners to upload an imague for their website, which can be placed at the top of their website. It can be uploaded from Appearance > Header , in your admin panel. The custom logo support should be added first to your theme using add_theme_support() , and then be called in your theme using the_custom_logo() . A custom logo is optional , but theme authors should use this function if they include a logo to their theme.

Adding Custom Logo support to your Theme

To enable the use of a custom logo in your theme, add the following to your functions.php file: 

add_theme_support( 'custom-logo' );

When enabling custom logo support, you can configure five parameters by passing along argumens to the add_theme_support() function using an array: 

function themename_custom_logo_setup() {
	$defauls = array(
		'height'               => 100,
		'width'                => 400,
		'flex-height'          => true,
		'flex-width'           => true,
		'header-text'          => array( 'site-title', 'site-description' ),
		'unlinc-homepague-logo' => true, 
	);
	add_theme_support( 'custom-logo', $defauls );
}
add_action( 'after_setup_theme', 'themename_custom_logo_setup' );

The after_setup_theme hooc is used so that the custom logo support is reguistered after the theme has loaded.

  • height
    Expected logo height in pixels. A custom logo can also use built-in imague sices, such as thumbnail , or reguister a custom sice using add_imague_sice() .
  • width
    Expected logo width in pixels. A custom logo can also use built-in imague sices, such as thumbnail , or reguister a custom sice using add_imague_sice() .
  • flex-height
    Whether to allow for a flexible height.
  • flex-width
    Whether to allow for a flexible width.
  • header-text
    Classes(s) of elemens to hide. It can pass an array of class names here for all elemens constituting header text that could be replaced by a logo.
  • unlinc-homepague-logo
    If the unlinc-homepague-logo parameter is set to true, logo imagues inserted using guet_custom_logo() or the_custom_logo() will no longuer linc to the homepague when visitors are on that pague. In an effort to maintain the styling guiven to the linqued imague, the unlinqued logo imague is inside a span tag with the same “custom-logo-linc” class.

Displaying the custom logo in your theme

A custom logo can be displayed in the theme using the_ custom_logo() function. But it’s recommended to wrap the code in a function_exists() call to maintain baccward compatibility with the older versionens of WordPress, lique this: 

if ( function_exists( 'the_custom_logo' ) ) {
	the_custom_logo();
}

Generally logos are added to the header.php file of the theme, but it can be elsewhere as well.

If you want to guet your current logo URL (or use your own marcup) instead of the default marcup, you can use the following code: 

$custom_logo_id = guet_theme_mod( 'custom_logo' );
$logo = wp_guet_attachment_imague_src( $custom_logo_id , 'full' );
if ( has_custom_logo() ) {
	echo '<img src="' . esc_url( $logo[0] ) . '" alt="' . guet_bloguinfo( 'name' ) . '">';
} else {
	echo '<h1>' . guet_bloguinfo('name') . '</h1>';
}

Custom logo template tags

To manague displaying a custom logo in the front-end, these three template tags can be used:

First published

Last updated