WordPress Add Admin styles for certain pages

There are some circumstances when you want to use your styles and scripts on admin screen for only your plugin or theme pages or post types. For example you want to use bootstrap CSS for your metaboxes styling.

If you include stylesheets or scripts with admin_enqueue_scripts that will be available on all admin pages. This can be another issue that style of each page modified according to your new stylesheet.

In such cases the best solution is just add your scripts and styles on pages you want to use them. And avoid them to load on other pages. This also have special benefit. Means the conflict of JS with other plugins or theme JS or CSS files can be avoided.

Let’s see how to enqueue Plugin styles to admin screens properly

There are three WordPress global variables, object and query variables we would use.

get_current_screen(); Object

WordPress get_current_screen is an object which return different information about the page you are on. However i am including what this object returns but from it we will use post_type only.

WP_Screen Object
(
    [action] => 
    [base] => edit
    [columns:WP_Screen:private] => 0
    [id] => edit-rep_products
    [in_admin:protected] => site
    [is_network] => 
    [is_user] => 
    [parent_base] => 
    [parent_file] => 
    [post_type] => rep_products
    [taxonomy] => 
    [_help_tabs:WP_Screen:private] => Array
        (
        )

    [_help_sidebar:WP_Screen:private] => 
    [_screen_reader_content:WP_Screen:private] => Array
        (
            [heading_views] => Filter posts list
            [heading_pagination] => Posts list navigation
            [heading_list] => Posts list
        )

    [_options:WP_Screen:private] => Array
        (
            [per_page] => Array
                (
                    [default] => 20
                    [option] => edit_rep_products_per_page
                )

        )

    [_show_screen_options:WP_Screen:private] => 
    [_screen_settings:WP_Screen:private] => 
    [is_block_editor] => 
)

Since you can also use base which returns post for both on editing a custom post type or on adding new for custom post type. But instead of base we will use $pagenow global WordPress variable which return current page. Just to add different page on post.php or post-new.php pages.

$pagenow

Inside a function you should first define global $pagenow; So you can use the variable inside the function. This will return the current page like profile.php, edit.php, post.php post-new.php or other pages.

We are ready now to see the actual code which enqueue scripts and styles to our desired post types on editing and adding new posts of custom post type as well.

Another issue can be arise when you add setting page and want to load styles on setting page also. You can get that setting page by query string let’s see action now.

//adding styles and scripts for worpress admin
if(!function_exists("wc_cmp_rep_ser_admin_scripts")) :
	function wc_cmp_rep_ser_admin_scripts() {
		global $pagenow;

		$current_page = get_current_screen();

		if(
			($current_page->post_type === 'rep_jobs' && ($pagenow === 'post-new.php' || $pagenow === 'post.php')) ||
			($current_page->post_type === 'rep_products' && ($pagenow === 'post-new.php' || $pagenow === 'post.php')) ||
			($current_page->post_type === 'rep_services' && ($pagenow === 'post-new.php' || $pagenow === 'post.php')) ||
			(isset($_GET["page"]) && $_GET["page"] === 'wc-computer-rep-shop-handle')
		) { 
			//Foundation CSS enque
			wp_register_style('foundation-css', plugins_url('assets/admin/css/foundation.min.css', __FILE__ ), array(), '6.5.3', 'all', true);
			wp_enqueue_style( 'foundation-css' );

			//Admin styles enque
			wp_enqueue_style('wc-admin-style', plugins_url('assets/admin/css/style.css', __FILE__ ), array(),'1.0','all');


			//Admin JS enque
			wp_enqueue_script('wc-js', plugins_url('assets/admin/js/my-admin.js', __FILE__ ), array('jquery'));
		}

	}//end of adding styles and scripts for wordpress admin.
	add_action('admin_enqueue_scripts', 'wc_cmp_rep_ser_admin_scripts', 1);
endif;

So basically the code above adds script and style files to wp-admin

on:

• Post type : rep_jobs, rep_products, rep_services While editing and adding new.
• Admin page wc-computer-rep-shop-handle

I hope this code was helpful! good luck.