[javascript] Uncaught ReferenceError: jQuery is not defined

I have implemented some JavaScript on my site but I keep getting the following error messages:

Uncaught ReferenceError: jQuery is not defined

and

Uncaught SyntaxError: Unexpected token <

This is the JavaScript that I am using in the header.php:

    <script type="text/javascript" src="/test/wp-content/themes/child/script/jquery.jcarousel.min.js"></script>
    <script type="text/javascript" src="/test/wp-content/themes/child/script/jquery.scrollTo.js"></script>
    <script type="text/javascript" src="/test/wp-content/themes/child/script/jquery.backgroundPosition.js"></script>
    <script type="text/javascript" src="/test/wp-content/themes/child/script/scripts.js"></script>
    <script type="text/javascript" src="/test/wp-content/themes/child/script/jquery.cycle.lite.js"></script>
    <script type="text/javascript" src="/test/wp-content/themes/child/script/jquery.accordian.js"></script>

    <script type="text/javascript">
        jQuery(document).ready(function () {
            jQuery('#contentGallery').cycle({
                fx: 'fade' // choose your transition type, ex: fade, scrollUp, shuffle, etc...
            });
        });
    </script>
</head>

<body <?php body_class(); ?>>
<div id="page" class="hfeed">
    <header id="branding" role="banner">
            <hgroup>
                <h1 id="site-title"><span><a href="<?php echo esc_url( home_url( '/' ) ); ?>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a></span></h1>
                <h2 id="site-description"><?php bloginfo( 'description' ); ?></h2>
            </hgroup>

            <?php
                // Check to see if the header image has been removed
                $header_image = get_header_image();
                if ( ! empty( $header_image ) ) :
            ?>
            <a href="<?php echo esc_url( home_url( '/' ) ); ?>">
                <?php
                    // The header image
                    // Check if this is a post or page, if it has a thumbnail, and if it's a big one
                    if ( is_singular() &&
                            has_post_thumbnail( $post->ID ) &&
                            ( /* $src, $width, $height */ $image = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), array( HEADER_IMAGE_WIDTH, HEADER_IMAGE_WIDTH ) ) ) &&
                            $image[1] >= HEADER_IMAGE_WIDTH ) :
                        // Houston, we have a new header image!
                        echo get_the_post_thumbnail( $post->ID, 'post-thumbnail' );
                    else : ?>
                    <img src="<?php header_image(); ?>" width="<?php echo HEADER_IMAGE_WIDTH; ?>" height="<?php echo HEADER_IMAGE_HEIGHT; ?>" alt="" />
                <?php endif; // end check for featured image or standard header ?>
            </a>
            <?php endif; // end check for removed header image ?>

            <nav id="access" role="navigation">

<div id="nav">
            <ul>
                <li class="end"><a href="#contact" id="navContact" class="goto_contact"></a></li>
                <li><a href="#context" id="navContext" class="goto_context"></a></li>
                <li><a href="#artScience" id="navArtScience" class="goto_artScience"></a></li>
                <li><a href="#home" id="navHome" class="goto_home"></a></li>
            </ul>
            <div class="clear">
            </div>
        </div>
        <div id="navPointer">
            <div id="controlContainer">
                <div id="pointer">
                </div>
            </div>
        </div>
    </div>
    <div id="contentHolder">
        <div id="contentGallery">
            <img src="Images/Gallery/london.jpg" width="1200" height="550" alt="London" />
            <img src="Images/Gallery/singapore.jpg" style="display: none;" width="1200" height="550"
                alt="Singapore" />
            <img src="Images/Gallery/geneva.jpg" style="display: none;" width="1200" height="550"
                alt="Geneva" />
        </div>
        <div id="contentShadow">
        </div>
        <div id="content">
            <div id="contentScroller">
                <div id="home" class="page">
                    <div class="homeContent">
                        <span class="homeHeaderText">GMR</span>
                        <div class="clear">
                        </div>
                        <div class="homePageText">
                            <p> very long text 1
                            </p>
                        </div>
                    </div>
                </div>
                <div id="artScience" class="page">
                    <div class="pageContent">
                        <div id="artSciencePage">
                            <span class="headerText">About Us</span>
                            <div class="pageText">
                                <p>
                                    Insert text here. 
                                </p>
                            </div>
                            <table border="0" cellpadding="0" cellspacing="0" class="linkTable">
                                <tr>
                                    <td valign="middle" height="100%">
                                        <a href="#" id="theArtLnk" class="largeArrow">The Art</a>
                                    </td>
                                    <td valign="middle" height="100%">
                                        <a href="#" id="theScienceLnk" class="largeArrow">The Science</a>
                                    </td>
                                </tr>
                            </table>
                        </div>
                        <div id="theArtPage" class="closed">
                            <span class="headerText">The Art</span>
                            <div class="pageText">
                                <a href="#" class="acc_trigger">Sensitivity</a>
                                <div class="acc_container">
                                    <p>very long text 2</p>
                                </div>
                                <div class="seperator">
                                </div>
                                <a href="#" class="acc_trigger">Creativity</a>
                                <div class="acc_container">
                                    <p>very long text 3</p>
                                </div>
                                <div class="seperator">
                                </div>
                                <a href="#" class="acc_trigger">Intuition</a>
                                <div class="acc_container">
                                    <p>very long text 4</p>
                                </div>
                                <div class="seperator">
                                </div>
                                <a href="#" class="acc_trigger">Judgment</a>
                                <div class="acc_container">
                                    <p>very long text 5</p>
                                </div>
                            </div>
                            <a href="#" id="artToScienceLnk" class="largeArrow">The Science</a>
                        </div>
                        <div id="theSciencePage" class="closed">
                            <span class="headerText">The Science</span>
                            <div class="pageText">
                                <a href="#" class="acc_trigger_2">Methodology</a>
                                <div class="acc_container_2">
                                    <p>very long text 6</p>
                                </div>
                                <div class="seperator">
                                </div>
                                <a href="#" class="acc_trigger_2">Research</a>
                                <div class="acc_container_2">
                                    <p>very long text 7</p>
                                </div>
                                <div class="seperator">
                                </div>
                                <a href="#" class="acc_trigger_2">Team Approach</a>
                                <div class="acc_container_2">
                                    <p>very long text 8</p>
                                </div>
                                <div class="seperator">
                                </div>
                                <a href="#" class="acc_trigger_2">Sharing Information</a>
                                <div class="acc_container_2">
                                    <p>very long text 9</p>
                                </div>
                            </div>
                            <a href="#" id="scienceToArtLnk" class="largeArrow">The Art</a>
                        </div>
                    </div>
                </div>
                <div id="context" class="page">
                    <div class="pageContent">
                        <span class="headerText">Expertise</span>
                        <div class="pageText">
                            <a class="acc_trigger_3" href="#">Expertise</a>
                            <div class="acc_container">
                                <p>very long text 10</p>
                            </div>
                            <div class="seperator">
                            </div>
                            <a class="acc_trigger_3" href="#">Business Context</a>
                            <div class="acc_container">
                                <p>very long text 11</p>
                            </div>
                            <div class="seperator">
                            </div>
                            <a class="acc_trigger_3" href="#">Cultural Context</a>
                            <div class="acc_container">
                                <p>very long text 12</p>
                            </div>
                            <div class="seperator">
                            </div>
                            <a class="acc_trigger_3" href="#">Candidate Context</a>
                            <div class="acc_container">
                                <p>very long text 13</p>
                            </div>
                            <div class="seperator">
                            </div>
                            <a class="acc_trigger_3" href="#">Financial Context</a>
                            <div class="acc_container">
                                <p>very long text 14</p>
                            </div>
                            <div class="seperator">
                            </div>
                            <a class="acc_trigger_3" href="#">Service Context </a>
                            <div class="acc_container">
                                <p>very long text 15</p>
                            </div>
                        </div>
                    </div>
                </div>
                <div id="contact" class="page">
                    <div class="pageContent">
                        <span class="headerText">Contact</span>
                        <div class="pageText">
                            <h2>
                                Tel: +44(0)1234 567 890</h2>
                            <h3>
                                Email: <a href="mailto:info@info">info@info</a></h3>
                        </div>
                    </div>
                </div>
            </div>
        </div>

                <h3 class="assistive-text"><?php _e( 'Main menu', 'twentyeleven' ); ?></h3>
                <?php /*  Allow screen readers / text browsers to skip the navigation menu and get right to the good stuff. */ ?>
                <div class="skip-link"><a class="assistive-text" href="#content" title="<?php esc_attr_e( 'Skip to primary content', 'twentyeleven' ); ?>"><?php _e( 'Skip to primary content', 'twentyeleven' ); ?></a></div>
                <div class="skip-link"><a class="assistive-text" href="#secondary" title="<?php esc_attr_e( 'Skip to secondary content', 'twentyeleven' ); ?>"><?php _e( 'Skip to secondary content', 'twentyeleven' ); ?></a></div>
                <?php /* Our navigation menu.  If one isn't filled out, wp_nav_menu falls back to wp_page_menu. The menu assiged to the primary position is the one used. If none is assigned, the menu with the lowest ID is used. */ ?>

            </nav><!-- #access -->
    </header><!-- #branding -->

This is the code I am using in the footer.php:

<div id="footerNav">
    <ul>
        <li class="start"><a href="#home" class="goto_home">Home</a></li>
        <li><a href="#artScience" class="goto_artScience">About Us</a></li>
        <li><a href="#context" class="goto_context">Approach</a></li>
        <li><a href="#contact" class="goto_contact">Expertise</a></li>
    </ul>
</div>

This question is related to javascript jquery

The answer is


jQuery needs to be the first script you import. The first script on your page

<script type="text/javascript" src="/test/wp-content/themes/child/script/jquery.jcarousel.min.js"></script>

appears to be a jQuery plugin, which is likely generating an error since jQuery hasn't been loaded on the page yet.


For one, you don't seem to be including jQuery itself in the header but only a bunch of plugins. As for the '<' error, it's impossible to tell without seeing the generated HTML.


you need to put it after wp_head(); Because that loads your jQuery and you need to load jQuery first and then your js


set this jquery min js

script src="http://code.jquery.com/jquery-1.10.1.min.js"

in wp-admin/admin-header.php


In my case, the error occurred because I was using the wrong version of jquery.

<script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>

I changed it to:

<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>