Script in a custom footer

[Ghiotto]

Hi there, I’ve need to load a script just right before the body closing tag. The problem is that script works properly only in the page where such script is called and used. On other pages it generates an error in console and I don’t need to load it there.

So, I have create a custom template for my home page and I would like to create a custom footer loaded only by my custom home template.
I have studied the structure, but I have decided to contact you because there are many references about footer and I’m not sure what I have to replicate to create a new dependance.

In my custom template there’s wp_footer(); and I think I have to start from here. Can you please help me to follow the right way to attach a custom font (different form one shared by all site) to my custom template?

Thank you very much

[paul.r]

Hi,

You can use hooks instead of creating a template.

Add the code below in your child theme’s functions.php file

<?php
function add_my_footer() {
if(is_front_page()) {
?>
  ADD YOUR SCRIPT HERE
<?php
}}
add_action( 'wp_footer', 'add_my_footer' );
?>

For more information regarding this, kindly refer to the links below

Actions, Filters and Hooks (oh my) | Themeco Docs

https://codex.wordpress.org/Plugin_API/Action_Reference/wp_footer

Hope that helps

[Ghiotto]

Oh, I haven’t thought about this solution. Thank oyu very much

[Ghiotto]

Hi, I have take my portion of script code and I have pasted it inside the funcion:

//Custom footer on home page

function add_my_footer() {
if(is_front_page()) {
    ?>

    <script src="https://cdn.jsdelivr.net/npm/particles.js@2.0.0/particles.min.js"></script>

    <script>
        ScrollReveal().reveal('.intro-claim', { delay: 200, duration: 3200 });
        ScrollReveal().reveal('.projects', { delay: 300, duration: 3200 });
        ScrollReveal().reveal('.processo', {delay: 300, duration: 3200 });
        ScrollReveal().reveal('.eventi', {delay: 300, duration: 3200 });
        ScrollReveal().reveal('.contatti', {delay: 300, duration: 3200 });
        ScrollReveal().reveal('.maps', {delay: 300, duration: 3200 });
    </script>

    <script>
        // ParticlesJS Config.
        particlesJS("particles-js", {
            "particles": {
                "number": {
                    "value": 80,
                    "density": {
                        "enable": false,
                        "value_area": 900
                    }
                },
                "color": {
                    "value": "#000000"
                },
                "shape": {
                    "type": "circle",
                    "stroke": {
                        "width": 0,
                        "color": "#000000"
                    },
                    "polygon": {
                        "nb_sides": 5
                    },
                },
                "opacity": {
                    "value": 0.5,
                    "random": false,
                    "anim": {
                        "enable": false,
                        "speed": 1,
                        "opacity_min": 0.1,
                        "sync": false
                    }
                },
                "size": {
                    "value": 3,
                    "random": true,
                    "anim": {
                        "enable": false,
                        "speed": 40,
                        "size_min": 0.1,
                        "sync": false
                    }
                },
                "line_linked": {
                    "enable": true,
                    "distance": 150,
                    "color": "#000",
                    "opacity": 0.4,
                    "width": 1
                },
                "move": {
                    "enable": true,
                    "speed": 2,
                    "direction": "none",
                    "random": false,
                    "straight": false,
                    "out_mode": "out",
                    "bounce": false,
                    "attract": {
                        "enable": false,
                        "rotateX": 600,
                        "rotateY": 1200
                    }
                }
            },
            "interactivity": {
                "detect_on": "canvas",
                "events": {
                    "onhover": {
                        "enable": false,
                        "mode": "grab"
                    },
                    "onclick": {
                        "enable": true,
                        "mode": "push"
                    },
                    "resize": true
                },
                "modes": {
                    "grab": {
                        "distance": 140,
                        "line_linked": {
                            "opacity": 1
                        }
                    },
                    "bubble": {
                        "distance": 400,
                        "size": 40,
                        "duration": 2,
                        "opacity": 8,
                        "speed": 3
                    },
                    "repulse": {
                        "distance": 200,
                        "duration": 0.4
                    },
                    "push": {
                        "particles_nb": 4
                    },
                    "remove": {
                        "particles_nb": 2
                    }
                }
            },
            "retina_detect": true
        });
    </script>
    <?php
}}
add_action( 'wp_footer', 'add_my_footer' );

But the script is not loaded. Is it correct how I have inserted the script? I’ve cjecked the link you have show me adn the script seems to be loaded correctly.

I hope you can help me, thank you very much

[rad]

Hi @Ghiotto,

Is it added to the child theme? Yes, I couldn’t find the script that is supposed to be added to the footer. There is no cache either, would you mind providing your site’s login credentials in a secure note? I can only check if it’s added correctly, but I can’t fix any issue that your scripts may bring.

And please update your theme too, you have updated cornerstone but not the theme. The two should be updated, else, there will be issues due to incompatibilities.

Thanks!