0

What is the best way to add JS script in wordpress and apply it to one page? As I understand, adding it in template is not recommended. My simple JS is:

var allStates = $("svg.us > *");

allStates.on("click", function() {

  allStates.removeClass("on");
  $(this).addClass("on");

});
2

Create a new dir and file dedicated to your javascript. /js/scripts.js.

Wrap your entire javascript like this:

( function( $ ) {

  var allStates = $("svg.us > *");

  allStates.on("click", function() {

    allStates.removeClass("on");
    $(this).addClass("on");

  });

} )( jQuery );

Then in your theme's functions file, put this code. It loads your new js file.

function your_scripts() {
  wp_enqueue_script( 'your-script-handle', get_template_directory_uri() . '/js/scripts.js', array( 'jquery' ), '1.0', false );
}
add_action( 'wp_enqueue_scripts', 'your_scripts' );

That way, all your javascript is available on any page and is loaded only once (afterwards, it's in browser cache). Since your function is on click it's fine for it to be available on all pages.

| improve this answer | |
  • 1
    I would agree this approach is the most efficient way. You could then check to see if a unique class or id exist from your unique page(s), to then execute the javascript. Centralizing javascript to a single location makes it that much easier to manage as the site continues to grow. – klewis Oct 31 '16 at 2:04
  • @cowgill Unfortunately, despite the fact that the script is loaded, it still doesn't work. When I check the code on non-wordpress site, it works normally. – Rafal Oct 31 '16 at 14:20
  • @Rafal, any error messages in the console window? Can you include the HTML piece of your code above that the JavaScript triggers? – cowgill Oct 31 '16 at 22:29
  • @cowgill I can't see any errors in the console. JS is trigered by clicking on paths part of the code is <svg class="us" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="100%" height="500px" viewBox="0 0 200 200" enable-background="new 0 0 200 200" xml:space="preserve"> <g id="south"> <a href="#southten" data-vc-tabs="" data-vc-container=".vc_tta"><path clip-rule="evenodd" d=" .... " "/></a> </g> – Rafal Nov 1 '16 at 1:28
1

You could do something like the following to check for a page before enqueuing. You may need to update your login inside the if statement if the post type is not a page - that this is the general concept:

add_action( 'wp_enqueue_script', 'enqueue_my_script');
function enqueue_my_script() {
    $page_title = 'Page Title';
    if ( is_page( $page_title ) ) {
        wp_enqueue_script( 'your-script-handle', get_template_directory_uri() . '/js/scripts.js', array( 'jquery' ), '1.0', false );
    }
}
| improve this answer | |
1

Check your page with is_page in wp_enqueue_scripts just in time for wp_add_inline_script.

add_action( 'wp_enqueue_scripts', function() {

    if ( is_page( 'your-page-name' ) ) : ob_start(); ?>

        // generic    
        alert('Custom JS Loaded!');

        // custom           
        var allStates = $("svg.us > *");

        allStates.on("click", function() {

        allStates.removeClass("on");
        $(this).addClass("on");

        });
        <?php wp_add_inline_script( 'jquery-migrate', sprintf( '( function( $ ) { %s } )( jQuery );', ob_get_clean() ) );

    endif; // test page

} );
| improve this answer | |

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.