Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • #1042133

    Hi,
    I’d like to use a jQuery plugin on one single page of my website. I found your tutorial for adding JS files but I haven’t been able to understand how to do it.
    I wouldn’t like to call this plugin (through a script tag) in every single page so can you please help me adding it to the website.

    Thanks a lot!

    Regards

    Luca

    #1042160

    Hey viaggiareverde,

    You should be able to use an if statement to only run the script on a specific page.
    Refer to the following:

    https://stackoverflow.com/questions/46019661/run-specific-js-on-specific-page-wordpress

    Best regards,
    Jordan Shannon

    #1042525

    Hi,
    thanks for your answer. I’ve read the guide again and i’ve been able to add this plugin to my website, but still not to the specific page.
    So I checked the stackoverflow topic, but I didn’t understand how to apply those information on the Enfold theme.

    So far, I’ve created a “my_custom.js” file where I’ve wrapped my functions between:

     (function( $ ) {
        "use strict";
     
        $(function() {
     
            // ADDED PLUGIN FUNCTIONS HERE
     
        });
     
    }(jQuery)); 

    as suggested in the guide: https://kriesi.at/documentation/enfold/add-custom-js-or-php-script/

    Can you please help me in the next step to make it work only on one specific post.

    Thanks for your help!

    Regards

    Luca

    #1042579

    Hi,
    If you are using the instructions on the link above to add the script to your functions.php, then you can add the conditional statement:

    if ( is_page('1392') ) {

    and replace the number with your page number.
    So your code would look like this:

    function custom_script_name(){
    if ( is_page('1392') ) {
    ?>
    <script>
    // Your script here
    </script>
    <?php
    }
    add_action('wp_head', 'custom_script_name');

    If this doesn’t help, then please try including your script so we can assist further.

    Best regards,
    Mike

    #1042613

    Hi Mike,
    I’ve tried to change the code I put in function.php with the one you posted here. So I added all the plugin functions between the script tags. But that broke the website so maybe I didn’t understand exactly what you meant.

    Right know I still have a custom JS file, where I have all the functions I need, and that file is called (“globally”) by function.php.
    Basically I didn’t understand where to put the code you posted, and, if I need to copy all the functions between the script tags (and maybe delete the custom JS file).

    Thanks for your help!

    Regards

    Luca

    #1042620

    Hi,
    I took a look at the script and found it to be small enough to include in your functions.php, and delete the js file, I believe this would be fine:

    function persistent_checkboxes(){
        if ( is_page('1392') ) {
        ?>
        <script>
    var PersistentCheckboxes = function(){
        var genKey, load, save, addListeners, init;
    
        var PAGE = window.location.href;
    
        genKey = function(id){
            return 'checkbox:'+ PAGE +':'+ id;
        }
    
        save = function(event){
            // Only inputs with an id will be saved.
            if(this.id === ""){ return; }
            localStorage.setItem(genKey(this.id), this.checked+"");
        };
    
        load = function(){
            jQuery('input[type="checkbox"]').each(function(i, elm){
                // Ignore checkboxes with no id.
                var key = genKey(elm.id);
                if(elm.id !== "" && key in localStorage){
                    elm.checked = localStorage.getItem(key) === "true";
                }
            });
        };
    
        addListeners = function(){
            jQuery(document).on('change', 'input[type=checkbox]', save);
        };
    
        init = function(options){
            // Only supported if localStorage is available.
            if(typeof(Storage) === "undefined"){ return; }
            load();
            addListeners();
        };
    
        init();
    
        return this;
    };
    
    
    // Let's get this party started!
    var persistentCheckboxes;
    jQuery(document).ready(function(){
        persistentCheckboxes = new PersistentCheckboxes();
    });
    </script>
    <?php
    }
    add_action('wp_head', 'persistent_checkboxes');

    You will still want to change the page ID to the page you wish it to work on.

    Best regards,
    Mike

    #1042632

    Thanks Mike!
    There was a “}” missing after “<?php” but i realized it and fixed so now it works perfectly.
    Searching the forum I also found that i needed to use “is_single” instead of “is_page” to make this works on a specific post.
    Just wrote this for possible future readers.

    Thanks again for your quick and efficient support.

    Best regards

    Luca

    #1042690

    Hi Luca,

    Great, glad you found the problem and thanks for sharing. Please let us know if you should need any further help on the topic or if we can close it.

    Best regards,
    Rikard

    #1042838

    Hi Rikard,
    now you can close it.

    thanks again

    Regards

    Luca

    #1042925

    Hi Luca,

    Thanks for letting us know, I’ll close this for now then. Please open a new thread if you should have any further questions or problems.

    Best regards,
    Rikard

Viewing 10 posts - 1 through 10 (of 10 total)
  • The topic ‘How to make a jQuery plugin work in a specific page’ is closed to new replies.