Adding custom JavaScript file in WordPress

Question

I have child theme in which I have a page test.php. In this page, I have a select element. When value of option is RED then heading should be displayed. I wrote JavaScript Code for this, but it is no working. PHD and JavaScript Code is mentioned below.

    <Select id="colorselector">
       <option value="red">Red</option>
       <option value="yellow">Yellow</option>
       <option value="blue">Blue</option>
    </Select>

    <div id="red" class="colors" style="display:none">
        <h1>Red</h1>
    </div>

JavaScript is

       <script>  
          $(document).ready(function(){
          $('#colorselector').on('change', function() {
          if ( this.value == 'red')
          {
              $("#red").show();
           }
          else
          {
          $("#red").hide();
          }
       });
       });
     </script>

I wrote JavaScript code into file custom.js that is located in same folder as of test.php and style.css. I put following code in function.php of child theme.

     add_action('wp_enqueue_scripts', 'tutsplus_enqueue_custom_js');
     function tutsplus_enqueue_custom_js() {
     wp_enqueue_script('custom', 
     get_stylesheet_directory_uri().'custom.js', array(), false, true);
     }

expected output is not met...What did I miss? Can anyone guide me?

I also follow Method 2 in link. I use following code in function.php, But it doesn't work.

    function wpb_hook_javascript() {
    ?>             
    <script>
    $(document).ready(function(){
    $('#colorselector').on('change', function() {
    if ( this.value == 'red')
    {
    $("#red").show();
    }
    else
    {
    $("#red").hide();
    }
    });
    });
    </script>

    <?php
    }
    add_action('wp_head', 'wpb_hook_javascript');

SOS9GS · Accepted Answer · 2020-09-27 19:26:22Z

1

Follow this code:

add following code to your functions.php file

add_action('wp_footer', 'my_code');

function my_code(){
 ?>
<script>  
jQuery(document).ready(function($){
    $('#colorselector').on('change', function() {
        if ( $(this).value == 'red')
        {
            $("#red").show();
        }
        else
        {
            $("#red").hide();
        }
    });
});
</script>
<?php
}

Hop this will solve your issue.

answered Sep 27, 2020 at 19:26

SOS9GS

3471 silver badge7 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

SOS9GS Over a year ago

open your browser console and make sure there is no JavaScript's error. Let me know @MuhammadAboBakarAslam

kingkong.js · Accepted Answer · 2020-09-27 18:42:22Z

0

There is a Wordpress plugin called Simple Custom CSS and Javascript. See https://sv.wordpress.org/plugins/custom-css-js/

Download that -> Create new .js file from admin panel and enter your code there

If you don't want to use plugin, follow this guide: https://www.wpbeginner.com/wp-tutorials/how-to-easily-add-javascript-in-wordpress-pages-or-posts/

edited Sep 27, 2020 at 18:42

answered Sep 27, 2020 at 18:31

kingkong.js

7595 silver badges18 bronze badges

2 Comments

Muhammad Abo Bakar Aslam Over a year ago

But I don't want to use any plugin. Is there any solution without using plugin?

Muhammad Abo Bakar Aslam Over a year ago

I also follow [link] (wpbeginner.com) guide in Method.2.

Pirate of KGP · Accepted Answer · 2020-09-29 02:31:42Z

0

Wordpress converts all '$' to 'jQuery' so that it doesn't conflict with any php $(if any mistake happen). We need to convert it again to '$' object. And also need some changes on your code.

<script>  
 jQuery(document).ready(function($){
  $('#colorselector').on('change', function() {
    if ( $(this).val() == 'red') {
        $("#red").show();
    } else {
        $("#red").hide();
    }
 });
});

edited Sep 29, 2020 at 2:31

answered Sep 28, 2020 at 18:33

Pirate of KGP

665 bronze badges

Collectives™ on Stack Overflow

Adding custom JavaScript file in WordPress

3 Answers 3

1 Comment

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related