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

So we all know WordPress 3.0 ships with a shiny new theme called Twenty Ten. You probably also know that this theme is "HTML5" ready. What does that mean? Not much. Basically that the code validates and the doctype is the new HTML5 doctype. No <header>, <footer>, <asides>, etc to be found (understandably). So I decided to take the theme and make it as HTML5-ified as possible.

My goal was not to rewrite the theme or take out the bloat or create something you should use in production in lieu of the stock theme, but just to try and get a better handle on how we as developers are going to be writing markup in the near future. I really see this as a way for the community to give input as to how, say, the <asides> tag should be used. Or maybe whether the author section should be wrapped in its own <section>.

Even though this will obviously be WordPress-theme-centric, its purpose is to get a better handle on writing HTML5 markup for any site.

I’ll be updating the theme based on the feedback I get – Leave a comment below or hit me up on Twitter @randyjensen. Again, I’m really curious to see how each person interprets each tag and its purpose. This is a place to openly discuss HTML5′s new tags and how they should or should not be used.

<Asides>

Thanks to Mark Pilgrim for his Dive into HTML5 book
Also thanks to Randy Hoyt for double checking the code
And if you’re looking for an awesome HTML5 WordPress starter theme, Ian Stewart has you covered.

Follow Me On Twitter

This post is password protected. To view it please enter your password below:

Password: