I am stuck with a problem adding jQuery
to WordPress.
I feel that there is a problem with my code but if I run it normally it works.
$("#newark").click(function() {
$("#mencontoz").toggle();
});
#mencontoz{display:none;}
.column {
float: left;
width: 20%;
padding: 10px;
background-color: #E8EFEF;
height: 392px;
}
/* Style links inside the columns */
.column a {
float: none;
color: black;
padding: 16px;
text-decoration: none;
display: block;
text-align: left;
}
/* Add a background color on hover */
.column a:hover {
background-color: #ddd;
}
/* Clear floats after the columns */
.row:after {
content: "";
display: table;
clear: both;
}
.attopicons{direction:rtl;
padding-top:10px;
align-content:center;
margin-top:10px;
font-size:25px;}
.fa-shopping-basket:hover{ color:#E8EFEF;}
.fomo{
text-align:center;
box-sizing: border-box;
width: 20%;
border: solid #fff 4px;
padding: 5px;
margin-left:40%;
margin-top:2%;
color:#fff; }
.fomo:hover{background-color:#E8EFEF;
color:#000;}
.chevron::before {
border-style: solid;
border-width: 0.25em 0.25em 0 0;
content: '';
display: inline-block;
height: 0.90em;
left: 0.30em;
position: relative;
top: 0.30em;
transform: rotate(-45deg);
vertical-align: top;
width: 0.90em;
color:#fff;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="newark">
Shop
</div>
<div id="mencontoz" class="drobdown-content">
<div class="row">
<div class="column">
<h3>Category 1</h3>
<a href="#">Link 1</a>
<a href="#">Link 2</a>
<a href="#">Link 3</a>
<a href="#">Link 4</a>
<a href="#">Link 6</a>
</div>
<div class="column">
<h3>Category 2</h3>
<a href="#">Link 1</a>
<a href="#">Link 2</a>
<a href="#">Link 3</a>
<a href="#">Link 4</a>
<a href="#">Link 5</a>
</div>
<div class="column">
<h3>Category 3</h3>
<a href="#">Link 1</a>
<a href="#">Link 2</a>
<a href="#">Link 3</a>
<a href="#">Link 4</a>
<a href="#">Link 5</a>
</div>
<div class="column">
<h3>Category 4</h3>
<a href="#">Link 1</a>
<a href="#">Link 2</a>
<a href="#">Link 3</a>
</div>
<div class="column">
<h3>Category 5</h3>
<a href="#">Link 1</a>
<a href="#">Link 2</a>
<a href="#">Link 3</a>
</div>
</div>
</div>
I tried to enqueue a file called "your-script.js" which is located in my theme directory /assets/js/your-script.js
.
I started the file with the code without any scripts tag.
Here’s the PHP code I used to enqueue my script:
add_action( 'wp_enqueue_scripts', 'add_my_script' );
function add_my_script() {
wp_enqueue_script(
'your-script',
get_template_directory_uri() . '/assets/js/your-script.js',
array('jquery')
);
}
But I did not get it working after all.
What I am doing wrong?
2
Answers
Use
jQuery
instead of$
. The$
isn’t available by default in WordPress environments. This is known as safe mode or compatibility mode.Read more here: https://wpengine.com/resources/jquery-wordpress/
Note: This may not be your issue – but if it’s not, you’re not including enough information for anyone to help you most likely.
You’re almost there! You just need to adjust a few things in order to get it to work!
jquery
too!$
fromjquery
in yourjavascript
file.cdn
link that tries to bring injquery
in yourhtml
template.