0

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>
4

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 in 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 :

  • I have voted to reject your edit since the change you made in the title changes the meaning of the question itself. – Mark Kaplun Feb 11 '17 at 18:28
  • @Mark Kaplun, What about the the formatting in the content? Will that be rejected too? It took some time on mobile. – devkabiir Feb 11 '17 at 18:34
  • it might still be accepted in any case ;) two votes are needed to accept or reject. It is possible to edit your edit, but I am not sure who will get the credit after that and didn't want to do it, wasn;t sure if you would have like someone doing it ;) – Mark Kaplun Feb 11 '17 at 18:54
  • I'm grateful for the answer, but it didn't work for me. The script and its function were not reached. Still investigating why. – Yoav Ossia Feb 13 '17 at 10:41
  • I tried that on my local install and it works fine, I use the same functions on my plugins. Check out the references I provided. This however, requires knowledge of PHP and a little bit WordPress. – devkabiir Feb 13 '17 at 10:44

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.