Title: Enqueue CSS Into Specific Admin Page Last modified: August 30, 2016 --- # Enqueue CSS Into Specific Admin Page * [gelthemes](https://wordpress.org/support/users/gelthemes/) * (@gelthemes) * [10 years, 10 months ago](https://wordpress.org/support/topic/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 ](https://codex.wordpress.org/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](https://wordpress.org/support/users/gelthemes/) * (@gelthemes) * [10 years, 10 months ago](https://wordpress.org/support/topic/enqueue-css-into-specific-admin-page/#post-6378252) * 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'); ``` * [Chris](https://wordpress.org/support/users/zenation/) * (@zenation) * [10 years, 10 months ago](https://wordpress.org/support/topic/enqueue-css-into-specific-admin-page/#post-6378326) * 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](https://wordpress.org/support/users/gelthemes/) * (@gelthemes) * [10 years, 10 months ago](https://wordpress.org/support/topic/enqueue-css-into-specific-admin-page/#post-6378350) * 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'); ``` * [Chris](https://wordpress.org/support/users/zenation/) * (@zenation) * [10 years, 10 months ago](https://wordpress.org/support/topic/enqueue-css-into-specific-admin-page/#post-6378444) * 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. ## Tags * [admin page](https://wordpress.org/support/topic-tag/admin-page/) * [css](https://wordpress.org/support/topic-tag/css/) * [enqueue](https://wordpress.org/support/topic-tag/enqueue/) * [specific](https://wordpress.org/support/topic-tag/specific/) * In: [Hacks](https://wordpress.org/support/forum/plugins-and-hacks/hacks/) * 4 replies * 2 participants * Last reply from: [Chris](https://wordpress.org/support/users/zenation/) * Last activity: [10 years, 10 months ago](https://wordpress.org/support/topic/enqueue-css-into-specific-admin-page/#post-6378444) * Status: not resolved ## Topics ### Topics with no replies ### Non-support topics ### Resolved topics ### Unresolved topics ### All topics