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.

I try this:

add_action('admin_print_scripts', 'custom_admin_scripts' ); 
function custom_admin_scripts() {   
    echo '<script type="text/javascript" src="' . get_bloginfo('stylesheet_directory') . /admin-scripts.js"></script>';
 }

but by this way it doesn't recognize jQuery. So I get Uncaught ReferenceError: jQuery is not defined.
I think that it because jQuery is linked after my script. As I see in HTML source:

<script type="text/javascript" src="http://localhost:8080/wp-test/wp-content/themes/test/admin-scripts.js"></script>
<script type="text/javascript" src="http://localhost:8080/wp-test/wp-admin/load-scripts.php?c=1&amp;load=jquery,utils&amp;ver=edec3fab0cb6297ea474806db1895fa7"></script>

How can I fix it?

share|improve this question
add comment

2 Answers

up vote 4 down vote accepted

The problem is that you are loading your script before jQuery has been loaded.

Do not print scripts directly.

You should (register and then) enqueue them using the provided API. jQuery is already a registered script, so you can just enqueue it (say on the admin_enqueue_scripts hook).

However you only need to load jQuery if you are loading a custom script that requires it, in which case you should enqueue your custom script and add jQuery as a dependency. WordPress will then handle the loading of the scripts and in the correct order:

add_action('admin_enqueue_scripts','wptuts53021_load_admin_script');
function wptuts53021_load_admin_script( $hook ){
    wp_enqueue_script( 
        'wptuts53021_script', //unique handle
        get_template_directory_uri().'/admin-scripts.js', //location
        array('jquery')  //dependencies
     );
}

Side remarks

  • Use get_template_directory_uri() rather than get_bloginfo()
  • Use the passed $hook (which will be edit.php, post.php, post-new.php etc) and get_current_screen() to determine if you are on a page that requires your script to be loaded. Only load scripts when you actually need them.

E.g (Codex example):

function my_enqueue($hook) {
    //Load only on edit.php pages
    //You can use get_current_screen to check post type
    if( 'edit.php' != $hook )
        return;
    wp_enqueue_script( 'my_custom_script', plugins_url('/myscript.js', __FILE__) );
}
add_action( 'admin_enqueue_scripts', 'my_enqueue' );
share|improve this answer
    
Thank you very very much! –  s976 May 23 '12 at 10:27
add comment

First, let's include them in a proper way.

add_action( 'wp_enqueue_scripts', 'custom_admin_scripts' );

function custom_admin_scripts() {

  wp_register_script( 'admin-scripts', get_template_directory_uri() . '/js/admin-scripts.js', array('jquery'), '1.0', true );

  if ( is_admin() ) {
    wp_enqueue_script('admin-scripts');
  }

}

Second, take a read here http://wpcandy.com/teaches/how-to-load-scripts-in-wordpress-themes

share|improve this answer
    
Thank you. It's an exellent tutotial. –  s976 May 23 '12 at 11:28
add comment

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.