New look of WordPress 3.8 admin is really exciting. I discovered that the new icons are packaged as an icon font and loaded by default admin the admin panel, so we use these icons with a little
css and markup. Here we use these icons for custom post type.
WordPress 3.8 Icons for your Custom Post Types in the Admin Menu.
There is a new option for menu_icon argument of the register_post_type function. We can pass any of the following argument in menu_icon.
- the url of an image to be used for the icon
- a “dashicons” helper class
- a base64-encoded SVG using a data URI string
Step 1 –
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.
[php]
$post_type_args = array(
‘labels’ => $labels,
‘singular_label’ => __(‘Event’),
‘public’ => true,
‘show_ui’ => true,
‘publicly_queryable’ => true,
‘query_var’ => true,
‘exclude_from_search’ => false,
‘show_in_nav_menus’ => true,
‘capability_type’ => ‘post’,
‘has_archive’ => true,
‘hierarchical’ => false,
‘rewrite’ => array(‘slug’ => ‘event’, ‘with_front’ => false ),
‘supports’ => $supports,
‘menu_position’ => 20,
‘menu_icon’ => ”,
‘taxonomies’ => $taxonomies
);
register_post_type(‘event’,$post_type_args);
}
add_action(‘init’, ‘register_event_posttype’);
[/php]
Step 2 –
Now we add some css in the admin head, But first go to http://melchoyce.github.io/dashicons/ and find the icon from the list that you want to use and click on the icon then click on “Copy CSS” in header, it will provide the code like content: "\f116";. Now add the following code into your theme’s functions.php.
[php]
<?php
function qt_add_menu_icons_styles(){
?>
<style>
#adminmenu .menu-icon-events div.wp-menu-image:before {
content: ‘\f145’;
}
</style>
<?php
}
add_action( ‘admin_head’, ‘qt_add_menu_icons_styles’ );
[/php]
Result:
And you are Done!!
