Color WordPress Admin Menu Items

A long WordPress admin menu is hard to scan. Giving the items you use every day their own colour makes them easy to find. This snippet colours chosen WordPress admin menu items, background and text, from one config array.

The snippet

<?php
/**
 * Colour chosen items in the WordPress admin menu.
 */

// ===== Config: menu item ID => background and text colour (hex) =====
function dpc_admin_menu_colors() {
	$items = array(
		'menu-posts' => array( 'background' => '#eede01', 'color' => '#000000' ),
		'menu-media' => array( 'background' => '#00c69e', 'color' => '#ffffff' ),
		// 'menu-posts-download'                          => array( 'background' => '#eede01', 'color' => '#000000' ), // Easy Digital Downloads
		// 'toplevel_page_edit-post_type-acf-field-group' => array( 'background' => '#00c69e', 'color' => '#ffffff' ), // ACF
	);
	// ===== End of config =====

	return (array) apply_filters( 'dpc_admin_menu_colors', $items );
}

function dpc_admin_menu_colors_css() {
	$css = '';

	foreach ( dpc_admin_menu_colors() as $id => $colors ) {
		$id    = sanitize_html_class( $id );
		$bg    = sanitize_hex_color( $colors['background'] ?? '' );
		$color = sanitize_hex_color( $colors['color'] ?? '' );
		if ( '' === $id ) {
			continue;
		}

		$item = "#adminmenu #{$id}";
		if ( $bg || $color ) {
			$css .= "{$item} .wp-menu-name{" . ( $bg ? "background:{$bg};" : '' ) . ( $color ? "color:{$color};" : '' ) . '}';
		}
		if ( $color ) {
			$css .= "{$item} .wp-menu-image:before{color:{$color};}";
		}
	}

	return $css;
}

add_action( 'admin_enqueue_scripts', 'dpc_admin_menu_colors_enqueue' );

function dpc_admin_menu_colors_enqueue() {
	$css = dpc_admin_menu_colors_css();
	if ( '' !== $css ) {
		wp_add_inline_style( 'admin-menu', $css );
	}
}

How it works

Each key in the config is the id of a menu item’s <li> in the admin sidebar. To find it, right-click the menu item, choose Inspect and look for the <li id="..."> around the link. Posts is menu-posts, Media menu-media, a plugin page often toplevel_page_ plus its slug.
The CSS sets the background of the menu label and the colour of the label and its icon. The selectors start with #adminmenu and the item ID, so they beat the hover and current-item colours of every admin colour scheme without !important.
The rules are attached to the admin-menu stylesheet with wp_add_inline_style() on admin_enqueue_scripts, so they load on every admin screen right after the menu CSS.
IDs go through sanitize_html_class() and colours through sanitize_hex_color(), so a typo cannot break the stylesheet; invalid colours are skipped.

The older version of this post printed a <style> tag with !important rules for Easy Digital Downloads and ACF menus only.

Add it with Scripts Organizer

In Scripts Organizer go to Code Blocks → Add New and give the block a name. Set Trigger location to Admin only, tick PHP under Script location, paste the code into the PHP editor and publish. Leave Action/Hook empty. The admin menu only exists in wp-admin, so Admin only is all it needs.

The same code also works unchanged in a small plugin or an mu-plugin.

Customise it

Your own items: add a line such as 'toplevel_page_woocommerce' => array( 'background' => '#7f54b3', 'color' => '#ffffff' ),. The commented lines show the IDs for Easy Digital Downloads and ACF.
Only change the text: leave out background. Only the background: leave out color.
Restyle the whole admin instead: see WordPress Admin Dark Theme.

Gotchas

Use full hex colours such as #fff or #00c69e; names like red are skipped.
Every user sees the colours, whatever admin colour scheme they picked in their profile.
Plugins that rename their menu slug in an update change the <li> ID too; check the ID again if a colour disappears.

In the Scripts Organizer library Import it with one click from Scripts Organizer.