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 trialGabriel Ward
20,222 PointsIncluding 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
25,869 PointsHi 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
20,222 PointsGabriel Ward
20,222 PointsHi 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.
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
20,222 PointsGabriel Ward
20,222 PointsWow awesome, so I just figured it out. Thanks for your help Rich, I really appreciate it.
Rich Bagley
25,869 PointsRich Bagley
25,869 PointsHi Gabriel,
No problem. Glad you managed to sort it :)
-Rich