How to Load Scripts and CSS for Admins Only When Editing or Adding Posts

Question

I have a plugin that will allow administrators to perform certain actions when adding or editing a post. I use a stylesheet and a javascript for this plugin that I want to include only when a post is being added or edited. Am I right to use the following action hooks?

add_action('load-post.php', 'call_my_function');
add_action('load-post-new.php', 'call_my_function');

Inside of the function call_my_function I have:

function call_my_function() {
  $plugin_directory = "/wp-content/plugins/".dirname(plugin_basename(__FILE__));
  $jssrc = $plugin_directory.'/js/my_plugin.js';
  wp_enqueue_script("my_plugin_js", $jssrc);
  $csssrc = $plugin_directory.'/css/my_plugin.css';
  wp_enqueue_style("my_plugin_css", $csssrc);
}

The code above successfully loads the CSS and Javascript files when not called from the add_action hook. It does not work successfully when called from these hooks.

Answer 1

you want to use admin_print_scripts-(page_hook) and admin_print_styles-(page_hook), so in your case:

add_action('admin_print_scripts-post.php', 'call_my_function');
add_action('admin_print_scripts-post-new.php', 'call_my_function');

add_action('admin_print_styles-post.php', 'call_my_styles_function');
add_action('admin_print_styles-post-new.php', 'call_my_styles_function');

Answer 2

It does not work successfully when called from these hooks.

I suggest you check the source of the page, those hooks work just fine for enqueues. I copied your code to check anyway, and i see both the stylesheet and script enqueued when using the hooks..

The way you're loading the enqueues looks wrong though, i'd suggest the following..

function call_my_function() {
    wp_enqueue_script("my_plugin_js", plugins_url( '/js/my_plugin.js', __FILE__ ) );
    wp_enqueue_style("my_plugin_css", plugins_url( '/css/my_plugin.css', __FILE__ ) );
}