I ran into this when attempting to integrate Dropbox's drop in chooser API to a plugin I'm writing.

The API documentation instructs you to place the following script tag at the top of your file:

<script type="text/javascript" src="https://www.dropbox.com/static/api/1/dropins.js" id="dropboxjs" data-app-key="MY_APP_KEY"></script>

All fine and good, and it actually works when I directly paste it into the page that is called in the admin section. But, I'd like to use some variation of wp_register_script(), wp_enqueue_script() and wp_localize_script() to pass the necessary id and data-app-key.

I've tried a couple different variations of this:

add_action('admin_enqueue_scripts', 'add_dropbox_stuff');
function add_dropbox_js() {


add_action('admin_enqueue_scripts', 'add_dropbox_stuff');
function add_dropbox_stuff() {

MY_APP_KEY is replaced with the appropriate application key in my code. Would appreciate any direction. Thanks.

EDIT: Also tried to do it with some jquery, but to no avail. Tried it on document load and on document ready. I get a {"error": "Invalid app_key"} return.

  • 2
    What wp_localize_script do is print a json-encoded object in the html output of the page. This object is recognized by the script and so you can use it. What you need is to add some attributes to script tag, and so wp_localize_script can't help you.
    – gmazzap
    Aug 20, 2013 at 20:10
  • 2
    G. M. is correct that wp_localize_script doesn't create script attributes. But is it possible to pass the app key directly into dropbox.js? Just a guess but have you tried array('appKey'=>"MY_APP_KEY")? This is the code that grabs the key from the attribute if(!Dropbox.appKey){Dropbox.appKey=(e=document.getElementById("dropboxjs"))!=null?e.getAttribute("data-app-key"):void 0}
    – epilektric
    Aug 20, 2013 at 20:21
  • Hey @epilektric Could you put that in an answer? I'm not quite following how to implement it. Aug 20, 2013 at 21:40
  • @epilektric with wp_localize_script sure you can pass attributes to the script. I really don't know if this will work or not, however it is not a worpress related matter.
    – gmazzap
    Aug 20, 2013 at 22:00
  • @AndrewBartel I'm not really sure how either. Maybe this will help. pippinsplugins.com/use-wp_localize_script-it-is-awesome
    – epilektric
    Aug 20, 2013 at 23:39

9 Answers 9


you can try to use the script_loader_src filter hook e.g:

function add_id_to_script($src, $handle){
    if ($handle != 'dropbox.js') 
            return $src;
    return $src."' id='dropboxjs' data-app-key='MY_APP_KEY";


i just figured it out myself that the src is escaped by esc_url, so looking a bit more i found the clean_url filter which you can use to return the value with your id and app key data :

function unclean_url( $good_protocol_url, $original_url, $_context){
    if (false !== strpos($original_url, 'data-app-key')){
      $url_parts = parse_url($good_protocol_url);
      return $url_parts['scheme'] . '://' . $url_parts['host'] . $url_parts['path'] . "' id='dropboxjs' data-app-key='MY_APP_KEY";
    return $good_protocol_url;
  • It doesn't work. Before being printed, the result of 'script_loader_src' is escaped, so quotes are stripped out and what you output is recognized as part of 'src' attribute and not as separate attributes. This code will put in the html markup something like <script type='text/javascript' src='https://www.dropbox.com/static/api/1/dropins.js?ver=3.6&#039;id=&#039;dropboxjs&#039;data-app-key=&#039;MY_APP_KEY'></script>
    – gmazzap
    Aug 28, 2013 at 7:21
  • yea i updated my answer.
    – Bainternet
    Aug 28, 2013 at 7:29
  • 3
    I've tested code after my edit and it works. Thank for teaching something to me with this.
    – gmazzap
    Aug 28, 2013 at 7:45
  • 1
    I think OP will be happier than you an me. ;)
    – gmazzap
    Aug 28, 2013 at 7:49
  • 1
    Thanks @Bainternet for your help, got it working using your answer. Aug 29, 2013 at 23:40

Since WP 4.1.0, a new filter hook is available to achieve this easily:


Use it this way:

add_filter( 'script_loader_tag', 'add_id_to_script', 10, 3 );

function add_id_to_script( $tag, $handle, $source ) {
    if ( 'dropbox.js' === $handle ) {
        $tag = '<script type="text/javascript" src="' . $source . '" id="dropboxjs" data-app-key="MY_APP_KEY"></script>';

    return $tag;
  • does this execute before any JS caching takes place ?
    – JoaMika
    Aug 22, 2018 at 11:16

OK, it seems (to me) that with wp_enqueque_scripts is not possible to print the id and the app key as script tag attributes.

I'm sure at 90%, because WP_Dependencies is not a class that I know well, but looking at the code It seems not possible to me.

But I'm sure at 100% that using wp_localize_script is not useful for your scope.

As I said in my comment above:

What wp_localize_script do is print a json-encoded object in the html output of the page. This object is recognized by the script and so you can use it.

What I've not said in the comment is that the json-encoded object as an arbitrary name that you decide, in fact, looking at the syntax:

wp_localize_script( $handle, $object_name, $l10n );

The object named $object_name could be used by the script because is in the global scope and printed in the html of the page.

But the $object_name is a name that you decide, so it can be everything.

So ask to yourself:

how the script in the remote dropbox server can make use of a variable that they don't know how is called?

So there is no reason at all to pass id and/or app key to the script with wp_localize_script: you have just to print them as script tag attributes as is said in Dropbox API docs.

I'm not a js developer, but I think what dropbox script does is:

  1. get all <script> html elements in the page
  2. cycle through them looking for the one with the 'id' == 'dropboxjs'
  3. if that script is found, looking at the 'data-app-key' of that script
  4. check if that app key (if present) is a valid one and authorize you if so

Please, note that I don't know this for sure, I'm just guessing.

In this way, the script loaded from the dropbox server can check your app key in a way that is easy for them and easy to implement for you.

Because in the first sentence I've said that is not possible to print the id and the app key in the script using wp_enqueque_scripts, moral of the story is that you have to print them in the markup in another way.

A way that not smells too much (when there are no alternatives) is to use wp_print_scripts hook to print the script tag:

add_action('wp_print_scripts', 'do_dropbox_stuff');

function do_dropbox_stuff() {

  if ( ! is_admin() ) return; // only for admin area

  $app_key = 'MY_APP_KEY';

  // why do not create an option for it?
  // $app_key = get_option('dropbox_app_key');

  if ( empty($app_key) ) return;

  echo '<script type="text/javascript" src="https://www.dropbox.com/static/api/1/dropins.js" id="dropboxjs" data-app-key="' . esc_attr($app_key) . '"></script>';

  • Thanks G.M., I got it to work using this. I'm interested to see if there's alternative solutions using the enqueue hooks but I appreciate all the thought you put into the answer. Aug 26, 2013 at 21:59
  • @AndrewBartel I think there is no way to use wp_enqueque_scripts in your case, but if you find one, let us know! :)
    – gmazzap
    Aug 27, 2013 at 0:37
  • your solution can increase the load on the server as you are directly making 1 more http request by doing echo. The solution is good but not optimized. Jul 16, 2018 at 21:19
  • @FaisalShaikh care to explain? The echo statement does not any HTTP request as far as I can tell, and WordPress wp_enqueue_script does an echo as well (see core.trac.wordpress.org/browser/tags/4.9/src/wp-includes/…) Surely you could reduce the number of request by combining the script with some other script you have but: 1) the scripts exists in 3rd party server in this case 2) with HTTP 2 nowadays combining the script would reduce the performance, not increase them. So maybe I miss something?
    – gmazzap
    Jul 17, 2018 at 14:55
  • @gmazzap you are right. actually, I have a different way to do this. We can store this 3rd part js into our server and I really don't feel that combining script can increase the load on the server. Jul 18, 2018 at 11:22

From Bainternet's reply above. This code worked for me.

function pmdi_dropbox( $good_protocol_url, $original_url, $_context){
    if ( FALSE === strpos($original_url, 'dropbox') or FALSE === strpos($original_url, '.js')) {
        return $url;
    } else {
        $url_parts = parse_url($good_protocol_url);
        return $url_parts['scheme'] . '://' . $url_parts['host'] . $url_parts['path'] . "' id='dropboxjs' data-app-key='APIKEY";

Edit: The only difference from the Bainternet code is, I added a condition to check if the script URL is dropbox and it is a .js file.

I'm ignoring all the other URL's and rewriting the dropbox URL.

  • 2
    Please add some explanation on what you change and why you changed it (or had to change it).
    – tfrommen
    Feb 17, 2014 at 12:42
  • I know this is an old response but in your code above, did you mean to return $original_url inside the IF statement instead of just $url ?
    – leromt
    Mar 12, 2015 at 21:01

Thanks for all the postings, they really helped. I did roll my own version to give it some structure and make it easier to read and update. Use enqueue as normal, use script for CSS files with a false tag at the end so that it loads at the top. Though it can probably be simplified somewhat.

add_filter('script_loader_tag', 'add_attributes_to_script', 10, 3); 
function add_attributes_to_script( $tag, $handle, $src ) {

    $scripts_to_load = array (

        (0) => Array
            ('name') => 'bootstrap_min_css',
            ('type') => '<link rel="stylesheet" href="',            
            ('integrity') => 'sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB',
            ('close') => ' type="text/css" media="all">'

        (1) => Array
            ('name') => 'popper_min_js',
            ('type') => '<script type="text/javascript" src="',         
            ('integrity') => 'sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49',
            ('close') => '></script>'

         (2) => Array
            ('name') => 'bootstrap_min_js', 
            ('type') => '<script type="text/javascript" src="',
            ('integrity') => 'sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T',
            ('close') => '></script>'

    $key = array_search($handle, array_column($scripts_to_load, 'name'));

    if ( FALSE !== $key){

        $tag = $scripts_to_load[$key]['type'] . esc_url($src) . '" integrity="' . $scripts_to_load[$key]['integrity'] .'" crossorigin="anonymous"' . $scripts_to_load[$key]['close'] . "\n";

    return $tag;

I did this with my eCards plugin and it's really simple.

Here's a direct copy/paste from the plugin:

$output .= '<!-- https://www.dropbox.com/developers/chooser -->';
$output .= '<script type="text/javascript" src="https://www.dropbox.com/static/api/1/dropbox.js" id="dropboxjs" data-app-key="' . get_option('ecard_dropbox_private') . '"></script>';
$output .= '<p><input type="dropbox-chooser" name="selected-file" style="visibility: hidden;" data-link-type="direct" /></p>';

Notice the API key is passed via an option.

  • How is $output used? Echoed? Add to wp_print_scripts()? Aug 26, 2013 at 21:57
  • It is either returned or echoed, depending on your function.
    – Ciprian
    Aug 27, 2013 at 10:23

I did some checking in the dropbox.js code (v2) to see what was happening and how to best solve this. As it turns out, the data-app-key is only used to set the variable Dropbox.appKey. I able to set the variable with the following extra line.

Using the javascript example on the Dropbox page https://www.dropbox.com/developers/dropins/chooser/js:

Dropbox.appKey = "YOUR-APP-ID";
var button = Dropbox.createChooseButton(options);

In my code I set the Dropbox.appKey in every place where I reference the Dropbox javascript routines. Doing this allowed me to use wp_enqueue_script() without the extra parameters.


There's a simpler way to do this

 function load_attributes( $url ){
    if ( 'https://www.dropbox.com/static/api/1/dropins.js' === $url ){
        return "$url' id='dropboxjs' data-app-key='MY_APP_KEY";

    return $url;

add_filter( 'clean_url', 'load_attributes', 11, 1 );

Wordpress syntax for script_loader_tag :

apply_filters( 'script_loader_tag', string $tag, string $handle, string $src )

To add any attribute, you can modify your $tag this way :

add_filter('script_loader_tag', 'add_attributes_to_script', 10, 3); 
function add_attributes_to_script( $tag, $handle, $src ) {
    if ( 'dropbox.js' === $handle ) {
        $tag = '<script type="text/javascript" src="' . esc_url( $src ) . '" id="dropboxjs" data-app-key="MY_APP_KEY"></script>';
    return $tag;

Which will correctly escape URL.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.