WordPress Plugin Development – Using JavaScript

This forms part of my WordPress Plugin Development Series. In this section we add JavaScript to a plugin.

We use WordPress’ built in function wp_enqueue_script to add JavaScript into a WordPress file.

If you want to see an in depth explanation of the function, see WordPress Codex

In the last section, WordPress Shortcodes, I added a shortcode that shows the date via PHP.

I will change this to show the date using JavaScript’s alert function instead.

I changed my wt_show_date_function from:

function wt_show_date_function(){
$currentDate = date('Y-m-d H:i:s');
return $currentDate;
}
add_shortcode('wt_show_date', 'wt_show_date_function');

To.

function wt_show_date_function(){
	wp_enqueue_script( 'wt_subscribe_form', plugin_dir_url( __FILE__ ) . 'js/wt_hello_world.js', array ( 'jquery' ), "1.04", true);
}
add_shortcode('wt_show_date', 'wt_show_date_function');

The wp_enqueue_script function has 5 parameters:

Name of your Script
A Unique name for your script.

Full URL of JavaScript File
Full URL of script file (Relative to your wordpress root directory)

Dependencies
What dependencies does your script have.

Script Version
A version for your script. This helps with cache control.

Load Script in Footer (true/false)
Whether you want to load your JavaScript at the end of the HTML Body instead of its header.

Once you updated your date function. You need to create your JavaScript file.

1. In your plugin folder, create a folder called js.
2. In the js folder, create a javascript called wt_hello_world.js

We create the JavaScript alert

jQuery(document).ready(function() {
	var currentDate=new Date();
	alert(currentDate);
});

Once you added the above, Your full plugin file should look as follows:

<?php
    /* Plugin Name: WT Hello World
    
WordPress Plugin Development

    description: Hello World WordPress plugin that alerts text via shortcode
    Version: 1.0.4
    Author: Willie Theron 
    Author URI: http://willietheron.com 
    License: GPL2 */ 

function wt_hello_world_activate() {
	//This will run when your plugin is activated
}
register_activation_hook( __FILE__, 'wt_hello_world_activate' );

function wt_hello_world_deactivate() {
	//This will run when your plugin is deactivated
}
register_deactivation_hook( __FILE__, 'wt_hello_world_deactivate' );

function wt_hello_world_uninstall() {
	//This will run when your plugin is uninstalled
}
register_uninstall_hook( __FILE__, 'wt_hello_world_uninstall' );

//Shortcode to echo the date
function wt_show_date_function(){
	wp_enqueue_script( 'wt_subscribe_form', plugin_dir_url( __FILE__ ) . 'js/wt_hello_world.js', array ( 'jquery' ), "1.04", true);
}
add_shortcode('wt_show_date', 'wt_show_date_function');
?>

Once your plugin has been updated, add your Shortcode – [wt_show_date] to a sidebar, widget or page to test if it works.

Test and if your plugin alerted the date, we are good to go.

If you need it, here is the Source Code: wt-hello-world – using JavaScript