3 Easy Steps to Add a Dynamic Logo to Your WordPress Theme

You’ve just created this brand-spanking new theme and you have a hard-coded logo. This is cool until your client wants to change it and they have no programming knowledge. In this post we’ll teach you 3 easy steps to add a Dynamic Logo to Your WordPress Theme.

Table of contents

1 Add Theme Support for Your Logo

Let’s get to work! But before you upload your logo, it’s best to first enable your themes logo theme support functionality.

This is pretty simple, just head on over to your themes functions.php file, and within your after_setup_theme function add the following code:

Custom logo theme support code

    
      add_theme_support('custom-logo', array(
          'height' => 100,
          'width' => 300,
          'flex-width' => true,
          'flex-height' => true,
      ));

In The Code

The function above we just activated logo theme support, set the height and width the uploaded image will be cropped to, flex-height and width so we can change the logo size to be cropped if we wanted. This function should be placed within the after_setup_theme function.

2 Upload Your New Logo

Since theme support is activated, within your WordPress dashboard you should see the Header option under your Appearance menu.

Click on Header > Site Identity At the top you’ll see an area where you can add or replace your logo.
Click Change Image to upload a new logo. You’ll notice your logo will be cropped to the exact dimensions you specified.
Click on Publish to save your changes.

3 Displaying Your Logo

If you previewed your site, you’ll notice nothing changed yet. “WHY THIS HAPPEN?!”, you ask? This is because we haven’t told WordPress where to place your dynamic logo yet.

So let’s head on over to your header.php file and replace your entire logo image tag with the following code:

Render dynamic WordPress logo

    
    <?php theme_prefix_the_custom_logo() ?>

In The Code

The WordPress function above simply adds a image tag with an src to the logo you uploaded in the previous step and a link to your home page.

BONUS How to Add Your Own Class to a Dynamic WordPress Logo

I thought i’d save you all a bit of time by adding this. Now that you have your logo rendering on your site, you may want to add your own class for styling purposes.

You may even want to add the Bootstrap class instead of what’s included. That is very easy to do, just navigate on over to your functions.php file and add the block of code below:

Add custom logo class to WordPress logo

    
    function theme_prefix_the_custom_logo() {
    	if ( function_exists( 'the_custom_logo' ) ) {
    		the_custom_logo();
    	}}
    add_filter('get_custom_logo','change_logo_class');
    function change_logo_class($html){
    	$html = str_replace('custom-logo-link', 'replace-this-with-your-classes', $html);
    	return $html;
    }

In The Code

In the code above your just adding the ability to add your own class but be sure to replace replace-this add-your-classes-here with your own classes. This is very helpful if you are building your site on responsive frameworks Bootstrap or Foundation.

Wrapping Things Up

So now that you’re a pro, go forth and change out all those static logos. I’m sure you and your clients would love this new functionality that makes everyone’s WordPress life easier.