First off I know there are tons of other "jQuery is not defined" threads and I have gone through them all and can't seem to find a solution. Trying to add jQuery functionality to a custom made theme nav and I cannot seem to get around this problem. Code is working fine in jsfiddle https://jsfiddle.net/TonyTheOnly/h7xwcb8h/
But when I try to attempt this in my wordpress theme i get the error "jQuery is not defined"
Header
</head>
<body <?php body_class( $awesome_classes ); ?>>
<div class="topBar">
<img src="<?php header_image();?>" height="120px;" width="100px;" alt=""/ class="siteLogo">
<div class="topBarMiddle">
<p>español | ENGLISH</p>
</div>
<div class="topBarRight">
<nav>
<a class="burger-nav"></a>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
</div>
</div>
functions
<?php
function paramo_script_enqueue() {
wp_enqueue_style('customstyle', get_template_directory_uri() . '/css/paramo.css', array(), '1.0.0', 'all');
wp_enqueue_script('customjs', get_template_directory_uri() . '/js/paramo.js', array('jQuery'), '1.0.0', true);
}
add_action('wp_enqueue_scripts', 'paramo_script_enqueue');
function paramo_theme_setup() {
add_theme_support('menus');
register_nav_menu('primary', 'Primary Header Navigation');
register_nav_menu('secondary', 'Footer Navigation');
}
add_action('init', 'paramo_theme_setup');
add_theme_support('custom-header');
jQuery
/*global $, jQuery, alert*/
jQuery(function () {
"use strict";
$(".burger-nav").on("click", function () {
$("nav ul").toggleClass("open");
});
});
Any help is greatly appreciated and thank you for your time!
$is undefined, it should bejQuery( "nav ul")not$( "nav ul" ). You've also setup your initial function incorrectly, look intojQuery(document).readyjQuery(document).ready(function($) { // $ Works! You can test it with next line if you like // console.log($); });