Wordpress Custom Plug (how to call multiple javascript files)

I decided to try to create a plugin that calls forth a couple of javascript files and a css file using the Wordpress Plugin Generator. It is working somewhat - it's calling one of the javascript files but not the other two.

I am using the wp_enqueue_script function, but probably wrong. Any help would be greatly appreciated!

<?php

/*
Plugin Name: Tab Header Code
Plugin URI: [insert the plugin uri here]
Description: Inserts appropriate javascript and css libraries for tabs
Author: Jesse Wallace
Version: 0.1
Author URI: http://www.enticent.com
Generated At: www.wp-fun.co.uk;
*/ 

if (!class_exists('tabstyles')) {
    class tabstyles {

 /**
 * PHP 4 Compatible Constructor
 */

 function tabstyles(){$this->__construct();}

 /**
 * PHP 5 Constructor
 */  

 function __construct(){
 add_action("init", array(&amp;$this,"add_script1"));
 add_action("init", array(&amp;$this,"add_script2"));
 add_action("init", array(&amp;$this,"add_script3"));
 add_action("wp_head", array(&amp;$this,"add_css"));
 }

 /**
 * Tells WordPress to load the scripts
 */

 function add_script1(){
 wp_enqueue_script('tab_header_code_script1', '/wp-content/plugins/tab-header-code/js/tabview-min.js', NULL , 0.1);
 }

 function add_script2(){
 wp_enqueue_script('tab_header_code_script2', '/wp-content/plugins/tab-header-code/js/element-min.js', NULL , 0.1);
 }

 function add_script3(){
 wp_enqueue_script('tab_header_code_script3', '/wp-content/plugins/tab-header-code/js/yahoo-dom-event.js', NULL , 0.1);
 }

 /**
 * Adds a link to the stylesheet to the header
 */

 function add_css(){
 echo '<link rel="stylesheet" href="'.get_bloginfo('wpurl').'/wp-content/plugins/tab-header-code/css/tabstyle.css" type="text/css" media="screen"  />';
 }
}
}

//instantiate the class
if (class_exists('tabstyles')) {
    $tabstyles = new tabstyles();
}

?>

From stackoverflow

• Hi! I think the correct method should be something like this:

  <?php
  
  if (!class_exists('tabstyles')) {
      class tabstyles {
  
          /**
          * PHP 4 Compatible Constructor
          */
  
          function tabstyles(){$this->__construct();}
  
          /**
          * PHP 5 Constructor
          */              
  
          function __construct(){
              add_action("init", array(&$this,"on_init"));
          }
  
          /**
          * Tells WordPress to load the scripts
          */
  
          function on_init(){
     // scripts
              wp_enqueue_script('tab-view-min', get_bloginfo('wpurl').'/wp-content/plugins/tab-header-code/js/tabview-min.js');
              wp_enqueue_script('element-min', get_bloginfo('wpurl').'/wp-content/plugins/tab-header-code/js/element-min.js');
              wp_enqueue_script('yahoo-dom-event', get_bloginfo('wpurl').'/wp-content/plugins/tab-header-code/js/yahoo-dom-event.js');
  
     //css
              wp_enqueue_style('tabstyle', get_bloginfo('wpurl').'/wp-content/plugins/tab-header-code/css/tabstyle.css');
  
          }
  
      }
  }
  
  //instantiate the class
  if (class_exists('tabstyles')) {
      $tabstyles = new tabstyles();
  }
  

  ?>

  I'm more of a theme developer than plugin developer but I think that you can enqueue everything from just one callback.

  Cheers

  cori : Aye, a single callback should work fine.

• why not use

  add_action('wp_head', 'insert_head');
  

  then have a insert_js function

  function insert_head() {
      ?>
      <script type="text/javascript" src="<?php bloginfo('wpurl') ?>/wp-content/plugins/tab-header-code/js/tabview-min.js"></script>
      <script type="text/javascript" src="<?php bloginfo('wpurl') ?>/wp-content/plugins/tab-header-code/js/element-min.js"></script>
      <script type="text/javascript" src="<?php bloginfo('wpurl') ?>/wp-content/plugins/tab-header-code/js/yahoo-dom-event.js"></script>
      <link type="text/css" src="<?php bloginfo('wpurl') ?>/wp-content/plugins/tab-header-code/css/tabstyle.csss"></link>
      <?php
  }
  

• wp_enqueue_script is the right way of doing it. You could do the same thing Scott suggested, but the purpose of wp_enqueue_script is to avoid conflicts, which is something WP automatically handles.

  Are you loading this on the front end or back end?

  If back-end, I highly recommend limiting your JS files to only loading on your plugin pages, here's how you do that:

  add_action('admin_menu', 'add_pages');
  
  function add_pages() {
      $my_plugin_page = add_menu_page('Plugin Name', 'Plugin Name',  8,__FILE__, 'invoice_overview',"images/plugin_icon.png");
  
      // This is the trick, notice the "$my_plugin_page" being tacked on the end of admin_print_scripts
      add_action( "admin_print_scripts-$my_plugin_page", 'admin_head');
  
  }
  
  function admin_head() {
      global $path_to_your_files;
  
      // You may notice array('jquery') at the end, that means jQuery is required to make that particular file function, and WP will include it automatically
      wp_enqueue_script('jquery.whatever',$path_to_your_files . "/js/jquery.whatever.js", array('jquery'));
      wp_enqueue_script('jquery.autocomplete',$path_to_your_files . "/js/jquery.autocomplete.js", array('jquery'));
      wp_enqueue_script('your_custom_file',$path_to_your_files . "/js/your_custom_file.js", array('jquery'));
  
  }
  

  For the front-end its more difficult to isolate your JS files to specific pages. The correct way to insert js files is similar, except I typically load them into the init, just as you did.

  One more thing, be careful using __construct in your PHP code because it doesn't work in PHP4, in case you plan on distributing your plugin, keep in mind some people are still using PHP4.

  Good luck.