Moving JavaScript to the footer

[Arley McBlain]

Hello! I’m running into some issues with the JavaScript, and there are a couple things I would like to know.

1) Can I move the JS to the footer? Datepicker, Events, and Filter are all render blocking in the head. Footer is more performant! I also want to call them after my theme JS.

2) The cost slider JS is in the middle of the template expecting jQuery to have already been loaded. I want to add a custom queue wrapper around this for our RequireJS’d framework to render at the appropriate time. Is this doable?

I love that there are hooks to add some template files in my theme, but I don’t want to have to keep these up to date with every iteration. I’m hoping there is some functions.php PHP wizardry that will help with these two issues! I’ve done some Googling and think conceptually this is possible, but I struggle with syntax. Thanks!

[George]

Hey @Arleym,

Thanks for reaching out. Just to set expectations nice and early, we cannot help with custom coding. I don’t mention this to be a bummer! I only mention it to address things like your second question:

2) The cost slider JS is in the middle of the template expecting jQuery to have already been loaded. I want to add a custom queue wrapper around this for our RequireJS’d framework to render at the appropriate time. Is this doable?

Something like this is indeed doable; however, it’s not something we can help implement and there’s not much general advice we could share here because of how specific the customization is.

The third thing you mention here relates to templates and such:

I love that there are hooks to add some template files in my theme, but I don’t want to have to keep these up to date with every iteration. I’m hoping there is some functions.php PHP wizardry that will help with these two issues! I’ve done some Googling and think conceptually this is possible, but I struggle with syntax. Thanks!

To be clear, you do not have to update your customizations every update if you put them in your theme; our themeing system, in other words, makes it so that you don’t have to update the code every plugin update.

What I mean is that, for example, if you didn’t have this themeing system and wanted to change something in the plugin, you’d have to edit plugin code and thus any time it’s updated it would be overwritten and you would need to re-make the changes.

By putting your changes in your theme, then you can update the plugins automatically without issue.

Now, you will have to maintain your customizations of course, and if you update your theme then the tribe-events folder will be overwritten and you will have to recreate the files. But this is the case no matter what; whatever functions.php trickery could exist, that functions.php file would itself also be overwritten upon a theme update.

I would recommend making a child theme, as described here → https://codex.wordpress.org/Child_Themes

If you create a child theme and then employ the practices described in our themer’s guide, you should be able to update the parent theme without having to re-implement the customizations each time, and should be able to to update the plugins, too, without having to update things each time.

I hope this information all helps. For a bit of separation of content I will address your first question in my next reply.

[George]

Hey @Arleym,

Apologies for the length of my reply above!

In this reply, I would like to address your first question:

1) Can I move the JS to the footer? Datepicker, Events, and Filter are all render blocking in the head. Footer is more performant! I also want to call them after my theme JS.

Our plugin DOES load its scripts in the footer. For this to not be the case would mean that there is some weird code elsewhere on your site changing things.

1. Can you please share links to where we can see this incorrect script-loading on your site? I’ll take a look.

2. Can you share the “System Information” for this site? Here’s how to do that → https://theeventscalendar.com/knowledgebase/sharing-sys-info/

Thank you!
George

[Arley McBlain]

This reply is private.

[George]

Thanks for all of this information! I’m glad to see that, in your system information, all of your plugin versions and such are up-to-date. Thanks for sharing this.

With version concerns out of the way, I will address your other questions in order here:

1. The site: view-source:http://harvestottawa.wpengine.com/events/ – on line 79 datepicker is called. My scripts are called on line 85. I’m not so sure your scripts usually do live in the footer, your demo site has them in the head too. view-source:http://wpshindig.com/events/

Only two things of our plugins go in the header: stylesheets, which is the norm; and the datepicker scripts. Apologies for not mentioning the datepicker script earlier. Moving the datepicker script to the footer will break the datepickers, which is why we load it in the head 🙂

I also have noticed that by deregistering the WordPress jQuery (to prevent duplicates / conflicts) that a lot of other Tribe JS is _not_ on my page. Rats. I find the way that WordPress and jQuery works baffling. And the way my framework JS is hooked up (set up by an engineer, with Require JS etc.) is also unintuitive. I really want to get these working together. Can you confirm that this calendar has a dependency of the WordPress jQuery? Should I be able to use my own bundled and minified version?

Deregistering the WP-included version of jQuery is a very bad idea, and many theme authors do this in their themes and it breaks sites. The way it all works is actually quite straightforward if you boil it down to the most simple points of the configuration, which are something like as follows:

• YES, The Events Calendar’s scripts and many, many other plugin and theme scripts depend on jQuery.
• WordPress Core depends on jQuery, too.
• This, WordPress Core itself includes the most or second-most-recent version of stable jQuery within it.
• Well-made plugins and themes load the WordPress Core’s own version of jQuery. They do not replace the version of jQuery or try to deregister the existing version of jQuery.
• You should not use your own bundled and minified version of jQuery. You should leave the WordPress Core version of jQuery in place.

If you are trying to use RequireJS for all plugins and your theme and such, this is an extensive customization and is a tricky one 🙁 I am sorry to bear the news that we cannot help with customizations, and rewriting our plugin’s entire script-loading system to use RequireJS is a very extensive and involved customization.

3) You said “Something like this is indeed doable” with regards to moving or wrapping a “document ready” – are there any terms or concepts I should Google specifically, or is it impossible to say for this kind of issue?

I unfortunately cannot think of any more specific terms to search other than the key words of the exact description of your goals; so, literally the keywords “RequireJS custom queue wrapper” and et cetera.

I hope this information helps!
George

[Arley McBlain]

Ok! Basically my entire issue was about Require JS bringing in jQuery vs. WordPress. The former is the cool-kid’s slick performant way, the latter is the way WordPress has always been. You’ve helped me figure out whose side to take in light of deadlines and functionality. By restoring the WP jQuery I don’t have to worry about that wrapper. Ok! I’ll let WP Engine (our host) worry about caching and speed, I’ll just fuss about making all the bits work.

You’ve been amazing, thank you.

[George]

Hey @arleym,

Cool, I really appreciate your patience here even though I had to bear some bad news about, for example, our ability to help with custom code and such.

Thanks for your politeness and for the interesting questions – we don’t see Require JS come up much around here! 🙂

Best of luck with your site! And if you’re ever looking for developers to help with customizations, here’s a list of folks who we have no affiliation with but are just well-respected names in the community → http://m.tri.be/18k1

Cheers,
George

[Author]

Posts