tschaki

Insert logo via Customizer

In order to upload and change your own logo via WordPress, two basic template changes are required. The logo functionality must be added in the theme functions.php file. Then the logo can be retrieved via WordPress’ own function get_custom_logo( ).

Enable Logo Function

To activate the logo function in the WordPress theme, the following code must be added to the active functions.php file:

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

This code tells WordPress that this theme supports the logo function. In addition to the height and width of the logo to be displayed, the title and text are also defined if no logo has been uploaded.

The logo can be uploaded and selected under “Appearance” -> “Header”.

Embed logo in header file

To insert the logo on the website, add the following code to the header.php file:

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

This code checks whether the function the_custom_logo exists. If this is the case, the logo is output and displayed as an HTML <img>-tag via the_custom_logo( ).

To gain more control over the embedded logo, for example to add own classes or ID, only the image URL can be output with the following code. The correct packaging of the URL must then be done by the user and could look like this:

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

If a custom logo has been uploaded to WordPress, the image is output in an <img>-tag. If no logo is available, the blog name is output in an <h1>-tag instead.

Source: WordPress Codex

Trent Bojett

My name is Trent Bojett, I am 28 years old and I live in Switzerland. Because of my enthusiasm for writing and the logical world (= software development) I started this blog in early 2020.

Add comment

Language

Follow us

Don't be shy, get in touch. We love meeting interesting people and making new friends.

Most popular

Most discussed