How to use jquery in wordPress-CodePudding

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?

CodePudding user response：

Use jQuery instead of $. The $ isn't available by default in WordPress environments. This is known as safe mode or compatibility mode.

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.

CodePudding user response：

You're almost there! You just need to adjust a few things in order to get it to work!

Enqueue jquery too!

add_action( 'wp_enqueue_scripts', 'add_my_script' );
function add_my_script() {
    wp_enqueue_script('jquery'); // Explicitly telling wordpress to load jquery
    wp_enqueue_script(
        'your-script', 
        get_template_directory_uri() . '/assets/js/your-script.js', 
        array('jquery'), 
        1.5, // put the version of your script here
        TRUE // This will make sure that your script will be loaded in the footer
    );
}

Get $ from jquery in your javascript file.

jQuery(document).ready($ => {
  $("#newark").click(function () {
    $("#mencontoz").toggle();
  });
});

Remove the cdn link that tries to bring in jquery in your html template.

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>