Modify Custom Post Type Icons

After we create a custom post type, we get a new menu item on our dashboard with the default post icon. We also get that same default icon when we go into the Edit and Add New screens of our new custom post type.

Here, we consider how to set our custom post type icons to our own image, or to another existing WordPress icon.

1. Register Post Type

New custom post type menu icon.

The easiest way to define our own menu icon is to specify it within our register_post_type function call, while we are creating our new custom post type.

$args = array(
		'labels' => $labels,
		'public' => true,
		'publicly_queryable' => true,
		'show_ui' => true, 
		'query_var' => true,
		'rewrite' => true,
		'capability_type' => 'post',
		'hierarchical' => false,
		'menu_position' => null,
		'menu_icon' => SHIBA_PLUGIN_URL .'/images/shiba-icon1b.jpg', // 16px16
		'supports' => array('title','thumbnail','excerpt')
	  ); 
	  register_post_type('gallery',$args);

In line-11 we specify a new menu icon for our custom post type. The menu icon should be sized at 16×16 pixels.

As is shown below, the icon shows up on our new menu item, but it does not appear in the individual Edit and Add New screens.

Shiba custom post icon appears on the left menu items, but not on the main Edit and Add New screens.

In addition, we have no control over our icon hover effect. You will notice that when you hover over existing WordPress menu items they switch from a less distinct gray image, to a darker and more vibrant icon.

2. Custom Screen Icons on Edit and Add New Screens

Another more flexible way to alter our new custom post type icons is to override their default image through CSS.

add_action('admin_head', 'plugin_header');
function plugin_header() {
        global $post_type;
	?>
	<style>
	<?php if (($_GET['post_type'] == 'gallery') || ($post_type == 'gallery')) : ?>
	#icon-edit { background:transparent url('<?php echo SHIBA_PLUGIN_URL .'/images/shiba-icon1.jpg';?>') no-repeat; }		
	<?php endif; ?>
        </style>
        <?php
}

Line 6 – We only override the screen icon if the screen belongs to our custom post type.
Line 7 – We override the background image of the icon-edit div with our new screen icon.

Screen icons should be sized at 32×32 pxels.

We now have a new screen icon on our Edit custom post type screen. It will also appear on the Add New screen.

3. Screen Icon Hover Effect

We can now use the same CSS strategy to achieve more control over our screen icon on the left menu-bar. Specifically, we can use it to define a different image when a user hovers over our custom post type menu.

add_action('admin_head', 'plugin_header');
function plugin_header() {
	global $post_type;
	?>
	<style>
	<?php if (($_GET['post_type'] == 'gallery') || ($post_type == 'gallery')) : ?>
	#icon-edit { background:transparent url('<?php echo SHIBA_PLUGIN_URL .'/images/shiba-icon1.jpg';?>') no-repeat; }		
	<?php endif; ?>
	#adminmenu #menu-posts-gallery div.wp-menu-image{background:transparent url("<?php echo SHIBA_PLUGIN_URL .'/images/shiba-gray.jpg';?>") no-repeat center center;}
	#adminmenu #menu-posts-gallery:hover div.wp-menu-image,#adminmenu #menu-posts-gallery.wp-has-current-submenu div.wp-menu-image{background:transparent url("<?php echo SHIBA_PLUGIN_URL .'/images/shiba-hover.jpg';?>") no-repeat center center;}	
</style>
<?php
}

To do this we have added line-9 and line-10 to our previous plugin_header function.

Note – Change #menu-posts-gallery to your own custom post type name. For example if your custom post type is shiba, then change #menu-posts-gallery to #menu-posts-shiba.

Now, we have our hover effect –

Menu icon hover effect.

We are Done!

We can use the same CSS strategy to change our custom post type icons to other standard WordPress icons. For example, since our custom post type is a gallery object – it may be more appropriate to use the standard WordPress media icons.

add_action('admin_head', 'plugin_header');
function plugin_header() {
	global $post_type;
	?>
	<style>
	<?php if (($_GET['post_type'] == 'gallery') || ($post_type == 'gallery')) : ?>
	#icon-edit { background:transparent url('<?php echo get_bloginfo('url');?>/wp-admin/images/icons32.png') no-repeat -251px -5px; }
	<?php endif; ?>
		
	#adminmenu #menu-posts-gallery div.wp-menu-image{background:transparent url('<?php echo get_bloginfo('url');?>/wp-admin/images/menu.png') no-repeat scroll -121px -33px;}
	#adminmenu #menu-posts-gallery:hover div.wp-menu-image,#adminmenu #menu-posts-gallery.wp-has-current-submenu div.wp-menu-image{background:transparent url('<?php echo get_bloginfo('url');?>/wp-admin/images/menu.png') no-repeat scroll -121px -1px;}		
        </style>
        <?php
}

Custom post type using the standard WordPress media icons.