Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

WordPress

Gabriel Ward
Gabriel Ward
20,222 Points
Posted by Gabriel Ward
Gabriel Ward
20,222 Points

Including jQuery in Wordpress

I'm trying to include a hamburger icon that transforms to an 'x' when clicked intp a Wordpress Child theme. I've tried every method I can think of but no luck so far, including enqueueing the script in functions.php. I'm not exactly sure how to do this though.

Even just including the jQuery in script tags in the header isn't working. It all functions fine in a static webpage setting. It's just incorporating it into the theme is where the trouble is occurring. Here's my code, I've included the markup for the hamburger icon at the top of the body in the HTML. Any help would be greatly appreciated :)

header.php

<html <?php language_attributes(); ?>>
<head>
    <title><?php wp_title(''); ?><?php if(wp_title('', false)) { echo ' |'; } ?> <?php bloginfo('name'); ?></title>
    <meta http-equiv="Content-Type" content="<?php bloginfo('html_type'); ?>; charset=<?php bloginfo('charset'); ?>" />
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <script src="http://code.jquery.com/jquery-1.10.2.min.js"></script> 
<script src="../js/app.js"></script>
    <?php wp_head(); ?>   
</head>

<!-- Begin Body -->
<body <?php body_class(); ?>>

<?php att_hook_site_before(); ?>


  <div id="nav-icon1">
  <span></span>
  <span></span>
  <span></span>
</div>


<div id="topbar-wrap">
    <nav id="topbar" class="container row clr">    
        <div id="navigation" class="span_8 col clr">    
            <?php
            // Main navigation location
            wp_nav_menu( array( 'theme_location' => 'top_menu', 'menu_class' => 'dropdown-menu', 'fallback_cb' => false, 'walker' => new ATT_Dropdown_Walker_Nav_Menu() ) ); ?>
        </div><!-- #navigation -->
        <div class="span_4 col clr">
            <?php
            // Show social icons - see functions/social.php
            if( att_option('social','1') == '1' && function_exists('att_display_social') ) {
                att_display_social();
            } ?>   
        </div>             
    </nav><!-- #topbar -->
</div><!-- #topbar-wrap -->




``` jquery
$(document).ready(function(){
    $('#nav-icon1').click(function(){
        $(this).toggleClass('open');
    });
});

1 Answer

Rich Bagley
Rich Bagley
25,869 Points

Hi Gabriel,

Instead of linking to this directly in the head you will need to enqueue your script and make it dependent on the built-in jQuery.

Zac also goes over this in this video

If you'd prefer to use your own version of jQuery you can also do that. CSS Tricks has a post on this.

Hope that helps.

-Rich

Gabriel Ward
Gabriel Ward
20,222 Points
Gabriel Ward
Gabriel Ward
20,222 Points

Hi Rich,

Thanks for your time. So I've copied and pasted this into my functions.php, being sure to change the uri to the relevant path in my theme folders. However still no luck. I can work out most things I try to solve when it comes to this kind of thing. But for some reason Wordpress themes, jQuery, and I just don't don't get along, it seems.

function my_scripts_method() {
    wp_enqueue_script(
        'custom-script',
        get_stylesheet_directory_uri() . '/js/app.js',
        array( 'jquery' )
    );
}

add_action( 'wp_enqueue_scripts', 'my_scripts_method' );

Zac's video confused me slightly because he's got foundation.min.js in there which is dependent on his app.js and vice versa?

Gabriel Ward
Gabriel Ward
20,222 Points
Gabriel Ward
Gabriel Ward
20,222 Points

Wow awesome, so I just figured it out. Thanks for your help Rich, I really appreciate it.

Rich Bagley
Rich Bagley
25,869 Points

Hi Gabriel,

No problem. Glad you managed to sort it :)

-Rich