Easy Steps To Add Dynamic Logo In WordPress

Sayan Dey

Sayan Dey / September 11, 2022

2 min read––– views

If you are developing a WordPress theme and want to give users the option to add their own custom logo, follow this step-by-step guide.

Now, you have two options to add the custom logo to your theme.

With the help of function.php

WordPress core features an add_theme_support() function you can add to your functions.php file.

  • The first parameter (string) is the name of the feature you want to support. In this case, the value is 'custom-logo'.
  • The second parameter (array) is the settings for the feature

Registers theme support for a given feature. For more information visit add_theme_support() documentation.

add_theme_support( string $feature, mixed $args ): void|false

The final code looks like this:

function theme_support_options() {
    $defaults = array(
        'height'      => 150,
        'width'       => 250,
        'flex-height' => false,
        'flex-width'  => false
    );
    add_theme_support( 'custom-logo', $defaults );
}
add_action( 'after_setup_theme', 'theme_support_options' );

N.B: The theme’s functions.php file must be called to work.

With the help of header.php

When adding the logo to your header.php file, you have two basic options.

  • Add the_custom_logo(); function, and it will display the logo with markup determined by the WordPress core.
  • Get the logo url, and add your own markup.

Before adding a dynamic logo, your HTML code looks like this:

<div class="c-logo-w">
    <a href="./index.html">
        <img src="./img/logo.png" alt="sitename" />
    </a>
</div>

Now, replace this HTML code with the PHP code written below.

$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 '<h3>'. get_bloginfo( 'name' ) .'</h3>';
}

That's it! 🎉 You now have access to the logo field to add your custom WordPress logo.

To gain access to the Custom Logo, you need to:

  • Open the WordPress dashboard
  • Go to Appearance -> Customize -> Header -> Add logo (May be different as per your theme)
  • Finally, click on the Publish button.

Conclusion

You can follow one of these two steps to add a dynamic logo to your custom WordPress theme. Subscribe to my weekly newsletter for more WordPress tutorials like this. Don't forget to leave feedback on my Guestbook.

Subscribe to the newsletter

Get emails from me about web development, tech, and early access to new articles.

- subscribers – View all issues