Enqueue CSS Into Specific Admin Page

  • I am trying to enqueue a CSS style sheet (and .js file) on a specific Admin Page).

    I have gone through the WP documentation found here – Plugin API/Action Reference/admin enqueue scripts .

    Below is my code. This code is almost verbatim from the WP documentation. There is no file being enqueued into the head of plugin when I implement the below code. When I change != $hook to == $hook, the style sheet is enqueued into the head of every admin page. Any help would be greatly appreciated.

    function wpgel_localseo_bootstrap_styles($hook) {
	if ( 'plugins.php' != $hook ) {
        return;
    }

wp_enqueue_style( 'wpgel_localseo_bootstrap_styles', plugins_url( 'wpgel-localseo/css/bootstrap.min.css' ) );

}
add_action( 'admin_head', 'wpgel_localseo_bootstrap_styles' );
Viewing 4 replies - 1 through 4 (of 4 total)
  • Thread Starter gelthemes

    (@gelthemes)

    Well I am getting closer. Need a little more help though. I am now able to pull the css file into a specific page as long as it ends in .php, however my options page is /wp-admin/admin.php?page=wpgel-localseo

    Again, any help with the below code would be much appreciated.

    function wpgel_localseo_bootstrap_styles($hook) {

      if   ( 'options-general.php' == $hook ) { 

          wp_enqueue_style( 'wpgel_localseo_bootstrap_styles', plugins_url( 'wpgel-localseo/css/bootstrap.min.css' ) );

      }
}
add_action('admin_enqueue_scripts', 'wpgel_localseo_bootstrap_styles');

    I would go back one step. This might look like quite some overhead at first. But I think in the end this is the cleanest approach.

    /**
 * Step 1: Register your CSS file
 */
function myCustomAdminInit() {

  wp_register_style( 'myCustomAdminStyles', '../your.css' );

}
add_action( 'admin_init', 'myCustomAdminInit' );

/**
 * Step 2: This is how it will be loaded
 */
function loadMyCustomAdminStyles() {

  wp_enqueue_style( 'myCustomAdminStyles' );

}

/**
 * Step 3: Add your admin pages
 */
function registerMyCustomAdminPages() {

  // Create your "wpgel-localseo" menu/page here

  $pages['index']   = add_menu_page( ... );

  $pages['options'] = add_submenu_page( ... );

  // Of course, if you only have one page you won't need the foreach
  foreach( $pages as $page ) {

    // Finally, this is the line you're looking for...
    add_action( 'admin_print_styles-' . $page, 'loadMyCustomAdminStyles' );

  }

}
add_action( 'admin_menu', 'registerMyCustomAdminPages' );
    Thread Starter gelthemes

    (@gelthemes)

    Chris, thank you for your response. I looked at that solution and saw that print_style was not supposed to be used on Admin Pages.

    Here is the solution I finally cam up with after a lot of digging and testing.

    Just as a side not the purpose of this whole endeavor was to enqueue Bootstrap CSS and JS.

    The solution was to set a global variable for the Admin Settings Page. If you see any way in which this code can be cleaned up or improved upon, please contribute.

    function wpgel_localseo_menu() {
	global $wpgel_localseo_settings_page;
	$wpgel_localseo_settings_page = add_menu_page(
		'Local SEO Dashboard',
		'Local SEO',
		'manage_options',
		'wpgel-localseo',
		'wpgel_localseo_options_page'
	);
}
add_action( 'admin_menu', 'wpgel_localseo_menu' );

function wpgel_localseo_bootstrap_styles($hook) {
  global $wpgel_localseo_settings_page;
  if   ( $hook == $wpgel_localseo_settings_page ) {
	wp_enqueue_style( 'wpgel_localseo_bootstrap_styles', plugins_url( 'wpgel-localseo/css/bootstrap.min.css', dirname(__FILE__) ) );
        wp_enqueue_script( 'wpgel_localseo_bootstrap_script', plugins_url( 'wpgel-localseo/js/bootstrap.min.js', dirname(__FILE__) ) );
      }
}
add_action('admin_enqueue_scripts', 'wpgel_localseo_bootstrap_styles');

    Ha. I didn’t know about not using print_style any longer. You never stop learning. Your code look fine now ??

    I’m not a big fan of using globals. Though in your case it’s just semantics. Instead you could create an object where your admin page hook is a member variable that can be referenced by each function/method. But again, this would be a clean up (in terms of “separation of concerns”) but not an improvement.

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘Enqueue CSS Into Specific Admin Page’ is closed to new replies.