How To Create Dashboard Menu Icons for WordPress Custom Post Types

There are two ways to define a dashboard menu icon for your custom post type.

The simplest way is to declare it when registering the custom post type.  For example:

[php]’menu_icon’ => bloginfo(‘template_url’) . ‘/images/my-icon.png’,[/php]

This is OK, but it doesn’t allow for any effects when you hover over the icon and we can’t let the WordPress core code trump all our hard work.

Here’s a great method that will allow you to have two images for your menu icon, one for the normal state and one for the hover effect.

The method uses an image sprite which is a single graphic file containing multiple images (sprites) at known pixel locations.

CSS is then used to manipulate the position of the graphic to display the desired “sprite” within the graphic file.

The 16×64 pixel graphic we’re using is this (without the border):

It contains two 16×16 pixel sprites with a padding space of 8 pixels above and below each sprite.

Place the graphic in the current theme at this file path /images/admin-dashboard/casestudy-icon.png.

Now for the code that manipulates the graphic and pulls out the sprites.  This should be placed in your functions.php file.

[php]<?php
// Define icon styles for the custom post type
function casestudy_icons() {
?>
<style type="text/css" media="screen">
        #menu-posts-casestudy .wp-menu-image {
            background: url(<?php bloginfo(‘template_url’) ?>/images/admin-dashboard/casestudy-icon.png) no-repeat 6px -32px !important;
        }
        #menu-posts-casestudy:hover .wp-menu-image, #menu-posts-casestudy.wp-has-current-submenu .wp-menu-image {
            background-position:6px 0px !important;
        }
        #icon-edit.icon32-posts-casestudy {background: url(<?php bloginfo(‘template_url’) ?>/images/admin-dashboard/casestudy-32×32.png) no-repeat;}
    </style>

<?php }
add_action( ‘admin_head’, ‘casestudy_icons’ );
?>[/php]

The code above assumes you already have a custom post type named casestudy.

Replace “casestudy” in lines 06, 09 and 12 with the name of your custom post type.

Lines 06 to 08 define the icon for the normal state and line 07 manipulates the graphic pulling the sprite out at a pixel location offset of horizontal=6px and vertical=-32px.

This basically shoves the original graphic 6 pixels to the right (for the admin dashboard alignment) and up by 32 pixels to get the grey version of the sprite icon.

Lines 09 to 11 do the same for the hover effect, this time with a vertical pixel offset of zero, to get the top coloured sprite icon.

Line 12 is an added bonus touch and defines a separate larger 32×32 icon for the post index which will appear at the top next to the custom post type name when displaying all posts in the dashboard.  This is only available from WP 3.1 and above.

The 32×32 graphic file being used (without the border) is placed in the current theme at this file path /images/admin-dashboard/casestudy-32×32.png.

Once the image files are in place and the code saved in your functions.php file, your custom post type will have a new set of menu icons in the dashboard.

Let us know what other WordPress tips and tricks we can help you with.

Dublin WordPress

If you live in and around Dublin and use WordPress as a blogger, developer, designer, trainer, business venture etc, come and join us on the last Thursday of every month at the Bull & Castle (next to Christ Church) from 6.30pm onwards.

More details at http://www.meetup.com/Dublin-WordPress/

Keep In Touch

Wil

Wil is a dad, consultant, developer, conference organiser, speaker and business mentor. He co-organizes the WordPress Sydney meetup group and has been on the organising committee for WordCamp Sydney since 2014. He speaks at many special events and contributes to the WordPress open source project. His likes are chillies, craft beer and electrogravitics.