User Contributed Notes

1. Skip to note 8 content

   
   Jules Colle
   
   
   5 years ago
   

   You must log in to vote on the helpfulness of this noteVote results for this note: 35You must log in to vote on the helpfulness of this note

   Apparently we should now use wp_add_inline_script instead of wp_localize_script to expose a global object that needs to be used by your script.

   So, while previously you could (and still can) do this:

   wp_enqueue_script( 'wpdocs-my-script', 'https://url-to/my-script.js' );
   wp_localize_script( 'wpdocs-my-script', 'MYSCRIPT', array(
       'ajaxUrl' => admin_url( 'admin-ajax.php' ),
       'otherParam' => 'some value',
   ) );

   It seems that it’s now recommended to do it like this (which I personally believe is a lot uglier):

   wp_enqueue_script( 'wpdocs-my-script', 'https://url-to/my-script.js' );
   wp_add_inline_script( 'wpdocs-my-script', 'const MYSCRIPT = ' . json_encode( array(
       'ajaxUrl' => admin_url( 'admin-ajax.php' ),
       'otherParam' => 'some value',
   ) ), 'before' );

   Note that you need to add 'before' as the third parameter to the wp_add_inline_script function.

   Now, in your JS script you can access these PHP parameters like this:

   console.log( MYSCRIPT.ajaxUrl ); // output: "<a href="https://your-site/wp-admin/admin-ajax.php&quot" rel="nofollow ugc">https://your-site/wp-admin/admin-ajax.php"</a>;
   console.log( MYSCRIPT.otherParam ); // output: "some value"

   • Feels is a lot uglier for me as well, I don’t like the idea of writing JS inside PHP which this function makes it look like something that is correct, but can actually create a lot of mess in the codebase, plus makes it harder to debug

     Rommel Castro 5 years ago

2. Skip to note 9 content

   
   Clifford Paulick
   
   
   10 years ago
   

   You must log in to vote on the helpfulness of this noteVote results for this note: 18You must log in to vote on the helpfulness of this note

   The following code can be used to easily add Typekit’s JavaScript to your theme:

   function mytheme_enqueue_typekit() {
      wp_enqueue_script( 'mytheme-typekit', 'https://use.typekit.net/.js', array(), '1.0' );
      wp_add_inline_script( 'mytheme-typekit', 'try{Typekit.load({ async: true });}catch(e){}' );
   }
   add_action( 'wp_enqueue_scripts', 'mytheme_enqueue_typekit' );

   Which results in:

   <script type="text/javascript" src="<a href="https://use.typekit.net/.js?ver=1.0"></script&gt" rel="nofollow ugc">https://use.typekit.net/.js?ver=1.0"></script&gt</a>;
   <script type="text/javascript"> try{Typekit.load({ async: true });}catch(e){} </script>

   From https://make.wordpress.org/core/2016/03/08/enhanced-script-loader-in-wordpress-4-5/

3. Skip to note 10 content

   
   Pepro Dev. Group
   
   
   5 years ago
   

   You must log in to vote on the helpfulness of this noteVote results for this note: 13You must log in to vote on the helpfulness of this note

   Add CSS Style without dependency

   wp_register_style( 'myprefix-dummy-css', false );
   wp_enqueue_style( 'myprefix-dummy-css' );
   wp_add_inline_style( 'myprefix-dummy-css', "body *{ box-sizing: inherit; }");

   Add JavaScript Code without dependency

   wp_register_script( 'myprefix-dummy-js-header', '',);
   wp_enqueue_script( 'myprefix-dummy-js-header' );
   wp_add_inline_script( 'myprefix-dummy-js-header', "console.log('loaded in header');");

   Add JavaScript Code with jQuery dependency

   wp_register_script( 'myprefix-dummy-js-footer', '', array("jquery"), '', true );
   wp_enqueue_script( 'myprefix-dummy-js-footer'  );
   wp_add_inline_script( 'myprefix-dummy-js-footer', "console.log('loaded in footer');");

4. Skip to note 11 content

   
   Aurovrata Venet
   
   
   4 years ago
   

   You must log in to vote on the helpfulness of this noteVote results for this note: 3You must log in to vote on the helpfulness of this note

   NOTE: with new block themes such as Twenty Twenty Two, wp_localize_script/wp_add_inline_script will no longer work if called too late such as in a shortcode rendering callback function. To achieve this you will need to make use of an anonymous function call hooked on wp_footer action,

   $data=array();// your data object you want to pass to your front-end script.
   $localise = json_encode($data);
   add_action('wp_footer', function() use ($localise){
     printf('<script type="text/javascript">var myData = %s</script>', $localise);
   });

5. Skip to note 12 content

   
   Aurovrata Venet
   
   
   6 years ago
   

   You must log in to vote on the helpfulness of this noteVote results for this note: 1You must log in to vote on the helpfulness of this note

   this is handy function when you want to make sure your anonymous function uses an object that is instantiated using a javascript library that can potentially clash with other versions loaded by other plugins or by WordPress core itself. For example, if you need to use a different version of jQuery, you can do the following,

   wp_register_script( 'jquery3.2.1', 'https://code.jquery.com/jquery-3.2.1.min.js' );
   wp_add_inline_script( 'jquery3.2.1', 'var jQuery3_2_1 = $.noConflict(true);' );
   wp_enqueue_script( 'plugin-javascript', plugins_url( 'js.js', __FILE__ ), array( 'jquery3.2.1' ) );

   this will instantiate a new jQuery object `jquery3_2_1` right after the jquery library v3.2.1 is loaded by the browser, ensuring it has the right version references, which you can then pass as an attribute the `js.js` script,

   ( function( $ ) { //$ now uses v3.2.1 of jquery.
     // Alert jQuery version.
     alert($.fn.jquery);
     // Plugin/theme code should go here.
   }( jQuery3_2_1 ) );

6. Skip to note 13 content

   
   KratosGemini
   
   
   9 months ago
   

   You must log in to vote on the helpfulness of this noteVote results for this note: 0You must log in to vote on the helpfulness of this note

   If you are adding an inline script to the editor in the new recommended way (see: https://developer.wordpress.org/block-editor/how-to-guides/enqueueing-assets-in-the-editor/), then it’s important to note that calling `wp_add_inline_script() ` twice will duplicate the inline script code.

   For example, if you want to add an inline script to both the editor itself and the editor content (in an iframed editor), then you should (using the recommendation) enqueue the same script with both `enqueue_block_editor_assets` and `enqueue_block_assets`. However, in this case make sure to only call `wp_add_inline_script() ` once to avoid script duplication (the registration and source code stick around even though the queue gets cleared out between the editor and editor content enqueuing).

   You can check for prior registration and also enqueue with something like this:

   “`php
   if ( ! wp_script_is( $handle, ‘registered’ ) ) {
   wp_register_script( $handle, false );
   wp_add_inline_script( $handle, $src );
   }
   wp_enqueue_script( $handle, ”, $deps, false, $args );
   “`

7. Skip to note 14 content

   
   dhinju
   
   
   10 years ago
   

   You must log in to vote on the helpfulness of this noteVote results for this note: -11You must log in to vote on the helpfulness of this note

   For adding inline script

   function theme_prefix_enqueue_script() {
      wp_enqueue_script( 'main-js', '/main.js', array(), '1.0' );
      wp_add_inline_script( 'main-js', 'alert("hello world");' );
   }
   add_action( 'wp_enqueue_scripts', 'theme_prefix_enqueue_script' );

   For jQuery-dependent scripts use this:

   function theme_prefix_enqueue_script() {
      if ( ! wp_script_is( 'jquery', 'done' ) ) {
        wp_enqueue_script( 'jquery' );
      }
      wp_add_inline_script( 'jquery-migrate', 'jQuery(document).ready(function(){});' );
   }
   add_action( 'wp_enqueue_scripts', 'theme_prefix_enqueue_script' );