Custom Post Type Admin Icons

Let’s face it, its pretty awesome having the ability to add a custom icon to your admin menus for custom post types. Here is a bit of code we added to the function.php file of our theme for a recent project. ¬†All you need to do is drop your custom icons in the images directory of you theme and tweak the code below. “Newsletters” and “Events” are the names of our 2 custom post types for this project.

add_action( 'admin_head', 'cpt_icons' );
function cpt_icons() {
    ?>
    <style type="text/css" media="screen">
		#menu-posts-newsletters .wp-menu-image {
            background: url(<?php bloginfo('template_url') ?>/images/mail.png) no-repeat 6px -17px !important;
        }
		#menu-posts-events .wp-menu-image {
            background: url(<?php bloginfo('template_url') ?>/images/calendar-blue.png) no-repeat 6px -17px !important;
        }
		#menu-posts-newsletters:hover .wp-menu-image, #menu-posts-newsletters.wp-has-current-submenu .wp-menu-image,
		#menu-posts-events:hover .wp-menu-image, #menu-posts-events.wp-has-current-submenu .wp-menu-image {
            background-position: 6px 7px!important;
        }
    </style>
<?php }

You can find a sweet collection of icons and further direction at RandyJensenOnline.com.

Check out these comments...

  1. Hi there, great post!
    The icon works perfectly but I’m having an extra problem, I now get the white screen of death when updating any post, page, or any other thing.
    I know that is happening because something is wrong on functions.php, maybe I’m pasting the code in the wrong place? Not sure.

    Thanks in advance for any help.

    PS: running 3.3.1

    Best!

  2. Juan on April 9th, 2012
  3. It’s a lot easier to echo a link to a css file and then manage all the custom admin styles through that css file.

  4. Erik on September 12th, 2012

You diggin' our post? Leave a comment and let us know...