How can I make use of conditional Wordpress statement to deliver specific code from footer to specific pages

Question

I have recently added a new page which has some additional footer code. I have added it in footer.php. However, those codes appear for all the pages in my site as it's in common footer.php file. How can I add a conditional statement in my footer before that code which will make that code to be visible only in the page that I want? As there is some conflicts between code when this code appear in all the pages.

if( is_page(7656))
{
<script>
  $.noConflict();
jQuery(document).ready(function(){

    jQuery(window).scroll(function() {

        var docViewTop = jQuery(window).scrollTop();
        var docViewBottom = docViewTop + jQuery(window).height();
        var customBottom = (jQuery(window).height())/3;
        var viewPort = jQuery(window).height();

        // console.log('viewPort', jQuery(window).height());
        // console.log('customBottom', customBottom);
        // console.log('docViewTop', docViewTop);
        // console.log('docViewBottom', docViewBottom);

        jQuery(".detectActive").each(function() {

            var elemTop = jQuery(this).offset().top;
            var elemBottom = (elemTop + jQuery(this).height() );
            var difference = docViewBottom - elemBottom;

            // console.log('elemTop', elemTop);
            // console.log('elemBottom', elemBottom);
            // console.log('difference', difference);
            if(( difference >= customBottom) && (difference <= viewPort)) {

                console.log('show now');                
                let active = jQuery(this).attr("data-active");
                jQuery('.commonLink').removeClass("hover_class");
                jQuery('#'+active+'-nav').addClass("hover_class");
                console.log('visible', active);  
            }

        });
    });

});
</script>
}

I have tried the above code and still, the above code shows on every page. What can I do to show on page with a page id of 7656?

Answer 1

Even though your question is about WordPress and the use of a PHP condition, you can also solve the problem client-side. WordPress adds a class to the body tag with the ID of the page or post you're currently watching, so all you need to do is add if ($('body').hasClass('page-id-7656')) to your code, like this:

<script>
$.noConflict();
jQuery(document).ready(function(){
    if ($('body').hasClass('page-id-7656')) {
        // The rest of your code goes here.
    }
});
</script>

If, however, you want a pure-PHP solution, @andrey-shandrov's answer is the way to go.

Answer 2

Here is your code

Add more page ids to array divide them with comas<?php if ( is_page( array( 7656, 7655, 7651 )) ) ) : ?>

<?php if ( is_page( array( 7656 ) ) ) : ?>
<script>
  $.noConflict();
jQuery(document).ready(function(){

    jQuery(window).scroll(function() {

        var docViewTop = jQuery(window).scrollTop();
        var docViewBottom = docViewTop + jQuery(window).height();
        var customBottom = (jQuery(window).height())/3;
        var viewPort = jQuery(window).height();

        // console.log('viewPort', jQuery(window).height());
        // console.log('customBottom', customBottom);
        // console.log('docViewTop', docViewTop);
        // console.log('docViewBottom', docViewBottom);

        jQuery(".detectActive").each(function() {

            var elemTop = jQuery(this).offset().top;
            var elemBottom = (elemTop + jQuery(this).height() );
            var difference = docViewBottom - elemBottom;

            // console.log('elemTop', elemTop);
            // console.log('elemBottom', elemBottom);
            // console.log('difference', difference);
            if(( difference >= customBottom) && (difference <= viewPort)) {

                console.log('show now');                
                let active = jQuery(this).attr("data-active");
                jQuery('.commonLink').removeClass("hover_class");
                jQuery('#'+active+'-nav').addClass("hover_class");
                console.log('visible', active);  
            }

        });
    });

});
</script>
<?php endif; ?>