I am using the register_post_type function in order to create a custom post type. I am already using the menu_icon parameter in order to set the admin icon for the post type. But, how can I set the 'mouseover' icon? When I have seen other plugins create custom post types, they have a seperate 'color' version of their icon that shows on mouseover -

3 Answers 3


This is more of a CSS question. However, if you create your icon as CSS sprite, you just shift between versions of it in your CSS. Something like:

#toplevel_page_my_item .wp-menu-image {
  background: url('images/sprite.png') no-repeat 0 8px !important;

#toplevel_page_my_item:hover .wp-menu-image,
#toplevel_my_item.wp-has-current-submenu .wp-menu-image {
  background-position: 0 -24px !important;
  • I may be a n00b at this, but I can't find any good information elsewhere - what do you mean by 'create your icon as a CSS sprite'?
    – William
    Mar 27, 2013 at 16:09
  • First hit in Google for "CSS sprite": css-tricks.com/css-sprites
    – vancoder
    Mar 27, 2013 at 16:13

The code I use is:

add_action( 'admin_head', 'cpt_icon');
function cpt_icon() { 
    echo '
        #menu-posts-cpt .wp-menu-image {
            background: url('.get_template_directory_uri().'/img/cpt-icon.png) no-repeat 6px 6px !important;
        #menu-posts-cpt:hover .wp-menu-image, #menu-posts-cpt.wp-has-current-submenu .wp-menu-image {
            background-position:6px -16px !important;
        #icon-edit.icon32-posts-cpt {background: url('.get_template_directory_uri().'/img/cpt-32x32.png) no-repeat;}


  • 'cpt-icon.png' is the sprite which has the monochrome & color icons for the admin menu.
  • 'cpt-32x32.png' is the icon which appears on the CPT pages such as(Add New CPT, Edit CPT, etc.).

Sample icons:






vancoder is correct, a sprite would be your best bet. Here is my example:

My CPT is called "contact".

Here is how it shows in the admin menu nav:

<li class="menu-top menu-icon-post" id="menu-posts-contact">

The css I use to display a custom image when not active/hovered over:

#adminmenu #menu-posts-contact div.wp-menu-image {
    background-position: 0 0;

The css for hover:

#adminmenu #menu-posts-contact:hover div.wp-menu-image {
    background-position: 0 -30px;   

The css for active state:

#adminmenu #menu-posts-contact.current div.wp-menu-image {
    background-position: 0 -60px;

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.