Enqueuing js properly

  • Good evening

    I usually don’t have problems with the plugins I develop, but I have actually a doubt related to the proper way to insert javascript (or css) in a plugin.

    I have a plugin that when the shortcode is called, loads a pre-existant php file (with html, php and javascript code, etc.) that must by itself call js files (most can be called directly with their url because they are fully customized for that script only) and outputs it to the place of the shortcode. The question is, how to enqueue jquery.js, or moment.js or even a customized one.

    If I want to load a js file with wp_enqueue_script(), do I do this directly in the pre-existant php page (that will be outputted by the shortcode routine), or in the plugin file? I made some tests, and I get errors, from jquery or moment problems, to having the libraries loaded at the end of the php code.

    What is the proper way to do this? What do I place on the plugin php file, and what do I put in the php custom file called by the shortcode?
    Can someone give me a small example?

    Thanks for the help.

    Best regards

    JKepler

Viewing 5 replies - 1 through 5 (of 5 total)
  • Moderator bcworkz

    (@bcworkz)

    I think you may be enqueuing too late. It must be done before the “wp_print_scripts” action, or maybe a bit earlier. Generally before any output occurs would be a good idea. It can be difficult for a plugin to know whether their script will be needed for a particular page or not. Many plugins simply enqueue their script for all front end requests so they’re covered no matter what.

    As a site owner, I find this practice annoying, but understandable. I often add code to dequeue scripts except where actually needed. It does cause problems with future maintenance sometimes. Anyway, it’s my problem, not the plugin dev’s.

    Generally speaking, specifying ['jquery'] as a dependency when you enqueue your script is enough to get jQuery loaded. Similar for moment.js if it has already been registered. If this existant .php file is loaded from a shortcode I don’t see how it can be early enough to enqueue at that point, so I don’t think you have much choice but to enqueue from your plugin code.

    Thread Starter jkepler

    (@jkepler)

    Hi bcwork

    Thank you very much for your reply.

    So, you are saying that the best solution is to write the directive – for example – wp_enqueue_script(“my_js”, path_to_my_js, array( ‘jquery’),false,false) (already calling jquery) in the php file that I am loading in the shortcode?

    Best regards

    JKepler

    • This reply was modified 3 years, 8 months ago by jkepler.
    Moderator bcworkz

    (@bcworkz)

    Your enqueue code is what I meant, but you cannot enqueue from a shortcode handler, directly or via included file, it’ll be too late. You’d best enqueue from “wp_enqueue_scripts” callback, added from your main plugin file.

    Thread Starter jkepler

    (@jkepler)

    Good afternoon,

    Ok, so I place the “wp_enqueue_scripts” callback (enqueuing the js scripts) in the main plugin file, and nothing on the php to be loaded, correct?

    I believe that I did not try this option.

    Best regards

    JKepler

    Moderator bcworkz

    (@bcworkz)

    Well, assuming the PHP file requested loads the WP environment, your plugin’s code always gets evaluated when the WP environment is loaded. Thus the JS is enqueued with every front end request.

    Without the WP environment, enqueuing won’t work at all and you can simply output script tags with src attributes in the page’s head section.

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘Enqueuing js properly’ is closed to new replies.