1

I'm still learning so please bear with me if I sound a little confusing. Having lots of fun BTW while I learn.

I'm creating a plugin with admin specific JS and CSS but I don't want those scripts and styles to load elsewhere in the admin area. I used a boilerplate to generate the plugin for me.

The top level page I'm loading it on is uwc. eg /wp-admin/options-general.php?page=uwc

In the admin folder/fluffy-plugin.php I have this.

class Fluffy_Plugin_Admin {

/**
 * The ID of this plugin.
 *
 * @since    1.0.0
 * @access   private
 * @var      string    $plugin_name    The ID of this plugin.
 */
private $plugin_name;

/**
 * The version of this plugin.
 *
 * @since    1.0.0
 * @access   private
 * @var      string    $version    The current version of this plugin.
 */
private $version;

/**
 * Initialize the class and set its properties.
 *
 * @since    1.0.0
 * @param      string    $plugin_name       The name of this plugin.
 * @param      string    $version    The version of this plugin.
 */
public function __construct( $plugin_name, $version ) {

    $this->plugin_name = $plugin_name;
    $this->version = $version;

}

/**
 * Register the stylesheets for the admin area.
 *
 * @since    1.0.0
 */
 public function enqueue_styles() {

    /**
     * This function is provided for demonstration purposes only.
     *
     * An instance of this class should be passed to the run() function
     * defined in Fluffy_Plugin_Loader as all of the hooks are defined
     * in that particular class.
     *
     * The Fluffy_Plugin_Loader will then create the relationship
     * between the defined hooks and the functions defined in this
     * class.
     */

     wp_enqueue_style( $this->plugin_name, plugin_dir_url( __FILE__ ) . 'css/fluffy-plugin-admin.css', array(), $this->version, 'all' );

 }


/**
 * Register the JavaScript for the admin area.
 *
 * @since    1.0.0
 */
public function enqueue_scripts() {

    /**
     * This function is provided for demonstration purposes only.
     *
     * An instance of this class should be passed to the run() function
     * defined in Fluffy_Plugin_Loader as all of the hooks are defined
     * in that particular class.
     *
     * The Fluffy_Plugin_Loader will then create the relationship
     * between the defined hooks and the functions defined in this
     * class.
     */
    wp_enqueue_script( $this->plugin_name, plugin_dir_url( __FILE__ ) . 'js/wp-color-picker-script.js', array( 'wp-color-picker' ), false, true );


}

}

PS. You may have to ELI5

1 Answer 1

2

You can use $screen = get_current_screen(); functions to get the current screen and add warp your enqueue method with the if conditions to check the screen.

https://codex.wordpress.org/Function_Reference/get_current_screen

public function enqueue_scripts() {

$screen = get_current_screen();

  // Check screen base and page
  if ( 'options-general' === $screen->base && $_GET['page'] ==='uwc' )
 {
    wp_enqueue_script( $this->plugin_name, plugin_dir_url( __FILE__ ) . 'js/wp-color-picker-script.js', array( 'wp-color-picker' ), false, true );

 } 
}
2
  • Where would I add it and what would I add in the above code? I've tried a few things and all it does is it doesn't seem to load the css or JS
    – John Cook
    Commented Feb 11, 2019 at 8:49
  • You can wrap wp_enqueue_script( $this->plugin_name, plugin_dir_url( __FILE__ ) . 'js/wp-color-picker-script.js', array( 'wp-color-picker' ), false, true ); by an if condition.
    – dazunE
    Commented Feb 12, 2019 at 5:55

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.