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

WooCommerce SQL

Howto Manipulate WooCommerce Metadata via SQL

With Germanized on board, WooCommerce has several ways to save article numbers. Has the intern spent two days entering the EAN in the wrong field for the 3000 articles in the WooCommerce online shop? Then an SQL superhero has to save the day who can copy content from one field to another in no time.

eCommerce Sales

5 eCommerce Lockdown Tips

eCommerce is booming because since Corona everyone understands the importance of online stores and digitization. We have been supporting online stores since the beginning of the millennium, when you still had to program them yourself, and we would like to tell you here how your eCommerce tools can make good sales and keep you afloat in a crisis.