Default custom post type icon.
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.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | $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.
1 2 3 4 5 6 7 8 9 10 11 | 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.
1 2 3 4 5 6 7 8 9 10 11 12 13 | 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.
Related Articles
Add Custom Post Type Columns
One of the exciting new features in WordPress 3.0 is custom post types. We can create our own post types by using the register_post_type function. If we enable UIs for our custom post type, we will get additional menu items on our WordPress dashboard similar to the Edit and Add New options for standard posts. Here, we consider how to add new columns...
Add a Metabox to Your Custom Post Type Screen
Custom post types is a new and powerful feature in WordPress 3.0. Here, we consider how to add metaboxes to the new custom post type user interface. There are three general classes of metaboxes that we may add to our custom post type screen - Built-in metaboxes - These metaboxes are built-in to custom post types, and can be easily added by calling...
Custom Post Type Permalinks
Custom post types is a very powerful feature in WordPress 3.0. With custom post types you can easily create post-like objects and automatically have menus, metaboxes, icons, permalinks, and much more added without having to code any of it yourself. Here we consider custom post type permalinks - how to set it, what the different options mean, and...
Also, sorry to be a pain, but you’ve got some screwy PHP in your example!
function plugin_header() {
?>
global $post_type;
Hi Joss -
Thanks for pointing out the error. It is now fixed.
Thanks for being a pain
and please let me know if you spot more errors.