Add a Custom Logo to the WordPress Theme

To add a custom logo to a WordPress theme, you can use the add_theme_support() function along with the custom-logo feature. This feature allows you to easily add a custom logo to your theme through the WordPress Customizer.

Here’s an example code snippet that demonstrates how to add a custom logo to a WordPress theme:

// Add support for custom logo
function wpsnippets_add_custom_logo() {
    add_theme_support( 'custom-logo' );
}
add_action( 'after_setup_theme', 'wpsnippets_add_custom_logo' );

In this code snippet, we define a custom function wpsnippets_add_custom_logo() that adds support for the custom-logo feature using the add_theme_support() function. We then hook this function to the after_setup_theme action using the add_action() function.

Once you’ve added this code to your theme’s functions.php file, you can go to the WordPress Customizer (Appearance > Customize) and you should see a new section for adding a custom logo. From there, you can upload or select an image to be used as your logo.

This code snippet is useful when you want to provide a way for users to easily add a custom logo to their WordPress theme without having to modify the theme files directly. It follows the WordPress coding standards and ensures compatibility with the Customizer API.

Examples

Example 1: Adding a custom logo using the custom_logo theme support

This example demonstrates how to add a custom logo to a WordPress theme using the custom_logo theme support. The code snippet registers the theme support for custom logo and displays it in the theme’s header.

// Add theme support for custom logo
add_theme_support( 'custom-logo' );

// Display the custom logo in the header
function wpsnippets_display_custom_logo() {
    if ( function_exists( 'the_custom_logo' ) ) {
        the_custom_logo();
    }
}

In this code example, the add_theme_support() function is used to add the custom-logo theme support, which enables the custom logo feature in the theme. The wpsnippets_display_custom_logo() function is then used to display the custom logo in the theme’s header by calling the the_custom_logo() function.

Example 2: Adding a custom logo using a custom function

This example demonstrates how to add a custom logo to a WordPress theme using a custom function. The code snippet registers a custom function that outputs the custom logo HTML markup and then calls this function in the theme’s header.

// Register custom function for displaying the custom logo
function wpsnippets_display_custom_logo() {
    $custom_logo_id = get_theme_mod( 'custom_logo' );
    $custom_logo_url = wp_get_attachment_image_url( $custom_logo_id, 'full' );

    if ( $custom_logo_url ) {
        echo '<img src="' . esc_url( $custom_logo_url ) . '" alt="' . get_bloginfo( 'name' ) . '">';
    }
}

In this code example, the wpsnippets_display_custom_logo() function is registered to output the custom logo HTML markup. The function retrieves the custom logo ID using get_theme_mod(), gets the URL of the custom logo image using wp_get_attachment_image_url(), and then outputs the HTML markup for the custom logo using echo.

Example 3: Adding a custom logo with a fallback using the has_custom_logo function

This example demonstrates how to add a custom logo to a WordPress theme with a fallback option using the has_custom_logo() function. The code snippet checks if a custom logo is set and displays it, otherwise it falls back to displaying the site title.

// Display the custom logo or site title
function wpsnippets_display_custom_logo() {
    if ( has_custom_logo() ) {
        the_custom_logo();
    } else {
        echo '<h1>' . get_bloginfo( 'name' ) . '</h1>';
    }
}

In this code example, the wpsnippets_display_custom_logo() function is used to display either the custom logo or the site title. It checks if a custom logo is set using the has_custom_logo() function, and if so, it displays the custom logo using the_custom_logo(). If no custom logo is set, it falls back to displaying the site title using get_bloginfo().