I’m new to WordPress, tried first searching for this and found a few related answers, none of which i fully understood. Will appreciate a few lines of concrete instructions.
I have a WordPress page that has a script with a few functions and then another short script that uses them. I’d like to reuse these functions in some other pages. so:
-
do I create a separate js file? where do I put it? in wp-includes/js ?
-
how do i expose them to pages (do i put in functions.php, via the
register and enque? how do I specify the path exactly? or is there
another way to do this?
-
Is there a way not to expose to all pages, but rather to specific
few ones?
-
In the using pages, how do I load and call these functions?
below is the structure of code I have now.
Thanks!
Yoav
<script>
// an example for the functions i want to reuse function
foo(x,y) {
...
do stuff
return z;
}
function goo() {
// <![CDATA[ ..
do stuff ...
// ]]>
}
</script>
<script>
// an example for the real
page val x = "something";
val y = "other";
var message = foo(x, y);
// this will add some content to the page goo();
// this adds some more
document.write(message);
</script>
Yes, create a separate JS file and store it in your plugin or theme folder, lets call it example.js
. This file should contain all the common function you need to execute in multiple pages, page-specific functions should go to a separate file.
After you’ve written your code in the example.js
you need to include it on WordPress, to do this you need to use this function
function my_scripts() {
// Page ID, title, slug, or array of such.
// e.g. is_page('My page title') - page title
// e.g. is_page(2) - page id
// e.g. is_page('my-page-title') - page slug
// e.g. is_page( array( 'page1', 'page1')) - in this example an array of page slugs.
// Check out the references for more on this function.
if ( is_page( array( 'about-us', 'contact', 'management' ) ) {
wp_enqueue_script( 'script-name', 'path/to/example.js', array(), '1.0.0', true );
}
}
add_action( 'wp_enqueue_scripts', 'my_scripts' );
You can put this function in functions.php
. If the file is in your theme directory then use this
wp_enqueue_script( 'script-name', get_template_directory_uri() . '/example.js', array(), '1.0.0', true );
Tip:
If the example.js
is in your plugin folder then you need to use
plugin_dir_url( __FILE__ )
instead of get_template_directory_uri()
where __FILE__
is a PHP constant for current file path.
To set a variable and use its value across different pages in your JS file, you need this function.
wp_localize_script('script-name', 'array_name', array(
'variable_name' => 'Variable value'
)
);
Note:
wp_localize_script
MUST be called after the script has been registered using wp_register_script()
or wp_enqueue_script()
.
References:
- wp_enqueue_script() – Used to actually enqueue the script
- wp_localize_script() – Used to pass any variables/data from WordPress/PHP to JS
- get_template_directory_uri() – Retrieve theme directory URI.
- is_page() – Condition to check if you want to load the JS on specific pages only.
- plugin_dir_url() – Get URL for the plugin directory.
- __FILE__ – PHP constant