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

http://twitter.com/WordImpressed Devin Walker

Nice article, and cool looking site!
Anonymous

This is awesome!
http://randyjensenonline.com randyjensen

Thanks Devin!
http://www.johnpbloch.com/ John P. Bloch
Or you could learn how to program the post type yourself and just add the image yourself when you register the post type:

http://phpxref.ftwr.co.uk/wordpress/nav.html?wp-includes/post.php.source.html#l820
```
register_post_type( 'foobar', array( 'menu_icon' => bloginfo( 'template_url' ) . '/images/image.jpg' ) );
```
Faster, simpler, and you also get the semi-opaque-except-on-hover effect that all the other menus have, all right out of the box.
http://randyjensenonline.com randyjensen

Sure, you could just create the post type yourself and use the lame 60% opacity that’s automatically put on it. But this is about not being lame.
http://www.johnpbloch.com/ John P. Bloch

Ha. Enjoy your not so lame but definitely broken icons when they change the class naming structure in the admin area (which happens almost every release cycle).
http://randyjensenonline.com randyjensen

Unlikely they would change the ID’s, but if that happens, changing the CSS isn’t hard. This is for people who care about design. I guess if you don’t like the implementation, don’t use it
http://randyhoyt.com/ Randy

@JohnPBlock – I use the register_post_type() function to register the post types, but I wished that the icons could change from greyscale to color on hover like the default WordPress icons.

@randyjensen – Thanks for making all these custom icons available in sprites that can easily match the backend of WordPress.
Twentybs

I think you would actually want to use:

‘menu_icon’ => get_bloginfo( ‘stylesheet_directory’ ) . ‘/images/image.jpg’

the ‘get_bloginfo’ is for use in PHP and the ‘stylesheet_directory’ will make sure it’s using the current theme’s location, even if it is a child theme.
http://Uniondesign.ca David

It’s always bugged me that the menu_icon arguement gives you a cobbled icon with no highlight and that stupid translucency applied. Ive been meaning to look into the CSS involved in order to create a PROPER menu icon. So this is much apprecited.
http://randyjensenonline.com randyjensen

Ya. The opacity was a good middle ground for the dev team but I think, but I definitely want more control. Glad you found it useful.
http://twitter.com/kumbi kumbi madzinga

brilliant result! just goes to show how a little detail can improve admin #usability -especially if you’re deploying #wordpress for a third party
Mattias Svedhem

These are excellent! Thanks a lot!
Pingback: wpmag.com - WordPress News, Themes, Tutorials, Plugins, Questions, ...
http://twitter.com/Jtsternberg Justin

Quick question… What do you recommend for changing the icon on the post edit screens? (the big version of the icons) and does this icon file include the bigger versions?
http://randyjensenonline.com randyjensen

If you check out the original icon set (http://p.yusukekamiyamane.com/) he has some of the icons that are the perfect size for the edit screen. I didn’t bother with those since he didn’t have icons for all of them and since distinguishing items in the left nav was the primary goal.
http://sacrebleuwine.com/ Sacre Bleu

Your blog rocks!
Rein Aris

Thanks for this clear article, the icons are nice and easy to use!
http://www.facebook.com/cluddy Conor Luddy

Thanks!!! Great find!!
http://www.dietmarhartje.de Dietmar

Thanx for this, now custom post types are really fun!
Pingback: WordCamp Austin 2010 | Pixelita Designs
http://leoplaw.wordpress.com/ Leo Plaw
But it would make your article more complete if you went the whole way and informed us how to change all of the icons for Custom Posts.
I don’t see any styles or ids that identify the current Custom Post I am editing. I will have to search further.
Pingback: Blog Salad | WordPress Custom Post Type Icons
http://twitter.com/WordPressDave Dave Mason

Nice… thanks….
http://twitter.com/WordPressDave Dave Mason

Thanks…. good work…
http://twitter.com/destos Patrick Forringer

I’ve written a little class that aids in the creation of custom post and have integrated your icons along with the technique. Currently its just for personal use but may be useful for others.
https://github.com/destos/wp-post_type-class
http://randyjensenonline.com randyjensen

This is great. Thanks!
Pingback: Custom Icons for Custom Post Types in WordPress | Photoshop Template, How to & Code
http://sillybean.net/ Stephanie Leary

Thanks for this! I love it.
http://www.marcfalk.com marcfalk

Insane! Thank you.
Sam

This is the best thing I have EVER found on the interwebness…. brilliant! Thank you a thousand times over!
http://twitter.com/closemarketing David

Really nice!
http://twitter.com/jeffrose Jeff Rose

Just a heads up to everyone using this. If your custom post type contains an underscore, this method will break soon.

The sanitize_html_class function was stripping out underscores in the class names. As of 3.2beta1, this is changed and underscores are allowed, thus changing the name of the class here.

my_cpt_name would be #menu-posts-mycptname in 2.8 – 3.1, but would revert to #menu-posts-my_cpt_name in 3.2
http://randyjensenonline.com randyjensen

Jeff, thanks for this! I’ve added an update above and a link to your comment.
Massimo

Great Job, Thank You
Pingback: Simplifier l’usage de la console d’administration des custom post types de WordPress | Here With Me
Benjamin Knight

No sports icons?
Benjamin Knight

No sports icons?
http://boylecreations.com Aidan Boyle

I was using the built in array option for a while, and will probably continue to but sometimes it didn’t show properly and got a little wonky and this seems to have taken care of that for the moment. If i research it further I’m sure I can figure out what’s wrong but its worth mentioning that there is a line of code you can put in when programming a new custom post type in manually to display the icon of choice. I tend to build them in myself so that I don’t have to rely on a plugin when my installation updates.
That line of code should be:’menu_icon’ => get_bloginfo(‘template_url’).’/images/favicon.ico’,that goes into your array information when registering the post types support.

On a side note your posted method also works for sites that don’t use the plugin ( like mine ), and this icon list is fantastic. Thanks very much!
http://randyjensenonline.com randyjensen

Yep, you can definitely use menu_icon, but it’s a bit more limited since it only applies the default opacity WP uses out of the box. It’s more future proof, but if you’re more design focused, it’s just too limited.
Mk

Thank you v much!:)
Pingback: WordPress Custom Post Type Icons – Fugue Edition « Randy Jensen Online | the Beard of Inspiration
http://gege.re Jason Gegere

That’s a great collection of icons!
Pingback: http randyjensenonline com thoughts wordpress custom post type… « WordCamp LA LIVE
Anonymous

Thanks very much for these… pedantic question, sorry, but have you released these under a particular licence (creative commons, GPL, etc) and are they available for commercial use (e.g. if I’m paid to create a plugin or theme can I use these)?
http://twitter.com/nostromo Marcel Bootsman

Thanks!! Very nice collection. My clients wil be happy!
Catalin

I get a: “Warning: Cannot modify header information – headers already sent” error when having this in my functions.php.
Is this normal? (WP version 3.2.1)
http://randyjensenonline.com randyjensen

Sounds like you have some white space in your function.php file. Look around for a place where you’re closing the PHP and re-opening it. Like this:

?>

<?php

Either don't close and re-open or just remove all whitespace.
Catalin

Worked. Thank you.
Pingback: Wordpress CCK – Quite close to Drupal | Morgan Leek