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:
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:
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:
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.
Previous Resource6 Inspiring Examples of Bootstrap Jumbotron
Blog posts authored by Jameel with easy-to-navigate table of content
Starters Guide to Git & GitHub in Web Development
The Definitive Guide to 508 and ADA Website Compliance
3 Easy Steps to Add a Dynamic Logo to Your WordPress Theme
Here's a couple of recommendations from Linkedn