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>
Improve this question
1
  • 2
    Use the admin_enqueue_scripts action hook Commented Feb 14, 2016 at 10:42

3 Answers 3

Reset to default
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' );
Improve this answer
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.

Improve this answer
6
  • 2
    Close. Use the Wordpress function for getting the plugin folder url, instead of hard-coding the path. See 'plugins_url' Commented Feb 14, 2016 at 15:53
  • @cale_b that's the best scenario. No hardcoded stuff. Commented Feb 14, 2016 at 15:54
  • Yeah you missed my point: change your answer to include the usage of plugin_url - otherwise this answer suggests bad practices. Commented Feb 15, 2016 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. Commented Feb 15, 2016 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!) Commented Feb 16, 2016 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!

Improve this answer
3
  • 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 ;-) Commented Feb 16, 2016 at 7:14
  • Thanks! I didn't realize that. I'll go look up the purpose of the class constructor. Commented Feb 16, 2016 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/… Commented Feb 16, 2016 at 11:30

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.