Unhooking styles & scripts

[Michael]

Hi,

I’m trying to unhook styles and scripts in Version 3. On the live site I’m running 2.0.11 with all the styles in the main theme stylesheet, and without any additional JS files.

On a test site I’ve set up for version 3, i’m seeing 7(!) calls to external stylesheets, 10(!) calls to external JS files, and a bunch of inline JS. (All generated by ECP, to be clear)

“Faster, leaner”?

I’m only using the list view, no Event Search Bar, no AJAX. I’m curious as to why certain files are loaded although I’ve unticked these options in the admin section, but I’m happy to remove things manually – just how? Using the old method to unhook the styles doesn’t seem to work, and your Themer’s Guide only offers advice on how to replace the stylesheets, not on how to get rid of them.

Please let me know how to unhook all those styles and scripts – which hooks should I use, what are the correct IDs, am I just getting the priority wrong, etc.

Thanks

P.S. Two pairs of the 7 stylesheet calls load the exact same file respectively:
tribe_events-calendar-style-css
tribe_events-calendar-override-style-css
and
tribe_events-calendar-pro-style-css
tribe_events-calendar-pro-override-style-css
?!??

[reid peifer]

Hi Michael
Thanks for the note. We’re taking your feedback seriously and looking at consolidating script loading for an upcoming release.
In the short term, I’m bumping this up to see if I can get you an answer on unenqueing css & js files

[Kyle]

Hi Michael,

As Reid said, our team is actively in discussion on ways to consolidate scripts and styles for an upcoming release. I can say that we released a maintenance update today that fixes the identical stylesheet loading that you reported (thank you so much for the heads up, apologies for the oversight) as well as removed scripts and styles being loaded from the select2 library which we are no longer using on the front-end of the plugin.

As far as unhooking other scripts and styles as you wish, you can do so in your theme’s functions file with something like this:


function dequeue_tribe_events_scripts_and_styles() {
wp_dequeue_style( 'tribe_events-calendar-style' );
wp_dequeue_script( 'tribe-events-pro-geoloc' );
}
add_action('wp_enqueue_scripts', 'dequeue_tribe_events_scripts_and_styles', 100 );


This example would dequeue the main stylesheet, and the map js. use wp_dequeue_style and wp_dequeue_script with the name of the handle of the file you’d like to unhook. If you would like help with a specific file, I’d be happy to help out.

Cheers,
Kyle

[Michael]

Thanks, guys. Good to hear you’re working on consolidating the scripts.

It looks like I used the right hook, also tried different priorities, but didn’t see the right handles: for instance, the handles for the css files have a -css appended somewhere in the process, so the actual handle is not the same as the id that can be seen in the source code.

I successfully removed all the styles, and the script in your example is also gone. Thanks for that – I’ll probably be able to find and/or deduct the rest.

On a general note: I was hoping to see a bit more transparency and easier ways to modify output with version 3.

By transparency, I mean documentation: It’s a bit tedious to track down pastebin snippets in the forum. Your new docs section is a great step, more of that would be very welcome – eg code examples or links to guides and tutorials.

With regards to templating, I’m sure there are good reasons why many things can’t just be modified in a template file – eg changing the order of event details in the single view or adding a class to the View All link on the widget, stuff like that. But I think that makes extensive documentation even more important – I’m happy to dig deeply through a plugin in oder to make it fit my needs, but waiting for an answer to a support question for 5 days is frustrating.

Thanks,
Michael

[Kyle]

Hi Michael,

I completely understand your frustration. We’ve had an influx of support questions which is natural with a large launch such as this coupled with the departure of one of our support mavens, however, five days for a response is regrettable and I apologize.

I also agree with your sentiments on documentation and we are in the process of providing more of it, including customizing the single event meta, specifically. Also, I’m not sure if you’ve seen our Themer’s Guide (https://theeventscalendar.com/support/documentation/events-calendar-themers-guide/#customfiles), but it has been updated to reflect version 3.0, though modifying single event meta is noticeably absent. Our goal is to offer the API documentation currently found at docs.tri.be along with human generated examples of common things users who are looking to customize might want to do. I know that “we are working on it” doesn’t help you in the short term, but please know that we take feedback like this very seriously, and I look forward to offering you and others more tools to make awesome stuff.

Thank you again for your patience thus far, and for your insight and feedback!

Cheers,
Kyle

[Michael]

Hi Kyle,

Great news about extending the docs with examples etc. – sounds like the right idea and the right place to do it. I know how difficult it is to put documentation together – how much is enough, can’t take all use cases into account, etc.

Back to the original question, though:

Using the method above, I managed to unhook:
tribe-events-pro-geoloc
tribe-events-pro
tribe-events-bar

No luck with the following scripts:
bootstrap-datepicker.js
jquery.ba-resize.min.js
jquery.placeholder.min.js
tribe-events-ajax-list.min.js
tribe-events.min.js

I’m sticking to the naming convention of prefix & -handle, and I’ve found references to these scripts in the plugin code, but that doesn’t seem to work in all cases. Can you point me in the right direction?

Thanks,
Michael

[Kyle]

Hi Michael,

I see you are wanting to unhook tribe-events.min.js .Since you are running pro, tribe-events-pro.min.js is being loaded, which has a dependency on tribe-events.min.js . In turn, tribe-events.min.js has dependencies on bootstrap-datepicker, ba-resize, and placeholder. tribe-events-bar.js also relies on these scripts.

To unhook the entire list of scripts you mentioned, you will need to either modify the script dependencies or unhook the scripts that have the dependencies as well.

For instance:

function dequeue_tribe_events_scripts_and_styles() {
wp_dequeue_script( 'tribe-events-pro-geoloc' );
wp_dequeue_script( 'tribe-events-list' );
wp_dequeue_script( 'tribe-events-pro' ); // relies on tribe-events-calendar-script
wp_dequeue_script( 'tribe-events-calendar-script' ); // relies on placeholder, resize, datepicker
wp_dequeue_script( 'tribe-events-bar' ); // relies on placeholder, resize, datepicker
wp_dequeue_script( 'tribe-events-bootstrap-datepicker' );
wp_dequeue_script( 'tribe-placeholder' );
wp_dequeue_script( 'tribe-events-jquery-resize' );
}
add_action('wp_enqueue_scripts', 'dequeue_tribe_events_scripts_and_styles', 100 );


Unhooking dependencies is a little tricker, but can be done with something like this:

function change_tribe_js_dependencies( $handle, $dep ) {
global $wp_scripts;

if( in_array( $dep, $wp_scripts->registered[$handle]->deps ) ){
$key = array_search($dep, $wp_scripts->registered[$handle]->deps);
unset($wp_scripts->registered[$handle]->deps[$key]);
}

return true;
}

function remove_tribe_events_js_dependencies() {
change_tribe_js_dependencies(‘tribe-events-bar’,’tribe-events-calendar-script’);
}
add_action( ‘wp_enqueue_scripts’, ‘remove_tribe_events_js_dependencies’, 10 );

That example removes the dependency on ‘tribe-events-calendar-script’ that ‘tribe-events-bar’ has. That means you can dequeue tribe-events-pro (tribe-events-pro.min.js), and tribe-events-calendar-script (tribe-events.min.js) but still load tribe-events-bar.min.js without it loading tribe-events.min.js

You can use this method if you want to load tribe-events-bar.min.js, but not, say, jquery.placeholder.min.js . Both tribe-events-bar.min.js and tribe-events.min.js depend on jquery.placeholder.min.js, so you’d either need to dequeue both of those as well, or remove the dependency for each.

As I reference these options, I see some work that we can do in keeping naming conventions consistent, particuarly naming the handle the same as the file name whenever possible. 🙂
hin
Tracking down the dependencies may be a bit confusing if you are looking to only some scripts and not all, but in lieue of documentation on this, you can look in lib/tribe-template-factory.class.php for a list of the scripts being loaded and their dependencies in the asset_package function.

Let me know if this answers your question!

Cheers,
Kyle

[Michael]

That’s great, thank you very much.

All solved – as far as I can see, I don’t need any of the scripts – I’m running a very simple, short list of events on that site. But thanks for going into the dependencies as well, might come in handy at some point.

[Rob]

Awesome to hear that got you sorted, Michael! I’m going to mark the answer and close up the thread here, but if we can do anything else in the future, just ask.

[Support Droid]

This topic has not been active for quite some time and will now be closed.

If you still need assistance please simply open a new topic (linking to this one if necessary)
and one of the team will be only too happy to help.

[Author]

Posts