register dependency css and js inside a plugin class

Question

I have this code:

  public function __construct()
  {
    add_action('wp_enqueue_script' , array( $this, 'initBootstrap' ));
    add_action('wp_enqueue_style' , array( $this, 'initBootstrap' ));
    add_action('wp_register_script' , array( $this, 'initParallax' ));
    add_action('wp_register_style' , array( $this, 'initParallax' ));
    add_action('wp_register_script' , array( $this, 'initSwiper' ));
    add_action('wp_register_style' , array( $this, 'initSwiper' ));
    add_shortcode( 'bs-container', array( $this, 'contentWrapper') );
    add_shortcode('bs-col', array( $this, 'colWrapper') );
    add_shortcode('bs-parallax', array( $this, 'parallaxSeparator') );
    add_shortcode('bs-slider', array( $this, 'imgSlider') );
  }

  /*
  *
  */

  public function initBootstrap()
  {
    if( !wp_script_is( 'bootstrap.bundle.min.js' , 'enqueued' ) ){
      wp_enqueue_script( 'bootstrap' , plugin_dir_url(__FILE__).'/bootstrap.bundle.min.js' );
    }

    if( !wp_style_is( 'bootstrap.min.css' , 'enqueued' ) ){
      wp_enqueue_style( 'bootstrap' , plugin_dir_url(__FILE__).'/js/bootstrap.min.css' );
    }
  }

  /*
  *
  */

  public function initParallax()
  {
    if( !wp_script_is( 'universal-parallax.min.js' , '/js/universal-parallax.min.js' ) ){
      wp_register_script( 'parallax' , plugin_dir_url(__FILE__).'/js/universal-parallax.min.js' );
    }

    if( !wp_style_is( 'universal-parallax.min.css' , 'enqueued' ) ){
      wp_register_style( 'parallax' , plugin_dir_url(__FILE__).'/css/universal-parallax.min.css' );
    }
  }

  /*
  *
  */

  public function initSwiper()
  {
    if( !wp_script_is( 'swiper.min.js' , 'enqueued' ) ){
      wp_register_script( 'swiper' , plugin_dir_url(__FILE__).'/js/swiper.min.js' );
    }

    if( !wp_style_is( 'swiper.min.css' , 'enqueued' ) ){
      wp_register_style( 'swiper' , plugin_dir_url(__FILE__).'/css/swiper.min.css' );
    }
  }

I want to register the dependency of a plugin but I'm unable to doing that, what's wrong with my code? I've used the add_action inside the construct of my plugin class but the needed files are not loaded and the js and css are needed for the shortcodes I've registered. Can anyone suggest me a fix?

Answer 1

You're using the incorrect hook. The only hook is wp_enqueue_scripts (plural). You use wp_enqueue_style() and wp_register_script() etc. on that hook, but the hook is always the same.

So this:

add_action('wp_enqueue_script' , array( $this, 'initBootstrap' ));
add_action('wp_enqueue_style' , array( $this, 'initBootstrap' ));
add_action('wp_register_script' , array( $this, 'initParallax' ));
add_action('wp_register_style' , array( $this, 'initParallax' ));
add_action('wp_register_script' , array( $this, 'initSwiper' ));
add_action('wp_register_style' , array( $this, 'initSwiper' ));

Needs to be:

add_action('wp_enqueue_scripts' , array( $this, 'initBootstrap' ));
add_action('wp_enqueue_scripts' , array( $this, 'initBootstrap' ));
add_action('wp_enqueue_scripts' , array( $this, 'initParallax' ));
add_action('wp_enqueue_scripts' , array( $this, 'initParallax' ));
add_action('wp_enqueue_scripts' , array( $this, 'initSwiper' ));
add_action('wp_enqueue_scripts' , array( $this, 'initSwiper' ));

That's the reason it wasn't working, but you're also misusing wp_script_is(). It won't affect your code, since the result will always be false, but you need to pass the handle of the script, not the filename.

So this:

if( !wp_style_is( 'universal-parallax.min.css' , 'enqueued' ) ){
  wp_register_style( 'parallax' , plugin_dir_url(__FILE__).'/css/universal-parallax.min.css' );
}

Should be:

if( !wp_style_is( 'parallax', 'enqueued' ) ){
  wp_register_style( 'parallax' , plugin_dir_url(__FILE__).'/css/universal-parallax.min.css' );
}

However, you really don't need that condition at all. If the script is already enqueued, then nothing's going to happen, so there's no reason to check for it.