WordPress Custom Post Type Icons – Fugue Edition

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

Posted in: Design, WordPressTags: icons

Jared

You can also do this in a plugin by changing the image URL (if the image is in your plugins folder) from this:
background: url(/images/YOURIMAGE.png) no-repeat 6px -17px !important;to this:background: url() no-repeat 6px -17px !important;Just commenting in case somebody was wondering how to do this.
Jared

Well that comment didn’t work. Here it is again:

To do this in a plugin just do:

background: url( no-repeat 6px -17px !important;
Jared

Oh apparently I can’t post PHP code, sorry!
http://danielmartins.eti.br/blog Daniel Martins

Nice!… I created a hg repository just to make easy to use this icons across lot of projects.. see it: https://bitbucket.org/danielmartins/cpt-icons/overview

Thanks!
Anonymous

Thanks very much… I really needed this.
Waretz

I’m confused. I have downloaded the Yusuke Kamiyamane icons but do not see the grey version of the icon (inactive), stacked on top of the color one (active) like in your example. Therefore, when not hovering, no icon is displayed.
http://randyjensenonline.com/ randyjensen

Sounds like you downloaded his icon set. There is a download button above that you need to be click.
Jaypee

Hi there, great tutorial…I’m facing a problem though trying to implement this, and my problem is that I get the icon working perfectly but I also get the white screen of death when I update any post, page or any other thing on my backend. Maybe I’m pasting the code wrong? Not sure,
thanks in advance for any help you can provide me.
Best.
http://randyjensenonline.com/ randyjensen

99% of the time this happens when there’s extra whitespace in the functions.php file. Check around for where you’re opening and closing PHP () and make sure there isn’t any extra space anywhere.
Jaypee

Thanks man! I’m checking my functions.php now, when I remove this code the backend works fine, so the blank space might be within this code? Checking now, thanks again.
moria

Thanks for the icon set. Looks really great. Is there any icon32 version for this? thanks!
Testpost

test post delete it
http://twitter.com/_jamesbanks James Banks

Thanks for this! 3000 icons for free is extremely generous. Will be putting them to good use.
http://www.code-pal.com/ Sumeet Chawla

This is awesome stuff.. thanks for creating such a nice wordpress html5 starter theme too! :)
http://twitter.com/julien_c julien_c

The WP integration and spriting are great, but I think some of these icons could use a little more polish to really blend in with the WordPress admin look’n'feel. I’ve written a post on this very subject here: http://julien-c.fr/2012/07/wordpress-admin-icons/
http://twitter.com/ron_sparks Ron Sparks

again this is great! enough said
http://twitter.com/jaredatch Jared Atchison

Any plans to include @2x copies for retina?
http://randyjensenonline.com/ randyjensen

Unfortunately, since I didn’t create the icons themselves, there’s not much I can do.

If Yusuke updates them for retina I’d be happy to update the code.
Rachel

hi there!

i know there haven’t been any comments on here in a year, but I am hoping for some feedback as i’m struggling to implement this code.
i have checked it over several times and it’s definitely all correct, the images are being referenced correctly, but the icons are not showing. the styles in the functions file just aren’t being picked up.

anything anybody can suggest?
i am on a multi-site setup, does that affect this at all?

thanks!
Rachel

whoops, just reordered the posts and there have been comments in the last few weeks – sorry!
hope someone can help
Guy Barry

Hi, thanks very much indeed, but there are no 32px icons for this set? Pity if not
Chris Mower

Holy. Flipping. Cow. I can’t believe how many icons were in that thing. Still flabbergasted. I was expecting 20, instead I got 3,000… sprites. Very cool resource. Thanks.
mattoc4

Thanks for these!
I just started using Custom Post types and this has helped a lot