You can include javascript in your wordpress backend as well on the frondend ( … Continue reading →]]> There are so many ways of adding javascript in wordpress plugins and themes. I would like to show you the right methods I use and recommend.

You can include javascript in your wordpress backend as well on the frondend ( The pages which are visible to the normal visitors of the site ). If you are working with a plugin then the right way to do that is as follows.

If you are planning to include the javascript in the frontend pages then include this in your wordpress plugin’s constructor function if you are using a plugin.

<?php

/*
  Plugin Name: How to include scripts in wp plugins
  Plugin URI: http://www.smaartweb.com
  Description: Test plugin on how to include javascript in WordPress Plugins.
  Version: 1.0.0
  Author: anver
  Author Email : anvergdr@gmail.com
  Author URI: http://www.smaartweb.com

  ------------------------------------------------------------------------
  Copyright 2012 smaartweb

  This program is free software; you can redistribute it and/or modify
  it under the terms of the GNU General Public License as published by
  the Free Software Foundation; either version 2 of the License, or
  (at your option) any later version.

  This program is distributed in the hope that it will be useful,
  but WITHOUT ANY WARRANTY; without even the implied warranty of
  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
  GNU General Public License for more details.

  You should have received a copy of the GNU General Public License
  along with this program; if not, write to the Free Software
  Foundation, Inc., 59 Temple Place, Suite 330, Boston, MA 02111-1307 USA
 */

if ( !class_exists( 'clssnippet' ) )
{

    class clssnippet
    {

        /**
         * class default constructor
         */
        public function __construct()
        {
            add_action( 'wp_enqueue_scripts', array( $this, 'insert_scripts' ) );
        }

        /**
         * inserts all the necessary scripts on the fronend
         * @access public
         */
        public function insert_scripts()
        {
            if ( !is_admin() )
            {
                wp_enqueue_script( 'your-unique-script-id', plugins_url( 'js/your-script.js', __FILE__ ), array( 'jquery' ), '1.0', TRUE );
            }
        }

    }

}

if ( class_exists( 'clssnippet' ) )
{
    $obj_snippet = new clssnippet();
}

I’ll explain the line

wp_enqueue_script( 'your-unique-script-id', plugins_url( 'js/your-script.js', __FILE__ ), array( 'jquery' ), '1.0', TRUE );

The first parameter to the function is your javascript id, it can anything but has to be unique if you have to use this script in your pages but if you want to use the same scripts in two or more plugins and you want to load the script only once from any one of the plugins then make sure you put the script id same on all the plugins so that only one copy of the script gets loaded which makes the loading time quick and makes sense too. We don’t want the same script to load more than once on the same page.

The second parameter is the script url, the path where the script is lying. This is a wordpress function which many wp plugin authors ignore to use. I highly recommend using this function because it finds the correct js file even if you rename the directory of the plugin later if you decide to, still the plugin works perfectly without changing any coding inside the plugin by using this handy function. __FILE__ detects the correct directory of the plugin.

The third parameter is there to include any supporting javascript files for your script to work, most of the designers now use js frameworks like jquery and prototype. So if your script is dependent on some js libraries you can include here in an array. If you want to include multiple frameworks just seperate them by commas inside the array and everything works fine.

The fourth parameter is your scripts version number, you can put your revision code here if you want to.

The last parameter decides if you want to include this script in the footer or not. The default is false which includes the script in the header, still that depend on the way the main framework is inserted on the page if you are using jquery or other libraries. If those libraries are included in the footer then your script will be printed on the footer as well as your script loads only after loading the main dependent script.

There are so many things left, I’ll continue and complete this topic when i get some time.

Thanks and Regards,

Anver.