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

7 Views

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:

Read More
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.

Post Views: 7

Related posts

Leave a Reply

3 comments

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

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

  3. this one works for me, including the scripts on a customsubmenu page anyway:

    add_action('admin_menu', 'register_my_custom_submenu_pages');

function register_my_custom_submenu_pages() {

    $email_menu = add_submenu_page( 'edit.php?post_type=events', 'Email Users', 'Email Users', 'edit_others_posts', 'email', 'email_callback' ); 

    add_action( 'admin_print_styles-' . $email_menu, 'email_custom_css' );
    add_action( 'admin_print_scripts-' . $email_menu, 'email_custom_js' );  

}

function email_callback() {

    echo '<div class="wrap">';
        echo '<h2>'.get_admin_page_title().'</h2>';
        include get_stylesheet_directory() . '/admin/email.php';
    echo '</div>';

}

function email_custom_css()
{ 
    wp_enqueue_style( 'chosen',get_stylesheet_directory_uri().'/js/chosen/chosen.min.css' ); 
}; 

function email_custom_js()
{ 
    wp_enqueue_script( 'chosen', get_stylesheet_directory_uri().'/js/chosen/chosen.jquery.min.js', array('jquery')); 
};

    shorthand this could translate for you to:

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

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

function custom_css_load()
{ 
    wp_enqueue_style( 'my_styles', plugins_url( '/css/my_plugin.css', __FILE__ ) ); 
}; 

function custom_js_load()
{ 
    wp_enqueue_script( 'my_scripts', plugins_url( '/js/my_plugin.js', __FILE__ ), array('jquery')); 
};

    Don’t forget to load after jQuery if your js code depents on it.

    I dit not test this, so do with it as you please 🙂