Using WordPress 3.8 Icons for your Custom Post Types in the Admin Menu

All of the admin UI changes coming in WordPress 3.8 (and available now via MP6) are really exciting. What’s really great is to discover that the new icons are packaged as an icon font and loaded by default in the admin, which means we can fairly easily utilize these icons with a little markup and CSS. I’m mostly interested in using these icons for my custom post types, as pushpins just really don’t do it for me.

New Options for menu_icon

New to WordPress 3.8 are some options for the menu_icon argument of the register_post_type function. We can now pass any of the following in the menu_icon argument:

  • the url of an image to be used for the icon
  • a “dashicons” helper class (e.g. “dashicons-calendar”) – new in 3.8
  • a base64-encoded SVG using a data URI string – new in 3.8
  • ‘none’ (an empty string will also work, as we’ll see below)

Both of the new options have very enticing potential. Unfortunately I have not been able to get either option to function as expected with the nightly build. Thankfully, it’s really not hard at all to add these new icons to our menu via another method, which works now with MP6 and will continue to work once 3.8 is released.

UPDATE: As of WordPress 3.8 RC2, the new options work! So you could skip all the following, and just got to http://melchoyce.github.io/dashicons/ to find an icon you’d like and use the “dashicons” option.

UPDATE: I have found that the SVG option has very inconsistent results. Sometimes the icons are mis-sized, and sometimes they do not recolor properly. (They remain black and/or do not change color on hover.) Even when they do recolor properly, oddly, they do so very sluggishly on hover. I have not been able to determine what causes this, and am favoring enqueueing icon fonts in the admin rather than using SVGs.


Step 1: Give our custom post type menu items a custom CSS class

Custom post type menu items by default are given the class “menu-icon-post”, which gives it the default pushpin icon. However, you can simply pass an empty string in the menu_icon argument, and a custom icon class will be added to the menu item. So, when registering an “Events” post type, adding ‘menu_icon’ => ‘’ will result in the menu item being given the class “menu-icon-events”. This allows us to quite easily alter the icon used.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28
<?php
function create_events_cpt() {
register_post_type( events,
array(
public => true,
has_archive => true,
menu_position => 5, // places menu item directly below Posts
menu_icon => ,
labels => array(
name => __( Events ),
singular_name => __( Event ),
add_new => __( Add New ),
add_new_item => __( Add New Event ),
edit => __( Edit ),
edit_item => __( Edit Event ),
new_item => __( New Event ),
view => __( View Event ),
view_item => __( View Event ),
search_items => __( Search Events ),
not_found => __( No Events found ),
not_found_in_trash => __( No Events found in Trash ),
parent => __( Parent Event ),
),
)
);
}
add_action( init, create_events_cpt );
view raw events.php hosted with ❤ by GitHub

Step 2: Add a little CSS to the admin head

Now we just need to add a little CSS to the admin area. But first, we need to know what icons we want to use from the icon font, and what their character assignments are.

Dashicons screenshot

The new dashicons can be found at http://melchoyce.github.io/dashicons/. On that page, click the icon you would like to use, then click the “Copy CSS” link in the header. It will provide code like content: "f145";. That is all you’ll need. Now add the following to your functions to print the needed style in the admin header:

1 2 3 4 5 6 7 8 9 10 11 12 13 14
<?php
function add_menu_icons_styles(){
?>
<style>
#adminmenu .menu-icon-events div.wp-menu-image:before {
content: \f145;
}
</style>
<?php
}
add_action( admin_head, add_menu_icons_styles );
view raw admin-head.php hosted with ❤ by GitHub

Success!

Screenshot 2013-12-08 19.15.09All set. Of course this would be much easier with the new menu_icon options, then all we’d have to do is add 'menu_icon' =&gt; 'dashicons-calendar' to our post type registration.

I’m sure they’ll sort out those new options soon. I’ll update this post as I monitor progress.

Reference

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s