Wordpress Custom Plug (how to call multiple javascript files)

Question

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();
}

?>

Answer 1

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

Answer 2

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
}

Answer 3

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.