preload
Jan 04

When developing a smooth plugin for WordPress you will quite often need to supplement php and html with some kind of scripting language. To make the floating input form for the DiveBook plugin I used jQuery and I used Javascript to validate user input and redirecting.

To include your script files to the plugin you need to add the following code in your main php file:

//Add script
add_action('wp_print_scripts', 'divebook_enqueue_js');

function divebook_enqueue_js () {
    wp_enqueue_script('divebookFunctions', WP_CONTENT_URL . '/plugins/divebook/functions.js', array('jquery'),'1.0.1');
    wp_enqueue_script('divebookPopup', WP_CONTENT_URL . '/plugins/divebook/divepopup.js', array('jquery'),'1.0.1');
}

The code above includes two script files: functions.js and divepopup.js. They both depends on jquery and I am using the built in jQuery in WordPress.
I spent quite some time trying to understand why my jQuery functions did not run. I used FireBug to debug my scripts and found that I got the error “$ is not a function”.  I googled  the error message and found this great post explaining that the dollar sign is reserved in WordPress for the Prototype library and by replacing “$” with “jQuery” the problem was solved.

Since we are talking about how to include files I will also show how to include css files in your WordPress plugin. To achieve this add the following code in your main php file:

//Add action to load css to wp head
add_action('wp_head', 'load_css');

function load_css() {
    echo '<link type="text/css" rel="stylesheet" href="' . get_bloginfo('url') .'/wp-content/plugins/DiveBook/divebook.css" />' . "\n";
}

When this is done you can use jQuery, Javascript and CSS as you please when developing your plugin

Follow me on twitter @PerOla

Share & enjoy
You can subscribe to my comments feed to keep track of new comments.

1 Comment to “Using jQuery and Javascript in WordPress”

  1. I have experienced some issues that the WordPress theme css overrides the plugin css and I have therefore changed the load css functionality.

    Instead of what stated in the post you should use:

    //Add action to load css
    add_action(‘wp_print_styles’, ‘divebook_load_css’);

    function divebook_load_css() {
    wp_enqueue_style(‘divebookStyle’, WP_CONTENT_URL . ‘/plugins/divebook/divebook.css’);
    }

    When loading css this way I have not experienced any issues (yet).

2 Pingbacks to “Using jQuery and Javascript in WordPress”

  1. […] input form for the DiveBook plugin I used jQuery and I used Javascript to validate user input… [full post] Per Ola Sæther breathingtech.com – Blog about Technology, Mobility and Software Development […]

  2. […] This post was mentioned on Twitter by Pinceladas da Web, Grazielle Santos, Ederson Schmidt, Uilson Della Rosa, codeworks and others. codeworks said: RT @pinceladasdaweb: Using jQuery and Javascript in WordPress: http://migre.me/3IuJ1 […]

Leave a Reply

Subscribe to my comments feed

Subscribe to my feeds Follow me on Twitter
DZone MVB