October 12th, 2010

WordPress Custom Post Type Icons – Fugue Edition

The best new feature in WordPress 3.0 has to be the ability to easily create custom post types. After you’ve created your post type you’ll see it show up in the admin menu with the same “pin” icon as the Posts menu has. This isn’t a huge deal, but it also isn’t difficult to change the icon as long as you have icons to use.

So, thanks to Yusuke Kamiyamane’s great Fugue icon set, I’ve created a sprited icon set made to match the WordPress admin icons. Just add the icon you want into your parent theme’s images folder and add a piece of code to the functions.php file and you’re done.

Update: Please make sure to read Jeff Rose’s comment below. Basically, in the video, I tell you that if you use underscores in your custom post type that WordPress strips these out. Well in 3.2, it no longer does. This means that the CSS will break, so you’ll just need to add the underscores back in from now on.

Download

Functions.php code

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

How to Use

Asides
1) I say “plugin” in the video and obviously mean “icons”.
2) I added an extra snippet of CSS to make sure the highlighted icon stays lit when the menu is dropped down. This isn’t shown in the video, but just remember to update POSTTYPE everywhere you see it.
3) It’s best practice to name your custom post types something more obscure. So instead of “robot” use something like “yourinitials_robot” or “yourcompanyname_robot”. Hat tip to Randy Hoyt.

Follow Me On Twitter