include javascript Multiple files in wordpress through script.js

i have script.js file for html to wordpress conversion. In html it works, but in wordpress it does not work. This file contains slider, menus etc, I enable to convert html to wordpress without this file, the file has following contents

function include(scriptUrl) {
    document.write('script src="' + scriptUrl + '"/script');
}

function isIE() {
    var myNav = navigator.userAgent.toLowerCase();
    return (myNav.indexOf('msie') != -1) ? parseInt(myNav.split('msie')[1]) : false;
};

/* cookie.JS
 ========================================================*/
include('js/jquery.cookie.js');

/* Easing library
 ========================================================*/
include('js/jquery.easing.1.3.js');

/* Stick up menus
 ========================================================*/
;
(function ($) {
    var o = $('html');
    if (o.hasClass('desktop')) {
        include('js/tmstickup.js');

        $(document).ready(function () {
            $('#stuck_container').TMStickUp({})
        });
    }
})(jQuery);

/* ToTop
 ========================================================*/
;
(function ($) {
    var o = $('html');
    if (o.hasClass('desktop')) {
        include('js/jquery.ui.totop.js');

        $(document).ready(function () {
            $().UItoTop({
                easingType: 'easeOutQuart',
                containerClass: 'toTop fa fa-arrow-up'
            });
        });
    }
})(jQuery);

/* EqualHeights
 ========================================================*/
;
(function ($) {
    var o = $('[data-equal-group]');
    if (o.length  0) {
        include('js/jquery.equalheights.js');
    }
})(jQuery);

/* SMOOTH SCROLLIG
 ========================================================*/
;
(function ($) {
    var o = $('html');
    if (o.hasClass('desktop')) {
        include('js/jquery.mousewheel.min.js');
        include('js/jquery.simplr.smoothscroll.min.js');

        $(document).ready(function () {
            $.srSmoothscroll({
                step: 150,
                speed: 800
            });
        });
    }
})(jQuery);

/* Copyright Year
 ========================================================*/
;
(function ($) {
    var currentYear = (new Date).getFullYear();
    $(document).ready(function () {
        $("#copyright-year").text((new Date).getFullYear());
    });
})(jQuery);


/* Superfish menus
 ========================================================*/
;
(function ($) {
    include('js/superfish.js');    
})(jQuery);

/* Navbar
 ========================================================*/
;
(function ($) {
    include('js/jquery.rd-navbar.js');
})(jQuery);

/* Camera
========================================================*/
;(function ($) {
var o = $('#camera');
    if (o.length  0) {
        if (!(isIE()  (isIE()  9))) {
            include('js/jquery.mobile.customized.min.js');
        }

        include('js/camera.js');

        $(document).ready(function () {
            o.camera({
                autoAdvance: true,
                height: '25.8536%',
                minHeight: '300px',
                pagination: true,
                thumbnails: false,
                playPause: false,
                hover: false,
                loader: 'none',
                navigation: false,
                navigationHover: false,
                mobileNavHover: false,
                fx: 'simpleFade'
            })
        });
    }
})(jQuery);

/* FancyBox
========================================================*/
;(function ($) {
    var o = $('.thumb');
    if (o.length  0) {
        include('js/jquery.fancybox.js');
        include('js/jquery.fancybox-media.js');
        include('js/jquery.fancybox-buttons.js');
        $(document).ready(function () {
            o.fancybox();
        });
    }
})(jQuery);

/* Parallax 
=============================================*/ 
;(function ($) { 
    include('js/jquery.rd-parallax.js'); 
})(jQuery);


/* Google Map
 ========================================================*/
;
(function ($) {
    var o = document.getElementById("google-map");
    if (o) {
        include('//maps.google.com/maps/api/js?sensor=false');
        include('js/jquery.rd-google-map.js');

        $(document).ready(function () {
            var o = $('#google-map');
            if (o.length  0) {
                var styleArray = [
                    {
                        "featureType": "administrative.locality",
                        "elementType": "all",
                        "stylers": [
                            {
                                "hue": "#2c2e33"
                            },
                            {
                                "saturation": 7
                            },
                            {
                                "lightness": 19
                            },
                            {
                                "visibility": "on"
                            }
                        ]
                    },
                    {
                        "featureType": "landscape",
                        "elementType": "all",
                        "stylers": [
                            {
                                "hue": "#ffffff"
                            },
                            {
                                "saturation": -100
                            },
                            {
                                "lightness": 100
                            },
                            {
                                "visibility": "simplified"
                            }
                        ]
                    },
                    {
                        "featureType": "poi",
                        "elementType": "all",
                        "stylers": [
                            {
                                "hue": "#ffffff"
                            },
                            {
                                "saturation": -100
                            },
                            {
                                "lightness": 100
                            },
                            {
                                "visibility": "off"
                            }
                        ]
                    },
                    {
                        "featureType": "road",
                        "elementType": "geometry",
                        "stylers": [
                            {
                                "hue": "#bbc0c4"
                            },
                            {
                                "saturation": -93
                            },
                            {
                                "lightness": 31
                            },
                            {
                                "visibility": "simplified"
                            }
                        ]
                    },
                    {
                        "featureType": "road",
                        "elementType": "labels",
                        "stylers": [
                            {
                                "hue": "#bbc0c4"
                            },
                            {
                                "saturation": -93
                            },
                            {
                                "lightness": 31
                            },
                            {
                                "visibility": "on"
                            }
                        ]
                    },
                    {
                        "featureType": "road.arterial",
                        "elementType": "labels",
                        "stylers": [
                            {
                                "hue": "#bbc0c4"
                            },
                            {
                                "saturation": -93
                            },
                            {
                                "lightness": -2
                            },
                            {
                                "visibility": "simplified"
                            }
                        ]
                    },
                    {
                        "featureType": "road.local",
                        "elementType": "geometry",
                        "stylers": [
                            {
                                "hue": "#e9ebed"
                            },
                            {
                                "saturation": -90
                            },
                            {
                                "lightness": -8
                            },
                            {
                                "visibility": "simplified"
                            }
                        ]
                    },
                    {
                        "featureType": "transit",
                        "elementType": "all",
                        "stylers": [
                            {
                                "hue": "#e9ebed"
                            },
                            {
                                "saturation": 10
                            },
                            {
                                "lightness": 69
                            },
                            {
                                "visibility": "on"
                            }
                        ]
                    },
                    {
                        "featureType": "water",
                        "elementType": "all",
                        "stylers": [
                            {
                                "hue": "#e9ebed"
                            },
                            {
                                "saturation": -78
                            },
                            {
                                "lightness": 67
                            },
                            {
                                "visibility": "simplified"
                            }
                        ]
                    }
                ]

                o.googleMap({
                    styles: styleArray,
                });
            }
        });
    }
})
(jQuery);

(function ($) {
    var o = document.getElementById("google-map2");
    if (o) {
        include('//maps.google.com/maps/api/js?sensor=false');
        include('js/jquery.rd-google-map.js');

        $(document).ready(function () {
            var o = $('#google-map2');
            if (o.length  0) {
                var styleArray = [
                    {
                        "featureType": "administrative.locality",
                        "elementType": "all",
                        "stylers": [
                            {
                                "hue": "#2c2e33"
                            },
                            {
                                "saturation": 7
                            },
                            {
                                "lightness": 19
                            },
                            {
                                "visibility": "on"
                            }
                        ]
                    },
                    {
                        "featureType": "landscape",
                        "elementType": "all",
                        "stylers": [
                            {
                                "hue": "#ffffff"
                            },
                            {
                                "saturation": -100
                            },
                            {
                                "lightness": 100
                            },
                            {
                                "visibility": "simplified"
                            }
                        ]
                    },
                    {
                        "featureType": "poi",
                        "elementType": "all",
                        "stylers": [
                            {
                                "hue": "#ffffff"
                            },
                            {
                                "saturation": -100
                            },
                            {
                                "lightness": 100
                            },
                            {
                                "visibility": "off"
                            }
                        ]
                    },
                    {
                        "featureType": "road",
                        "elementType": "geometry",
                        "stylers": [
                            {
                                "hue": "#bbc0c4"
                            },
                            {
                                "saturation": -93
                            },
                            {
                                "lightness": 31
                            },
                            {
                                "visibility": "simplified"
                            }
                        ]
                    },
                    {
                        "featureType": "road",
                        "elementType": "labels",
                        "stylers": [
                            {
                                "hue": "#bbc0c4"
                            },
                            {
                                "saturation": -93
                            },
                            {
                                "lightness": 31
                            },
                            {
                                "visibility": "on"
                            }
                        ]
                    },
                    {
                        "featureType": "road.arterial",
                        "elementType": "labels",
                        "stylers": [
                            {
                                "hue": "#bbc0c4"
                            },
                            {
                                "saturation": -93
                            },
                            {
                                "lightness": -2
                            },
                            {
                                "visibility": "simplified"
                            }
                        ]
                    },
                    {
                        "featureType": "road.local",
                        "elementType": "geometry",
                        "stylers": [
                            {
                                "hue": "#e9ebed"
                            },
                            {
                                "saturation": -90
                            },
                            {
                                "lightness": -8
                            },
                            {
                                "visibility": "simplified"
                            }
                        ]
                    },
                    {
                        "featureType": "transit",
                        "elementType": "all",
                        "stylers": [
                            {
                                "hue": "#e9ebed"
                            },
                            {
                                "saturation": 10
                            },
                            {
                                "lightness": 69
                            },
                            {
                                "visibility": "on"
                            }
                        ]
                    },
                    {
                        "featureType": "water",
                        "elementType": "all",
                        "stylers": [
                            {
                                "hue": "#e9ebed"
                            },
                            {
                                "saturation": -78
                            },
                            {
                                "lightness": 67
                            },
                            {
                                "visibility": "simplified"
                            }
                        ]
                    }
                ]

                o.googleMap({
                    styles: styleArray,
                });
            }
        });
    }
})
(jQuery);

/* WOW
 ========================================================*/
;
(function ($) {
    var o = $('html');

    if ((navigator.userAgent.toLowerCase().indexOf('msie') == -1 ) || (isIE()  isIE()  9)) {
        if (o.hasClass('desktop')) {
            include('js/wow.js');

            $(document).ready(function () {
                new WOW().init();
            });
        }
    }
})(jQuery);

/* Contact Form
 ========================================================*/
;
(function ($) {
    var o = $('#contact-form');
    if (o.length  0) {
        include('js/modal.js');
        include('js/TMForm.js'); 

        if($('#contact-form .recaptcha').length  0){
            include('../www.google.com/recaptcha/api/js/recaptcha_ajax.js');
        }
    }
})(jQuery);

/* Search.js
 ========================================================*/
;
(function ($) {
    include('js/TMSearch.js');
})(jQuery);

/* Orientation tablet fix
 ========================================================*/
$(function () {
    // IPad/IPhone
    var viewportmeta = document.querySelector  document.querySelector('meta[name="viewport"]'),
        ua = navigator.userAgent,

        gestureStart = function () {
            viewportmeta.content = "width=device-width, minimum-scale=0.25, maximum-scale=1.6, initial-scale=1.0";
        },

        scaleFix = function () {
            if (viewportmeta  /iPhone|iPad/.test(ua)  !/Opera Mini/.test(ua)) {
                viewportmeta.content = "width=device-width, minimum-scale=1.0, maximum-scale=1.0";
                document.addEventListener("gesturestart", gestureStart, false);
            }
        };

    scaleFix();
    // Menu Android
    if (window.orientation != undefined) {
        var regM = /ipod|ipad|iphone/gi,
            result = ua.match(regM);
        if (!result) {
            $('.sf-menus li').each(function () {
                if ($("ul", this)[0]) {
                    $("a", this).toggle(
                        function () {
                            return false;
                        },
                        function () {
                            window.location.href = $(this).attr("href");
                        }
                    );
                }
            })
        }
    }
});
var ua = navigator.userAgent.toLocaleLowerCase(),
    regV = /ipod|ipad|iphone/gi,
    result = ua.match(regV),
    userScale = "";
if (!result) {
    userScale = ",user-scalable=0"
}
document.write('meta name="viewport" content="width=device-width,initial-scale=1.0' + userScale + '"');

i tried many methods. how should i include this to work in a wordpress in proper way?

Topic php jquery Wordpress javascript

Category Web

1
answered at

This is not a WP problem, this function is your problem, and the cause of a great many other problems you're unaware of:

function include(scriptUrl) {
    document.write('<script src="' + scriptUrl + '"></script>');
}

....

include('js/jquery.cookie.js');

This is bad practice, and error prone:

  • Every time this happens, all rendering is paused while the browser fetches the remote script
  • The browser is unable to preload the script to improve performance

But more importantly, the function expects a full URL, yet you're passing in relative URLs. This means every time you change page, the URLs the browser tries to load change too,

e.g. for js/jquery.cookie.js

  • On the homepage example.com/js/jquery.cookie.js
  • On /about it'll try to load example.com/about/js/jquery.cookie.js
  • On /test it'll try to load example.com/test/js/jquery.cookie.js
  • etc...

So absolute URLs need to be passed. But worse yet, there are performance issues, so instead of using the include function, do one of the following options:

  • Register and enqueue all the libraries, if you have to selectively enqueue them, do the checks in PHP, not JS
  • Bundle them all
  • Use a modern JS toolchain and transpile them into a bundle using Babel and Webpack, this will let you use ES6 syntax and the require function

Again, this is not a WP problem, this is an issue with the original code that was always there, but now shows up because you moved the file into a different location on the server relative to the root

Additionally, you should look into your browsers developer tools. The JS console will be throwing 404 errors for all of those include calls saying the browser could not find the JS file, and the full URL it tried to find it at

1
answered at

Open console ( right click -> inspect - Console ) and read what is the error, you probably didn't enqueue jQuery

You should enqueue scripts from functions.php ( best practice )

function theme_scripts() {

  wp_enqueue_script( 'jquery' );
  wp_enqueue_script( 'script', get_template_directory_uri() . '/script.js', array(), false, true );

}
add_action( 'wp_enqueue_scripts', 'theme_scripts' );

About

Geeks Mental is a community that publishes articles and tutorials about Web, Android, Data Science, new techniques and Linux security.