1

How could I include the following script and stylesheet in a wordpress plugin if they only need to load in the admin panel?

<script type="text/javascript" src="/wp-includes/js/jquery/jquery.js?ver=1.11.3"></script>
<link rel="stylesheet" type="text/css" href="assets/chosen.min.css">
<script type="text/javascript" src="assets/chosen.jquery.min.js"></script>
  • 2
    Use the admin_enqueue_scripts action hook – Pieter Goosen Feb 14 '16 at 10:42
1

There are probably various ways to do this – personally I use the following for loading some small scripts only on the "new" and "edit" pages (datepicker etc.):

function load_my_admin_scripts( $hook ) {

    if (( $hook == 'post.php' || $hook == 'post-new.php' )) {

    wp_enqueue_script(
        'my-datepicker', // name / handle of the script
        SCRIPTS . 'script.js', // path to the script
        array( 'jquery', 'jquery-ui-datepicker' ), // array of registered handles this script depends on
        '1.0', // script version number (optional)
        true // enqueue the script before </head>
    );

    }

}

add_action( 'admin_enqueue_scripts', 'load_my_admin_scripts' );
1
function load_admin_script_wpse_217608() {
    $assets_path = plugins_url('assets/', __FILE__);

    wp_enqueue_style('chosen-style', $assets_path . 'chosen.min.css');
    wp_enqueue_script('jquery');
    wp_enqueue_script('chosen-script', $assets_path . 'chosen.jquery.min.js', array(), '1.0.0', true);
}

add_action( 'admin_enqueue_scripts', 'load_admin_script_wpse_217608' );

Where $assets_path is the path to your assets folder.

Edit: Props to @cale_b for using plugins_url() to avoid confusion and hard coded strings.

  • 2
    Close. Use the Wordpress function for getting the plugin folder url, instead of hard-coding the path. See 'plugins_url' – cale_b Feb 14 '16 at 15:53
  • @cale_b that's the best scenario. No hardcoded stuff. – denis.stoyanov Feb 14 '16 at 15:54
  • Yeah you missed my point: change your answer to include the usage of plugin_url - otherwise this answer suggests bad practices. – cale_b Feb 15 '16 at 14:54
  • The only reason for me to use it like this was to illustrate what to put there instead of a comment. I can't see a problem assigning plugin_url to it and just use it instead of writing plugin_url twice. That's why I've left it like this in the first place. Also I am not sure what folder structure is he using. – denis.stoyanov Feb 15 '16 at 14:57
  • You still miss my point: Mention it. Show an example of how to use it properly. This answer, as it sits, suggest the user should hard-code the path to the script. You and I both know you should not, so make your answer good. (Then I'll be inclined to upvote it!) – cale_b Feb 16 '16 at 0:34
0

I first added

function __construct() {
    if( is_admin() ) {
    add_action( 'admin_enqueue_scripts', array( &$this, 'xsmi_load_admin_script' ) );
...

since it's in a class.

And the function...

function xsmi_load_admin_script() {
wp_register_style( 'chosencss', plugins_url( 'assets/chosen.css', __FILE__ ), true, '', 'all' );
wp_register_script( 'chosenjs', plugins_url( 'assets/chosen.jquery.js', __FILE__ ), array( 'jquery' ), '', true );
wp_enqueue_style( 'chosencss' );
wp_enqueue_script( 'chosenjs' );
}

The true at the end of wp_register_script loads it in the footer. This is the only way I could get it to work. That for the help!

  • 1
    You shouldn't exeute anything in the class constructor. That is not what constructors are meant to do. You should remove your action from the constructor ;-) – Pieter Goosen Feb 16 '16 at 7:14
  • Thanks! I didn't realize that. I'll go look up the purpose of the class constructor. – j8d Feb 16 '16 at 7:44
  • I thought all WP hooks and filters had to be registered in the constructor when building a plugin as a class. The action throws and error when I place it outside of the constructor. I'm going off of this: code.tutsplus.com/articles/… – j8d Feb 16 '16 at 11:30

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.