CODEWITHSUNDEEP
javascriptphpjquerywordpress
Eckstein
Eckstein

Reputation: 825

Wordpress: Using one plugin file's function in another plugin's file

I have two plugins that work together (one is an add-on of sorts). In the "main" plugin, I have a js function in a file located like so:

wp-plugins/main-plugin-name/js/main-js.js

If my secondary plugin, I have another .js file located like so:

wp-plugins/secondary-plugin-name/js/sec-js.js

In this second plugin's .js file, I want to use a function located in the first .js file. Basically I want the function to be globally available to both plugins.

I have already registered and enqueued the first .js script using the main plugin, but I can't seem to get the secondary plugin to find the function from the first, and use it.

In first plugin's main function file:

add_action( 'wp_enqueue_scripts', 'custom_enqueue_script');
add_action('admin_enqueue_scripts', 'custom_enqueue_script');
function custom_enqueue_script() {
wp_register_script( '123-script-name', $plugin_url.'js/123-script-name.js', array('jquery') );
    wp_enqueue_script( '123-script-name' );
}

Within that file, there is a function:

function 789_function() {
alert('this function ran!');
}

In the second plugin's .js file, I want to use that function, which seems like I should be able to since that file is already enqueued, but throws an uncaught reference error instead when the function is called.

Upvotes: 1

Views: 1071

Answers (1)

ethancrist
ethancrist

Reputation: 114

Your function name 789_function looks funky. Try renaming it:

function testName() {
    alert('this is a function ran!')
}

Script 2

testName();

My best guess is wordpress does some quirky stuff because they don't want you modifying their codebase.


Concept

As long as the first script is loaded before the second script, the second script should be able to utilize it just fine.

first.js

var codeStuff = "This is code in the first script! :D";

second.js

console.log(codeStuff);

Output

"This is code in the first script! :D"

--

Page

<html>
<head>
<script src="first.js"></script>
<script src="second.js"></script>
<body>
<p>My name is Eckstein and I'm awesome.</p>
</body>
</head>

Upvotes: 1

Related Questions