12 Days of XHTML: Revisited

Never quite got around to finishing my free downloads & code snippets for my 12 Days of XHTML series, what with the festivities just getting too wild, but here it is, the final installment, and just in time for Easter!

WordPress Custom Post Type Icon Templates

a portion of the WordPress admin navigation bar
Note my custom image to the left of my custom post type, "Slides"

With WordPress 3.0 came the ability to create custom post types. I’m not about to go into what custom post types in WordPress are, but simply put: they’re an awesome extension that makes WP super flexible. Want to know more? Justin Tadlock explains them perfectly. Ok, so assuming you’re now fully aware of what custom post types in WordPress are…let’s move onto how to customize the WordPress navigation menu item for your own custom post type in the WP admin area.

How to Setup Your Own Custom Post Type Icon in WordPress

  1. Firstly, download the handy Photoshop Template I’ve created here, or using the big pretty box below.
  2. Open that up in Photoshop, and you’ll see two layers, one for the black and white version of the icon (the “off” state), and one for the color version of the icon (it’s “on” variation). You can delete what I have in each layer (I use this icon for a common custom post type I use called “Slides”) and add your own images here. Create whatever you want, but remember to keep the color version of the icon above the top blue Photoshop guide, and keep the black and white version below the bottom guide. My icon is 1 pixel shorter than the maximum allowable area.
  3. Once you’ve created your icon, go to File > Save for Web and save the image as a PNG. I like PNG-24, personally, and you’ll want to make certain you have transparency on, for best results.
  4. Upload the file to your server, noting the URL where the file exists.
  5. Ok, now for some coding. Back at Justin Tadlock’s site, he provides some code for basic addition of an icon, that looks like this:'menu_icon' => get_stylesheet_directory_uri() . '/images/super-duper.png',But simply using that code will get you into some trouble with rollovers in various states of the menu in the WP admin backend. Or in other words, it doesn’t exactly work correctly. So if you’ve created your custom post type using this parameter, delete that parameter.
  6. Now we’ll use some code I got from Randy Jensen’s website. That code is reiterated here for ease’s sake, but I encourage you to check out Randy’s site as well, since he may have updated versions of this code throughout time. Me, I’ll never touch it again. 🙂 Copy and paste the following code into your theme’s functions.php file.

    <?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 } ?>

  7. Ok so what Mr. Jensen’s code does is inject some CSS into your WordPress administrative area. You’ll want to change all instances of POSTTYPE in the code above with your own post type’s CSS declaration (which can be found via View Source or a Webkit/Firefox Inspector of the actual admin pages).
  8. Also, be sure to change the /images/YOURIMAGE.png URL reference in that code with that of your actual icon. The bloginfo(‘template_url’) points directly to your theme’s directory, so depending on where you have the icon on your server, you may or may not want to change this as well.
  9. Save the functions.php file, and you should be good to go!

And that’ll do it. Any questions? Feel free to pop off a comment, I don’t get many of those these days.

Download the Custom Post Type Icon Template (PSD, 56kb)

Up Next: More on Homeland Healthcare from the Pittsburgh Post Gazette