Have you ever wondered how to add footer credits with logo image in your Extra theme? Lot’s of agencies marks their websites with “Made with ❤ by X” phrases. But, some only place their logo on the footer.

This quick tutorial will show you how to add your logo to the footer credits section of the Extra theme.

You might ask me. But, is it so hard that deserves a tutorial to learn how to do it? Well, for me it took a few hours of testing, so I think it’s worthy to document it for people that might run across the same problem. Or, give at least 1 person that reads this post a new way of thinking about their footer credits section.

Ready to learn how to create your footer credits with logo image? Let’s do it!

Add footer credits with logo image

Preview

First of all, delete the normal footer section from your website. If you’re using the Extra theme, put the following code inside Extra > Theme Options > Custom CSS:

Footer credits with logo

#footer-bottom {
display: none;
}

Better solution: Bob Means in the Extra Theme Users group had a better solution.

“Rather than turning off the current footer-bottom, just eliminate it from the code inside your child theme’s footer.php file. Otherwise, it is still loading on the page and can cause unforeseen troubles.” – totally agree with you! Thanks for sharing!

Then, create your footer using Global Modules or even better, with standard WordPress Widgets.

What’s the code for footer credits with logo image?

Create a HTML <a> tag with an <img> tag inside of it. So, when a user clicks the image it will send them to your website.

I recommend creating your website’s footer section with Widgets. The Widgets have the semantic <footer> tag that I believe it’s important for the structure of the page.

<a href="https://blog.youdivi.com"><img class="credits" src="https://youdivi.com/wp-content/uploads/2017/07/icons8-Launched-Rocket-64.png" title="YouDivi" alt="YouDivi"></a>

Remember to change the href attribute to your own target link, src to where your logo is and title/alt to your company name or any other text you like. Keep an eye for SEO too.

Now, wait a second. Extra and Divi theme right now only let you paste the code into the <body> tag. But, you need to add it into the <footer>.

Footer credits with logo

This took me some time to figure out. Because you need to put the file footer.php inside your child theme and add the HTML there – just before the last </footer> tag.

Footer credits with logo

Did you see the class credits inside the HTML right? So, let’s add some CSS to make the logo stand in the bottom right corner of your footer section.

CSS

/* -- Credits -- */
.credits {
width: 32px;
height: 32px;
position: absolute;
bottom: 15px;
right: 15px;
}
/* -- Extra theme may need this code -- */
#footer {
position: relative;
}

This is a simple code. The image must be 64px wide so it’s not blurry in higher resolution screens.

But, you need it with 32px wide so it’s not too big for the footer credits. You want to be found by people who liked your website and may be a potential customer but don’t need to be the highlight of the page.

The position, bottom, and right make the image stick to the bottom right part of the footer.

If you want the logo to be sticky and scroll together always just change position absolute to fixed.

This is a good way to give credit when you deliver the website to your clients, don’t you think? The logo gives some mystery and I think the clicks in the link to your agency website goes up.

Conclusion

That’s it! I know this tutorial is too focused and may not be for everyone, but I hope to have helped you somehow.

Did you manage to learn how to add footer credits with logo image? Leave your feedback in the comments below.

See ya!