WordPress 3.8 was primarily built to enhance the UI (user interface) of the WordPress dashboard area. Most importantly, this WordPress version has introduced dashicon what’s known as icon font, also referred as MP6 menu icons for the WP admin section. The icons are not images but vector based flat icons that can be enlarged or minimized according to your needs without compromising on the quality. Adding dashicons offer benefits such as support for Retina devices and faster load time.
WP now uses the dashicons to customize the icons in the WP admin area. You can even use it in your WP themes and plugins. In case you’re a developer and looking forward to customize your themes or plugins in accordance to the latest WordPress design trends, then I’ll recommend you to read this post carefully.
How to Use Dashicons As Administration Menu Icons?
Let’s suppose you incorporated custom post types into your theme or plugin, now to learn about the ways to add Dashicons you’ll have to abide by the following ways.
Step 1
Go to the Dashicons website, you will see a page as shown in the screenshot given below:
8 WordPress Plugins to Enhance Image Quality
From the site you will be able to find all type of dashicons that can be used within WordPress.
Step 2
Now, click on any one of the Dashicons you are yearning to add in the administration area. As soon as you’ll click on the icon, you’ll see an enlarged view of the icon on top of the page along with the links to copy the icon in several formats – CSS, HTML and Glyph.
Beginners Guide to WordPress What NOT to do!Step 3
Click on the Copy HTML link. You will see a window with HTML code will appear as shown in the image below:
Now just copy-and-paste the code in your HTML file.
25+ Awesome Collection Of Free WordPress ThemesFor example, if you created a custom post type for books, then you will have to select the Books dashicon. After selecting the icon copy-and-paste the code for that particular icon, then you’ll get the following result:
How to Add Dashicons When Using Menu Page?
At times plugins often use add_page_menu function to add the admin menu. In such a case, to change the icon of your custom post type you’ll need to specify the Dashicon name you want to use as the 6th parameter, as shown in the code below that will help display the “wrench” icon in your WP options page.
10 Must Have WordPress Plugins for Amateur Web Designers[php]
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’ );
[/php]
After writing the code visit your WP-Admin area, and you’ll see the icon as shown in the screenshot below:
How to Display Image Icon for the Older WP Version?
Did you saw a broken image icon? Well, it can be possible in case you’re using some older WP version. Most of the people (though not all), often don’t update their WP version. One of the one main reason behind this fact can that they might have added a plugin that turns off automatic updates. In such as case it becomes necessary to provide a replacement that support WP old versions. Not doing so will make the icon side appear as a broken image. For example, look at the image as follows:
that you’ve embeded the image icon in your WP theme or plugin directory. Once you’ve completed this step, you can mention the icon with a conditional function, as shown below:
Step 1:
In the first step, set the default icon which is using the Dashicons.
[php]
$icon = ‘dashicons-book-alt’;
[/php]
Step 2:
Here replace the $icon variable’s value whether it is in WordPress 3.7 version, or any other older version.
[php]
if( version_compare( $GLOBALS[‘wp_version’], ‘3.8’, ‘<‘ ) ) {
$icon = get_template_directory_uri() .
‘/extra/img/book-brown.png’;
}
[/php]
Now, put $icon variable in place of the icon parameter in Custom Post Type.
[php]
$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 );
[/php]
That’s it! Now your custom post type will make use of the Dashicons in WordPress 3.8 version and will display image icons in the older WordPress versions.
Conclusion
So, if you want to understand the concept of Dashicons and how to add these icons in your WordPress themes or plugins, then this post is the definitive guide that I’ll advise you to follow.
