Take the 2-minute tour ×
WordPress Development Stack Exchange is a question and answer site for WordPress developers and administrators. It's 100% free, no registration required.

Can we somehow use wp_localize_script() to create global js variables without a specific script handle which can be accessed from all the js files, even if the js scripts are not enqueued properly by using wp_enqueue_script ?

This is the code I am using which creates varibale for 'ajaxscript' handle, so I cant access the object 'ajaxobject' in a js file which is being included in the header.php directly by <script src="xxx" .... />

wp_register_script( 'ajaxscript', get_bloginfo( 'template_url' ) . '/js/ajaxscript.js', array(), $version );
wp_enqueue_script( 'ajaxscript' );
wp_localize_script( 'ajaxscript', 'ajaxobject',
    array( 
        'ajaxurl'   => admin_url( 'admin-ajax.php' ),
        'ajaxnonce' => wp_create_nonce( 'itr_ajax_nonce' )
    )
);
share|improve this question
4  
Simply add your inline JS inside the theme. That's exactly what wp_localize_script does anyway. With both methods, the variables are accessible from any script –  onetrickpony Oct 21 '13 at 13:58
3  
If you are in control of the scripts, how would you end up with a script in the head that was not enqueued properly? The notion of wp_localize_script is that you are making available to your script - which you are loading properly with wp_enqueue_script. In what case would you knowingly load script in the header file that needed these variables, rather than loading it through wp_enqueue_script? –  cale_b Oct 21 '13 at 14:15
    
@cale_b : There is a script which is already included inside header.php and it contains lots of scripts which starts to break things when I try to enqueue that js file by wp_enqueue_script. I need to make an ajax call inside from that script file. So instead of breaking the functionality and fixing one by one I needed a quick solution. Even I am not sure which part of the site breaks because of the small change of 'wp_enqueue_script' :( –  Subharanjan Oct 21 '13 at 14:32
    
Fair enough. Just as a tip, get Firebug for Firefox, and you can use the console to watch / see javascript errors. Invaluable tool for troubleshooting. –  cale_b Oct 21 '13 at 15:44

3 Answers 3

up vote 9 down vote accepted

Instead of using wp_localize_script in that case, you can hook your js variables at wp_head, that way it would be available to all js files like:

function my_js_variables(){ ?>
      <script type="text/javascript">
        var ajaxurl = '<?php echo admin_url( "admin-ajax.php" ); ?>';
        var ajaxnonce = '<?php echo wp_create_nonce( "itr_ajax_nonce" ); ?>';
      </script><?php
}
add_action ( 'wp_head', 'my_js_variables' )

Also as suggested by @Weston Ruter, you can json encode the variables:

add_action ( 'wp_head', 'my_js_variables' );
function my_js_variables(){ ?>
  <script type="text/javascript">
    var ajaxurl = <?php echo json_encode( admin_url( "admin-ajax.php" ) ); ?>;      
    var ajaxnonce = <?php echo json_encode( wp_create_nonce( "itr_ajax_nonce" ) ); ?>;
    var myarray = <?php echo json_encode( array( 
         'foo' => 'bar',
         'available' => TRUE,
         'ship' => array( 1, 2, 3, ),
       ) ); ?>
  </script><?php
}
share|improve this answer
    
Thanks for pushing me into right direction. –  Subharanjan Oct 21 '13 at 14:33
4  
You should use json_encode here, for example: var ajaxurl = <?php echo json_encode( admin_url( "admin-ajax.php" ) ); ?>; –  Weston Ruter Oct 22 '13 at 20:33
    
Fine, i'll add it now onwards –  sven Oct 23 '13 at 5:40

You can export any data you want in the wp_head hook, as the answers above show. However, you should use json_encode to prepare the PHP data for exporting to JS instead of trying to embed raw values into JS literals:

function my_js_variables(){
    ?>
    <script>
    var ajaxurl = <?php echo json_encode( admin_url( "admin-ajax.php" ) ) ?>;
    var ajaxnonce = <?php echo json_encode( wp_create_nonce( "itr_ajax_nonce" ) ) ?>;
    var myarray = <?php echo json_encode( array( 
        'food' => 'bard',
        'bard' => false,
        'quux' => array( 1, 2, 3, ),
    ) ) ?>;
    </script>
    <?php
}
add_action ( 'wp_head', 'my_js_variables' )

Using json_encode makes it easier on yourself, and it prevents accidental syntax errors if your string includes any quote marks. Even more importantly, using json_encode thwarts XSS attacks.

share|improve this answer

I ended up doing this. It works now !! Thanks @dot1

function itr_global_js_vars() {
    $ajax_url = 'var itrajaxobject = {"itrajaxurl":"'. admin_url( 'admin-ajax.php' ) .'", "itrajaxnonce":"'. wp_create_nonce( 'itr_ajax_nonce' ) .'"};';
    echo "<script type='text/javascript'>\n";
    echo "/* <![CDATA[ */\n";
    echo $ajax_url;
    echo "\n/* ]]> */\n";
    echo "</script>\n";
}
add_action( 'wp_head', 'itr_global_js_vars' );
share|improve this answer
1  
+1 for including the CDATA tags. –  cale_b Oct 21 '13 at 15:45
5  
You should use json_encode instead of manually creating JSON. –  Weston Ruter Oct 22 '13 at 20:32

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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