WordPress Custom Post Type Icons

wordpressLogoSoloThe 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

Download the WordPress Custom Post Type Icons

Functions.php code (WordPress 2.8 and above)

Functions.php code (Less than WordPress 2.8)

How to Use

Asides
If you want to check for a specific WordPress number, you can use “if (get_bloginfo(‘version’) >= 2.8)”

Follow Me On Twitter

  • 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! :P

  • 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

  • Neil

    Nice, thanks for that!

  • http://codigoadicto.com/ Anthuan Vasquez

    Great thanks!.

  • user

    thanks

  • Pingback: Attracto WP – Responsive Theme | themesafe

  • http://kennylandes.com Kenny Landes

    This is so great. Thanks! I wrote a loop into the function to do this for any number of custom post types where the custom post type name and the image name are the same. Easy!

    // CSS for custom post type icons where $types = the post type and the identical image name. Icons live in /img/cpt-icons/

    add_action( ‘admin_head’, ‘cpt_icons’ );

    function cpt_icons()

    {

    $types = array(‘bugs’, ‘birds’, ‘beasts’, ‘fishes’, ‘aliens’, ‘planets’, ‘universes’);

    foreach ($types as $type)

    {

    ?>

    #menu-posts- .wp-menu-image {

    background: url(/img/cpt-icons/.png) no-repeat 6px -17px !important;

    }

    #menu-posts-:hover .wp-menu-image, #menu-posts-.wp-has-current-submenu .wp-menu-image {

    background-position:6px 7px!important;

    }

    <?php

    }

    };

  • Pingback: Star Themes | LikeThis WordPress Theme

  • Pingback: Attracto WP – Responsive Theme Free Download Nulled Torrent | Crunchy Themes

  • Pingback: LikeThis WordPress Theme Free Download Nulled Torrent | Crunchy Themes

  • Pingback: Attracto WP – Responsive Theme | Website Templates

  • Pingback: Attracto WP – Responsive Theme | Website Templates

  • Pingback: LikeThis WordPress Theme | Website Templates

  • Pingback: LikeThis Wordpress Theme | Scripts CodeCanyon

  • Pingback: Attracto WP – Responsive Theme | Scripts CodeCanyon

  • Pingback: LikeThis WordPress Theme