WordPress.org

Ready to get started?Download WordPress

Forums

Move js jquery to external file child theme (4 posts)

  1. tangobango
    Member
    Posted 1 year ago #

    Hi. I'm new to theme development and I having a very basic problem. I've been searching for nearly two days and none of the solutions I've tried worked.

    My problem has to do with hardcoded vs enqueued scripts and internal vs external scripts.

    1. If I hardcode external scripts into the header my external scripts run.

    2. If I enqueue the scripts, they appear to load but they won't run as external scripts; one will run if I copy it to header.php; the other won't run even then.

    This works:

    Header.php of
    `<script type="text/javascript" src="<?php echo get_stylesheet_directory_uri(); ?>/js/jquery-1.8.3.js"></script>
    <script type="text/javascript" src="<?php echo get_stylesheet_directory_uri(); ?>/js/menu.js" ></script>
    <script type="text/javascript" src="<?php echo get_stylesheet_directory_uri(); ?>/js/jquery.kwicks.js"></script>

    <script type='text/javascript'>
    $(document).ready(function() {

    var $slideshow = $('.kwicks').kwicks({
    size: 165,
    minSize : 20,
    spacing : 5
    });

    var numSlides = $slideshow.children().length,
    speed = 2000,
    curSlide = 0;

    setInterval(function() {
    $slideshow.kwicks('expand', ++curSlide % numSlides);
    }, speed);

    });
    </script>

    The external script in /js/menu.js is
    function mainmenu(){
    $(" #main_menu ul ").css({display: "none"}); // Opera Fix
    $(" #main_menu li").hover(function(){
    $(this).find('ul:first').css({visibility: "visible",display: "none"}).show(400);
    },function(){
    $(this).find('ul:first').css({visibility: "hidden"});
    });
    }

    function mainmenuWP(){
    $(" #menu-mainmenu ul ").css({display: "none"}); // Opera Fix
    $(" #menu-mainmenu li").hover(function(){
    $(this).find('ul:first').css({visibility: "visible",display: "none"}).show(400);
    },function(){
    $(this).find('ul:first').css({visibility: "hidden"});
    });
    }

    $(document).ready(function(){
    alert("menu");
    mainmenu();
    mainmenuWP();
    });

    I get source of
    <!DOCTYPE html>

    <head>
    <meta content="text/html; charset=utf-8" http-equiv="Content-Type" >
    <title>Metric/Conside Test</title>
    <link href='http://fonts.googleapis.com/css?family=Raleway:400,800' rel='stylesheet' type='text/css' media="screen">
    <script type="text/javascript" src="http://localhost/themebuilder/wp-content/themes/conside/js/jquery-1.8.3.js"></script>
    <script type="text/javascript" src="http://localhost/themebuilder/wp-content/themes/conside/js/menu.js" ></script>
    <script type="text/javascript" src="http://localhost/themebuilder/wp-content/themes/conside/js/jquery.kwicks.js"></script>`

    If I enqueue the scripts like this in functions.php

    <?php
    function load_my_scripts() {
            wp_deregister_script( 'jquery' );
            wp_register_script('jquery', '//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js');
            wp_enqueue_script('jquery');
            wp_register_script('menu', get_stylesheet_directory_uri().'/js/menu.js', array('jquery') );
            wp_enqueue_script('menu');
            wp_register_script('kwicks', get_stylesheet_directory_uri().'/js/jquery.kwicks.js', array('jquery') );
            wp_enqueue_script('kwicks');
            wp_register_script('equalheights', get_stylesheet_directory_uri().'/js/jquery.equalheights.js', array('jquery') );
            wp_enqueue_script('equalheights');
    }  
    
    add_action('wp_enqueue_scripts', 'load_my_scripts');

    I get source of `<!DOCTYPE html>

    <head>
    <meta content="text/html; charset=utf-8" http-equiv="Content-Type" >
    <title>Metric/Conside Test</title>
    <link href='http://fonts.googleapis.com/css?family=Raleway:400,800' rel='stylesheet' type='text/css' media="screen">
    <!--<script type="text/javascript" src="http://localhost/themebuilder/wp-content/themes/conside/js/jquery-1.8.3.js"></script>
    <script type="text/javascript" src="http://localhost/themebuilder/wp-content/themes/conside/js/menu.js" ></script>
    <script type="text/javascript" src="http://localhost/themebuilder/wp-content/themes/conside/js/jquery.kwicks.js"></script>
    -->
    <meta name='robots' content='noindex,nofollow' />
    <script type="text/javascript">
    //<![CDATA[
    var ajaxurl = 'http://localhost/themebuilder/wp-admin/admin-ajax.php';
    //]]>
    </script>
    <link rel="alternate" type="application/rss+xml" title="ThemeBuilder test site with a long name » Feed" href="http://localhost/themebuilder/feed/" />
    <link rel="alternate" type="application/rss+xml" title="ThemeBuilder test site with a long name » Comments Feed" href="http://localhost/themebuilder/comments/feed/" />
    <link rel="alternate" type="application/rss+xml" title="ThemeBuilder test site with a long name » Custom Homepage Comments Feed" href="http://localhost/themebuilder/custom-homepage/feed/" />
    <link rel='stylesheet' id='admin-bar-css' href='http://localhost/themebuilder/wp-includes/css/admin-bar.css?ver=3.4.2' type='text/css' media='all' />
    <link rel='stylesheet' id='debug-bar-css' href='http://localhost/themebuilder/wp-content/plugins/debug-bar/css/debug-bar.css?ver=20111209' type='text/css' media='all' />
    <link rel='stylesheet' id='style-css' href='http://localhost/themebuilder/wp-content/themes/conside/style.css?ver=3.4.2' type='text/css' media='all' />
    <link rel='stylesheet' id='zt-debug-bar-cron-css' href='http://localhost/themebuilder/wp-content/plugins/debug-bar-cron/css/debug-bar-cron.css?ver=20120325' type='text/css' media='all' />
    <script type='text/javascript' src='http://localhost/themebuilder//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js?ver=3.4.2'></script>
    <script type='text/javascript' src='http://localhost/themebuilder/wp-content/themes/conside/js/menu.js?ver=3.4.2'></script>
    <script type='text/javascript' src='http://localhost/themebuilder/wp-content/themes/conside/js/jquery.kwicks.js?ver=3.4.2'></script>
    <script type='text/javascript' src='http://localhost/themebuilder/wp-content/themes/conside/js/jquery.equalheights.js?ver=3.4.2'></script>
    <script type='text/javascript' src='http://localhost/themebuilder/wp-includes/js/comment-reply.js?ver=3.4.2'></script>`

    But the jquery no longer works for the included script shown above or for the script in menu.js.

    The two source files look the same to me in the files they load from /conside/js (the child theme is "conside".

    This mostly a learning exercise for me so complete explanations would be very helpful.

    Many thanks.

  2. tangobango
    Member
    Posted 1 year ago #

    Sorry for the mess of code. I must have made backtick errors. Should I repost?

  3. Andrew Nevins
    Barrel Rider, Spam Zapper & Volunteer Moderator
    Posted 1 year ago #

    Remove it and instead post it in PasteBin and then send us a link to that PasteBin page.

  4. tangobango
    Member
    Posted 1 year ago #

    Ok, I may not be doing this right via Pastebin, but here goes:

    Paste 1 is header that works.
    Paste 2 is enqueue that doesn't work but shows correct source.
    Paste 3 is sample of external js that won't run.(menu.js)

    http://pastebin.com/Mqy6ALdW
    Thanks.

Topic Closed

This topic has been closed to new replies.

About this Topic