Avada

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?

Learn

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.
Continue

Watch

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.
WMSMSM

Download

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.
GitHub

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.

Via CSS

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.

Leave a Comment

Your email address will not be published. Required fields are marked *