• Resolved steve1953

    (@steve1953)


    I am failrly new to this and am in the middle of converting a static html website to wordpress. Most things seem to be going okay except for the javascript. There are owl-carousel and a magnific slider plugins that are not working and the same with the hover on the drop-down menu items.

    I am using this to enqueue the javascript on the functions page.

    <?php
    
    function load_stylesheets()
    {
        
        wp_register_style('bootstrap' , get_template_directory_uri() . '/bootstrap/css/bootstrap.css', array(), 1, 'all');
        wp_enqueue_style('bootstrap');
        
        wp_register_style('fontawesome' , get_template_directory_uri() . '/fonts/font-awesome/css/font-awesome.css', array(), 1, 'all');
        wp_enqueue_style('fontawesome');
        
        wp_register_style('fontello' , get_template_directory_uri() . '/fonts/fontello/css/fontello.css', array(), 1, 'all');
        wp_enqueue_style('fontello');
        
        wp_register_style('magpopup' , get_template_directory_uri() . '/plugins/magnific-popup/magnific-popup.css', array(), 1, 'all');
        wp_enqueue_style('magpopup');
        
        wp_register_style('settings' , get_template_directory_uri() . '/plugins/rs-plugin/css/settings.css', array(), 1, 'all');
        wp_enqueue_style('settings');
        
        wp_register_style('animations' , get_template_directory_uri() . '/css/animations.css', array(), 1, 'all');
        wp_enqueue_style('animations');
        
        wp_register_style('owlcarousel' , get_template_directory_uri() . '/plugins/owl-carousel/owl.carousel.css', array(), 1, 'all');
        wp_enqueue_style('owlcarousel');
        
        wp_register_style('owltransitions' , get_template_directory_uri() . '/plugins/owl-carousel/owl.transitions.css', array(), 1, 'all');
        wp_enqueue_style('owltransitions');
        
        wp_register_style('hover' , get_template_directory_uri() . '/plugins/hover/hover-min.css', array(), 1, 'all');
        wp_enqueue_style('hover');
        
        wp_register_style('footer' , get_template_directory_uri() . '/css/footer-v1.css', array(), 1, 'all');
        wp_enqueue_style('footer');
        
        wp_register_style('header' , get_template_directory_uri() . '/css/header-v6.css', array(), 1, 'all');
        wp_enqueue_style('header');
        
        wp_register_style('style' , get_template_directory_uri() . '/css/style.css', array(), 1, 'all');
        wp_enqueue_style('style');
        
        wp_register_style('brown' , get_template_directory_uri() . '/css/skins/brown.css', array(), 1, 'all');
        wp_enqueue_style('brown');
        
        wp_register_style('custom' , get_template_directory_uri() . '/css/custom.css', array(), 1, 'all');
        wp_enqueue_style('custom');
        
        
        
    }
    
    add_action('wp_enqueue_scripts', 'load_stylesheets');
    
    //load scripts
    
    function addjs()
    {
    
        wp_enqueue_script('jQuery');
        
        wp_register_script('bootstrap', get_template_directory_uri() . '/bootstrap/js/bootstrap.min.js', array(), 1, 1, 1);
        wp_enqueue_script('bootstrap');
        
         wp_register_script('template', get_template_directory_uri() . '/plugins/template.js', array(), 1, 1, 1);
        wp_enqueue_script('template');
        
        wp_register_script('modernizr', get_template_directory_uri() . '/plugins/modernizr.js', array(), 1, 1, 1);
        wp_enqueue_script('modernizr');
        
        wp_register_script('themepunch', get_template_directory_uri() . '/plugins/rs-plugin/js/jquery.themepunch.tools.min.js', array(), 1, 1, 1);
        wp_enqueue_script('themepunch');
        
        wp_register_script('revolution', get_template_directory_uri() . '/plugins/rs-plugin/js/jquery.themepunch.revolution.min.js', array(), 1, 1, 1);
        wp_enqueue_script('revolution');
        
        wp_register_script('isotope', get_template_directory_uri() . '/plugins/isotope/isotope.pkgd.min.js', array(), 1, 1, 1);
        wp_enqueue_script('isotope');
        
        wp_register_script('magnific', get_template_directory_uri() . '/plugins/magnific-popup/jquery.magnific-popup.min.js', array(), 1, 1, 1);
        wp_enqueue_script('magnific');
        
        wp_register_script('paralax', get_template_directory_uri() . '/plugins/jquery.parallax-1.1.3.js', array(), 1, 1, 1);
        wp_enqueue_script('paralax');
        
        wp_register_script('validate', get_template_directory_uri() . '/plugins/jquery.validate.js', array(), 1, 1, 1);
        wp_enqueue_script('validate');
        
        wp_register_script('vide', get_template_directory_uri() . '/plugins/vide/jquery.vide.js', array(), 1, 1, 1);
        wp_enqueue_script('vide');
        
        wp_register_script('owlcarousel', get_template_directory_uri() . '/plugins/owl-carousel/owl.carousel.js', array(), 1, 1, 1);
        wp_enqueue_script('owlcarousel');
        
        wp_register_script('pace', get_template_directory_uri() . '/plugins/pace/pace.min.js', array(), 1, 1, 1);
        wp_enqueue_script('pace');
        
        wp_register_script('smoothscroll', get_template_directory_uri() . '/plugins/SmoothScroll.js', array(), 1, 1, 1);
        wp_enqueue_script('smoothscroll');
       
        
        
    }

    When the page is loaded and I look at the page source I see the css files loaded correctly but nothing showing the js files.

    Any help would be greatly appreciated.

    The page I need help with: [log in to see the link]

Viewing 3 replies - 1 through 3 (of 3 total)
  • @steve1953

    I notice right away that you are using some scripts that have dependencies, such as jQuery. You need to list these dependencies in your wp_register_script calls, they can’t just be empty arrays. You should start by sorting that out.

    Another thing is, your scripts aren’t being called at all. Personally, I’d just add every single line of wp_enqueue_s**** into your ‘load_stylesheets’ function. Your ‘addjs’ function isn’t even being called, so of course you’re seeing no JS.

    You don’t need to enqueue jQuery, WP already does this for you. You can dequeue theirs and enqueue another version if you’d like, but not usually necessary.

    This is what I’m suggesting, but I haven’t done the work you need to do listing dependencies:

    <?php
    
    function my_load_scripts_function() {
        
        wp_register_style('bootstrap' , get_template_directory_uri() . '/bootstrap/css/bootstrap.css', array(), 1, 'all');
        wp_enqueue_style('bootstrap');
        
        wp_register_style('fontawesome' , get_template_directory_uri() . '/fonts/font-awesome/css/font-awesome.css', array(), 1, 'all');
        wp_enqueue_style('fontawesome');
        
        wp_register_style('fontello' , get_template_directory_uri() . '/fonts/fontello/css/fontello.css', array(), 1, 'all');
        wp_enqueue_style('fontello');
        
        wp_register_style('magpopup' , get_template_directory_uri() . '/plugins/magnific-popup/magnific-popup.css', array(), 1, 'all');
        wp_enqueue_style('magpopup');
        
        wp_register_style('settings' , get_template_directory_uri() . '/plugins/rs-plugin/css/settings.css', array(), 1, 'all');
        wp_enqueue_style('settings');
        
        wp_register_style('animations' , get_template_directory_uri() . '/css/animations.css', array(), 1, 'all');
        wp_enqueue_style('animations');
        
        wp_register_style('owlcarousel' , get_template_directory_uri() . '/plugins/owl-carousel/owl.carousel.css', array(), 1, 'all');
        wp_enqueue_style('owlcarousel');
        
        wp_register_style('owltransitions' , get_template_directory_uri() . '/plugins/owl-carousel/owl.transitions.css', array(), 1, 'all');
        wp_enqueue_style('owltransitions');
        
        wp_register_style('hover' , get_template_directory_uri() . '/plugins/hover/hover-min.css', array(), 1, 'all');
        wp_enqueue_style('hover');
        
        wp_register_style('footer' , get_template_directory_uri() . '/css/footer-v1.css', array(), 1, 'all');
        wp_enqueue_style('footer');
        
        wp_register_style('header' , get_template_directory_uri() . '/css/header-v6.css', array(), 1, 'all');
        wp_enqueue_style('header');
        
        wp_register_style('style' , get_template_directory_uri() . '/css/style.css', array(), 1, 'all');
        wp_enqueue_style('style');
        
        wp_register_style('brown' , get_template_directory_uri() . '/css/skins/brown.css', array(), 1, 'all');
        wp_enqueue_style('brown');
        
        wp_register_style('custom' , get_template_directory_uri() . '/css/custom.css', array(), 1, 'all');
        wp_enqueue_style('custom');
        
        wp_register_script('bootstrap', get_template_directory_uri() . '/bootstrap/js/bootstrap.min.js', array(), 1, 1, 1);
        wp_enqueue_script('bootstrap');
        
         wp_register_script('template', get_template_directory_uri() . '/plugins/template.js', array(), 1, 1, 1);
        wp_enqueue_script('template');
        
        wp_register_script('modernizr', get_template_directory_uri() . '/plugins/modernizr.js', array(), 1, 1, 1);
        wp_enqueue_script('modernizr');
        
        wp_register_script('themepunch', get_template_directory_uri() . '/plugins/rs-plugin/js/jquery.themepunch.tools.min.js', array(), 1, 1, 1);
        wp_enqueue_script('themepunch');
        
        wp_register_script('revolution', get_template_directory_uri() . '/plugins/rs-plugin/js/jquery.themepunch.revolution.min.js', array(), 1, 1, 1);
        wp_enqueue_script('revolution');
        
        wp_register_script('isotope', get_template_directory_uri() . '/plugins/isotope/isotope.pkgd.min.js', array(), 1, 1, 1);
        wp_enqueue_script('isotope');
        
        wp_register_script('magnific', get_template_directory_uri() . '/plugins/magnific-popup/jquery.magnific-popup.min.js', array(), 1, 1, 1);
        wp_enqueue_script('magnific');
        
        wp_register_script('paralax', get_template_directory_uri() . '/plugins/jquery.parallax-1.1.3.js', array(), 1, 1, 1);
        wp_enqueue_script('paralax');
        
        wp_register_script('validate', get_template_directory_uri() . '/plugins/jquery.validate.js', array(), 1, 1, 1);
        wp_enqueue_script('validate');
        
        wp_register_script('vide', get_template_directory_uri() . '/plugins/vide/jquery.vide.js', array(), 1, 1, 1);
        wp_enqueue_script('vide');
        
        wp_register_script('owlcarousel', get_template_directory_uri() . '/plugins/owl-carousel/owl.carousel.js', array(), 1, 1, 1);
        wp_enqueue_script('owlcarousel');
        
        wp_register_script('pace', get_template_directory_uri() . '/plugins/pace/pace.min.js', array(), 1, 1, 1);
        wp_enqueue_script('pace');
        
        wp_register_script('smoothscroll', get_template_directory_uri() . '/plugins/SmoothScroll.js', array(), 1, 1, 1);
        wp_enqueue_script('smoothscroll');
         
    }
    
    add_action( 'wp_enqueue_scripts', 'my_load_scripts_function', 99 );
    • This reply was modified 6 years, 4 months ago by Little Package. Reason: added second paragraph
    • This reply was modified 6 years, 4 months ago by Little Package. Reason: remove second paragraph
    • This reply was modified 6 years, 4 months ago by Little Package.

    Ultimately, I have a lot of questions about what’s going on here, but I hope this gets you going. You should be able to get most this functionality using existing themes and plugins, instead of having to reinvent the wheel. The following is closer to what I suggest, but I still don’t know dependencies or your directory structure, so I can’t guarantee it’ll work as written. But it’s better.

    <?php
    
    function my_load_scripts_function() {
        
        wp_register_style('bootstrap' , get_template_directory_uri() . '/bootstrap/css/bootstrap.css', array() );
        wp_enqueue_style('bootstrap');
        
        wp_register_style('fontawesome' , get_template_directory_uri() . '/fonts/font-awesome/css/font-awesome.css', array() );
        wp_enqueue_style('fontawesome');
        
        wp_register_style('fontello' , get_template_directory_uri() . '/fonts/fontello/css/fontello.css', array() );
        wp_enqueue_style('fontello');
        
        wp_register_style('magpopup' , get_template_directory_uri() . '/plugins/magnific-popup/magnific-popup.css', array() );
        wp_enqueue_style('magpopup');
        
        wp_register_style('settings' , get_template_directory_uri() . '/plugins/rs-plugin/css/settings.css', array() );
        wp_enqueue_style('settings');
        
        wp_register_style('animations' , get_template_directory_uri() . '/css/animations.css', array() );
        wp_enqueue_style('animations');
        
        wp_register_style('owlcarousel' , get_template_directory_uri() . '/plugins/owl-carousel/owl.carousel.css', array() );
        wp_enqueue_style('owlcarousel');
        
        wp_register_style('owltransitions' , get_template_directory_uri() . '/plugins/owl-carousel/owl.transitions.css', array() );
        wp_enqueue_style('owltransitions');
        
        wp_register_style('hover' , get_template_directory_uri() . '/plugins/hover/hover-min.css', array() );
        wp_enqueue_style('hover');
        
        wp_register_style('footer' , get_template_directory_uri() . '/css/footer-v1.css', array() );
        wp_enqueue_style('footer');
        
        wp_register_style('header' , get_template_directory_uri() . '/css/header-v6.css', array() );
        wp_enqueue_style('header');
        
        wp_register_style('style' , get_template_directory_uri() . '/css/style.css', array() );
        wp_enqueue_style('style');
        
        wp_register_style('brown' , get_template_directory_uri() . '/css/skins/brown.css', array() );
        wp_enqueue_style('brown');
        
        wp_register_style('custom' , get_template_directory_uri() . '/css/custom.css', array() );
        wp_enqueue_style('custom');
        
        wp_register_script('bootstrap', get_template_directory_uri() . '/bootstrap/js/bootstrap.min.js', array() );
        wp_enqueue_script('bootstrap');
        
         wp_register_script('template', get_template_directory_uri() . '/plugins/template.js', array() );
        wp_enqueue_script('template');
        
        wp_register_script('modernizr', get_template_directory_uri() . '/plugins/modernizr.js', array() );
        wp_enqueue_script('modernizr');
        
        wp_register_script('themepunch', get_template_directory_uri() . '/plugins/rs-plugin/js/jquery.themepunch.tools.min.js', array( 'jquery' ) );
        wp_enqueue_script('themepunch');
        
        wp_register_script('revolution', get_template_directory_uri() . '/plugins/rs-plugin/js/jquery.themepunch.revolution.min.js', array( 'jquery' ) );
        wp_enqueue_script('revolution');
        
        wp_register_script('isotope', get_template_directory_uri() . '/plugins/isotope/isotope.pkgd.min.js', array() );
        wp_enqueue_script('isotope');
        
        wp_register_script('magnific', get_template_directory_uri() . '/plugins/magnific-popup/jquery.magnific-popup.min.js', array( 'jquery' ) );
        wp_enqueue_script('magnific');
        
        wp_register_script('paralax', get_template_directory_uri() . '/plugins/jquery.parallax-1.1.3.js', array( 'jquery' ) );
        wp_enqueue_script('paralax');
        
        wp_register_script('validate', get_template_directory_uri() . '/plugins/jquery.validate.js', array( 'jquery' ) );
        wp_enqueue_script('validate');
        
        wp_register_script('vide', get_template_directory_uri() . '/plugins/vide/jquery.vide.js', array( 'jquery' ) );
        wp_enqueue_script('vide');
        
        wp_register_script('owlcarousel', get_template_directory_uri() . '/plugins/owl-carousel/owl.carousel.js', array( 'jquery' ) );
        wp_enqueue_script('owlcarousel');
        
        wp_register_script('pace', get_template_directory_uri() . '/plugins/pace/pace.min.js', array() );
        wp_enqueue_script('pace');
        
        wp_register_script('smoothscroll', get_template_directory_uri() . '/plugins/SmoothScroll.js', array() );
        wp_enqueue_script('smoothscroll');
         
    }
    
    add_action( 'wp_enqueue_scripts', 'my_load_scripts_function', 99 );
    Thread Starter steve1953

    (@steve1953)

    @littlepackage Many thank for your help and suggestions. Yes it has made some improvement but I think you may be right about “reinventing the wheel” I will look for a theme that is very similar to what I have already. Thanks again!

Viewing 3 replies - 1 through 3 (of 3 total)

The topic ‘Javascript not working’ is closed to new replies.