0

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 -

2

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

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;}
    ';
}

Where:

  • '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:

cpt-icon.png

cpt-icon.png

cpt-32x32.png

cpt-32x32.png

1

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, privacy policy and cookie policy

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