Avada JavaScript Logo Switcher


Switching Logos with JavaScript on Avada

Sometimes the need arises to load a specific logo into the header on specific posts/pages of a WordPress site using Avada. Let’s talk about a few options to do just that and then do it with JavaScript, shall we?


Keep reading for an explanation on how to go on about it.

Keep reading

The button will take you to a step by step guide through the process.


Take a look at what this is all about and see the feature in action.

Go there

The button will take you to a project were we implemented this feature.


Get the files from GitHub immediately and for free.

From GitHub

The button will take you to GitHub were the files you need are available.

Via Templating

You could modify Avada’s templates for the posts, pages you want to display your special logo on, or you could override the template responsible for header or, even better, logo generation. This would require to provide a modified logo.php file at at /templates/logo.php in your child theme. You would add something like

if( is_page(array(64,65) ) )
   $standard_logo[‘url’] = ‘/path/to/special-logo.png’;

Whether it is a pro or a con, you’d have to add page/post IDs to the arrays in the logo.php if you want to display the special logo on additional posts/pages later on. So this solution is not easily accessible for editors.


The general Idea here is to hide the actual logo and add a background-image to its container displaying the special logo. This would get quite fiddly with widths and heights regarding responsiveness. There is an old thread about that approach here.

Via JavaScript

The advantage using JavaScript to perform this task is ease and accessibility for editors. There is a big con though which is delay. The logo will not get switched out until the page and jQuery has been fully loaded.

So we want to create a Global Element in order to reuse the feature on every page necessary.

Create a Code Block, copy the JavaScript there, switch the Image-URLs for the respective URLs to the logo on your site and save it as a Global Element. The script should now switch logos when loaded and you can reuse the code on every post/page.


Share on facebook
Share on twitter
Share on linkedin

Related Posts

WordCamp Düsseldorf Orgateam

Best WordCamp Düsseldorf Ever

In 2019 we held our first and therefore guaranteed best WordCamp in Düsseldorf. It was a complete success and lots of fun for all participants.

Groupmail GDPR/DSGVO

GDPR and Generic E-Mail Accounts

How do you deal with topic-related e-mail accounts such as info@website.de in times of the GDPR? How can you ensure that data protection is not violated for incoming e-mail addresses.