WordPress Custom Plug (how to call multiple javascript files)

3 Views

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

?>
Post Views: 3

Related posts

Leave a Reply

3 comments

  1. 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.

  2. 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

  3. 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
}