WordPress Development Stack Exchange is a question and answer site for WordPress developers and administrators. Join them; it only takes a minute:

Sign up
Here's how it works:
  1. Anybody can ask a question
  2. Anybody can answer
  3. The best answers are voted up and rise to the top

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 -

share|improve this question

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;
share|improve this answer
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 '13 at 16:09
First hit in Google for "CSS sprite": css-tricks.com/css-sprites – vancoder Mar 27 '13 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:





share|improve this answer

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;
share|improve this answer

Your Answer


By posting your answer, you agree to the privacy policy and terms of service.

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