Shortcode not working for js error. page link https://staging.sugrihini.com/test/ using

this [circleaudio src="/wp-content/uploads/2019/10/piano.mp3"]

Geeting error

Uncaught TypeError: $ is not a function
at main.js?ver=0.0.3:1

===================Plugin Code===========

function circleaudioplayer_assets(){
    wp_enqueue_style( 'bar', plugins_url( '/progres-bar.css' , __FILE__ ));
    wp_enqueue_script( 'player', plugins_url( '/player.js' , __FILE__ ),array("jquery"),'0.0.1',true);
    wp_enqueue_script( 'main', plugins_url( '/main.js' , __FILE__ ),array("jquery","player"),'0.0.3',true);

function circleaudioplayer( $atts ) {
    $a = shortcode_atts( array(
        'src' => ''
    ), $atts );

    return '<div class="mediPlayer">
    <audio class="listen" preload="none" data-size="250" src="' . $a['src'] . '"></audio></div></div>';


add_shortcode( 'circleaudio', 'circleaudioplayer' );

1 Answer 1


You can avoid to declare that player is a dependency for your javascript file, the problem is that Jquery isn't recognized. Change this line:

wp_enqueue_script( 'main', plugins_url( '/main.js' , __FILE__ ),array("jquery","player"),'0.0.3',true);

into this:

wp_enqueue_script( 'main', plugins_url( '/main.js' , __FILE__ ), ["jquery"] );

Also avoid to enqueue your script in the footer.

  • I tried with your suggestion. Now getting this Uncaught TypeError: $ is not a function at main.js:1 $(document).ready(function () { $('.mediPlayer').mediaPlayer(); }); Oct 12, 2019 at 18:59
  • Found a solution, the code should be (function($) { $(document).ready(function() { $('.mediPlayer').mediaPlayer(); }); })(jQuery); Oct 12, 2019 at 19:14
  • @ShaifShahin yes,you need to use jquery in no conflict mode.
    – userone2
    Oct 13, 2019 at 2:23

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.