0

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

1 Answer 1

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.org/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.

1
  • Thanks for the help, I need only to enqueue the scripts on the front-end. I know about admin scripts, but this is not the case. The widgets working fine, the only thing is that I wasn't know about the arryay of dependencies that needs to be separate and not in the same quote for each script. thanks for the help. PS: the widget is now working fine, the only problem is with a single hosting provider (tophost) that will not make it work and I don't understand why (I've tested It on various hosts and works fine)!!
    – sialfa
    Dec 21, 2019 at 19:54

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.