javascript - Load script on frontend from widget plugin

I need a bit of help for a plugin I'm writing. I need to load a custom stylesheet and a custom script that are needed on the frontend only. Usually I use the wp_enqueue_script and wp_enqueue_style with the get_template_directory_uri() but these scripts are inside the plugin folder and the javascript one needs that swiper.js is loaded and available. On the backend this will cause an error because swiper is not loaded for the backend. How I can fix this and enqueue correctly the scripts?

Here is the code I'm using:

public function __construct()
  {
    parent::__construct(
      'i-widget',
      'I feed',
      array(
        'description' => ''
      )
    );
    add_action( 'widgets_init', array($this, 'init') );
    add_action( 'wp_enqueue_scripts', array($this, 'init' ) );
  }

  public function init()
  {
    register_sidebar(
      array(
        'name'        =>  'I feed',
        'id'          =>  'i-feed',
        'description' =>  'I feed widget',
      )
    );
    register_widget( 'IFeedWidget' );

    wp_enqueue_style('i-widget', plugins_url( 'i-widget.min.css' , __FILE__), array(), null);
    wp_enqueue_script('i-widget', plugins_url( 'i-widget.min.js', __FILE__), array('jquery, swiper'), null);
  }

I need a bit of help for a plugin I'm writing. I need to load a custom stylesheet and a custom script that are needed on the frontend only. Usually I use the wp_enqueue_script and wp_enqueue_style with the get_template_directory_uri() but these scripts are inside the plugin folder and the javascript one needs that swiper.js is loaded and available. On the backend this will cause an error because swiper is not loaded for the backend. How I can fix this and enqueue correctly the scripts?

Here is the code I'm using:

public function __construct()
  {
    parent::__construct(
      'i-widget',
      'I feed',
      array(
        'description' => ''
      )
    );
    add_action( 'widgets_init', array($this, 'init') );
    add_action( 'wp_enqueue_scripts', array($this, 'init' ) );
  }

  public function init()
  {
    register_sidebar(
      array(
        'name'        =>  'I feed',
        'id'          =>  'i-feed',
        'description' =>  'I feed widget',
      )
    );
    register_widget( 'IFeedWidget' );

    wp_enqueue_style('i-widget', plugins_url( 'i-widget.min.css' , __FILE__), array(), null);
    wp_enqueue_script('i-widget', plugins_url( 'i-widget.min.js', __FILE__), array('jquery, swiper'), null);
  }

• plugin-development
• javascript
• widgets

Share Improve this question edited Dec 21, 2019 at 12:45 fuxia♦ 107k3939 gold badges255255 silver badges459459 bronze badges asked Dec 21, 2019 at 11:15 sialfasialfa 3291010 silver badges2929 bronze badges

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 0

In general to load css or js into admin you need to use admin_enqueue_scripts hook, so it can be like this in functional style:

add_action( 'admin_enqueue_scripts', function( $hook_suffix ){
    wp_enqueue_style('i-widget', plugins_url( 'i-widget.min.css' , __FILE__), array(), null);
    wp_enqueue_script('swiper', plugins_url( 'swiper.min.js', __FILE__), array('jquery'), null);
}, 99 );
    wp_enqueue_script('i-widget', plugins_url( 'i-widget.min.js', __FILE__), array('jquery', 'swiper'), null);
}, 99 );

See more at https://developer.wordpress/reference/hooks/admin_enqueue_scripts/

Also in terms of architecture it's better to split up init method of your class in parts extracting enqueue scripts\styles into separate method.

public function initScripts(){
   wp_enqueue_style('i-widget', plugins_url( 'i-widget.min.css' , __FILE__), array(), null);
   wp_enqueue_script('swiper', plugins_url( 'swiper.min.js', __FILE__), array('jquery'), null);
   wp_enqueue_script('i-widget', plugins_url( 'i-widget.min.js', __FILE__), array('jquery', 'swiper'), null);
} 

So that in constructor you can hook to it via add_action('admin_enqueue_scripts', [$this, 'initScripts']); and for frontend add_action('wp_enqueue_scripts',[$this, 'initScripts']);

And when you specify js\css dependencies you provide an array of strings like array('jquery','swiper')or ['jquery', 'swiper']

This one will not work correctlyarray('jquery, swiper').

Don't forget to put swiper.min.js in your plugin's directory or provide proper path to it.