How to Use Dashicons in WordPress Theme or Plugin

By . Filed in Wordpress

Along with the revamped WP-Admin, WordPress 3.8 also brought a set of brand new icons called Dashicons. Dashicons is a font icon designed by Mel Choyce that was created primarily to accommodate the new WP-Admin UI, from the Content Screen Editor to the Administration Menu, as you can see in the screenshot below.

As WordPress now uses it to deliver icons in WP-Admin, you should also use it in your themes and plugins. By using a font icon set, like Dashicons, you can easily customize the output through CSS. If you are a developer who want to update your plugins or themes, according to the latest WordPress design as well as using its new properties, this article is definitely for you.

Dashicons in Administration Menu

Assuming that you incorporate Custom Post Type into your theme or plugin, you can use Dashicons in the following way. Custom Post Type uses menu_icon to display the icon. Prior to WordPress 3.8, you can add your image icon path in it. In version 3.8, this parameter can also be used to declare the icon from Dashicons.

First, visit Dashicons website. Click one of the icons. You can see that the selected icon is reflected on the header and it displays the icon’s name with options to copy it in several formats: CSS, HTML, and Glyph.

Copy the icon’s name, and add it in the menu_icon of your Custom Post Type function, like so. Note that I’ve stripped out the code in order to keep this article shorter. The full length of code can be found here.

$args = array(
	'label'               => __( 'book', 'book' ),
	'description'         => __( 'Post Type Description', 'book' ),
	'labels'              => $labels,
	'supports'            => array( ),
	'taxonomies'          => array( 'category', 'post_tag' ),
	'menu_position'       => 20,
	'menu_icon'           => 'dashicons-book',
	'capability_type'     => 'post',
);

In this example, I’ve created a Custom Post Type for posting Books. And as you can see below, the book icon appears beside it.

Menu Page

Plugins may also use add_page_menu function to add an Administration Menu. For this case, you can simply specify the Dashicons icon name as the sixth parameter. In the following example, we will display the “wrench” icon in our Options page.

function hkdc_custom_menu_page() {
    add_menu_page( 
    	'Options Page', 
    	'Options', 
    	'manage_options', 
    	'myplugin/option.php', 
    	'', 
    	'dashicons-admin-tools', 81 
    	);
}
add_action( 'admin_menu', 'hkdc_custom_menu_page' );

Head over to WP-Admin, and you should see the icon as shown.

The Fallback

Never assume that all your users will update to the latest WordPress. In some cases, they don’t. They may have installed a plugin to turn off automatic updates. So, it is necessary to provide a fallback that support older WordPress version. If we don’t, the icon side will appear as a broken image (like what happens in this image, next to Books).

Before proceeding, ensure that you have placed the image icon in your theme or plugin directory. Then, we can specify the icon with a conditional function, as follows:

First, we set the default, which is using the Dashicons.

$icon = 'dashicons-book-alt';

And we replace the $icon variable’s value if it is in WordPress 3.7 and below.

if( version_compare( $GLOBALS['wp_version'], '3.8', '<' ) ) {
	$icon = get_template_directory_uri() . '/extra/img/book-brown.png';
}

Replace the icon paramater in Custom Post Type (as well as in add_menu_page function) with the $icon variable.

$args = array(
		'label'               => __( 'book', 'book' ),
		'description'         => __( 'Post Type Description', 'book' ),
		'labels'              => $labels,
		'supports'            => array( ),
		'menu_position'       => 20,
		'menu_icon'           => $icon,
	);
register_post_type( 'book', $args );

And we are done. It will use Dashicons for WordPress 3.8, while displaying the “image” icon in older versions.

Author:

Thoriq is a writer for hongkiat.com. He has been dabbling in Web Design for 7 years and appreciates the giving nature of the web design community at large. He loves trying new things in CSS3 and HTML5. Apart from writing on hongkiat.com he also maintains creatiface.com.

Tags:

Advertisement

Comments are closed. Contact Us.