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' );

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(); }); – Shaif Shahin Oct 12 at 18:59
  • Found a solution, the code should be (function($) { $(document).ready(function() { $('.mediPlayer').mediaPlayer(); }); })(jQuery); – Shaif Shahin Oct 12 at 19:14
  • @ShaifShahin yes,you need to use jquery in no conflict mode. – userone2 Oct 13 at 2:23

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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