Using Dashicons For Custom Post Types
Dashicons are a built-in core set of font icons in WordPress that were introduced back in WordPress 3.8 when they did the massive backend UI redesign. These icons are used for the various links on the left-hand admin bar. However, they can also be used in your own custom plugins and themes, not only when defining custom post types or creating custom admin panels but also on the front-end theme design if you wish. The best part is that it’s very easy to use Dashicons for custom post types.
When you register a new custom post type in WordPress, all you have to do is set the menu_icon argument equal to the CSS classname of the Dashicon you wish to use. This icon will then be defined as the icon displayed on the left-hand side of your custom post type name in the WordPress admin panel. To choose a Dashicon, simply visit the Dashicons landing page and click on any icon you would like to use. You’ll see the classname at the top next to the icon, so you can easily copy and paste it into your code.
For example, if you want to register a new custom post type named Portfolio and use a specific Dashicon for it, you can use the following code:
“`
// Register a new custom post type named Portfolio
register_post_type( ‘portfolio’, array(
‘public’ => true,
‘menu_icon’ => ‘dashicons-portfolio’,
‘label’ => __( ‘Portfolio’, ‘local’ ),
) );
“`
By using Dashicons, your custom post type icons will match the default WordPress UI and look good.
Using Dashicons on the Front-End Theme Design
Many themes these days make use of icons on the front-end for things like post meta (date, category, tag, author) as well as header icons such as user, search, and shop icons. While FontAwesome is the most popular font icon set, it includes many icons that you may never use. An alternative is to use Dashicons, which is already included in your WordPress installation.
To load Dashicons on the front-end of your theme, simply add the following code to your theme’s functions.php file:
“`
add_action( ‘wp_enqueue_scripts’, function() {
wp_enqueue_style( ‘dashicons’ );
} );
“`
Now you can insert a Dashicon via HTML using the following code:
“`
“`
Simply change “menu” to the icon you wish to use. This HTML can be pasted anywhere in the theme where you want an icon displayed. You can even insert the HTML into your menu items by pasting the HTML right into your menu item’s “label” field.
How to Create a Dashicons Shortcode
Another solution for using Dashicons on the front-end is to create a shortcode that you can use anywhere on the site. This is a good option if you are making a site for a client and want to make it easier for them to insert icons without messing around with HTML.
To create a Dashicons shortcode, add the following code to your functions.php file:
“`
add_shortcode( ‘dashicon’, function( $atts ) {
$atts = shortcode_atts( array(
‘icon’ => ‘menu’,
), $atts, ‘bartag’ );
if ( ! empty( $atts[ ‘icon’ ] ) ) {
return ‘‘;
}
} );
“`
You can then use the shortcode in your content by specifying the icon you want to use. For example:
“`
[dashicon icon=”chart-pie”]
“`
Note: The shortcode assumes that you have already loaded the Dashicons stylesheet on your front-end. If you haven’t done that, you can add the “wp_enqueue_style” function from the previous code snippet right into the shortcode. However, it’s recommended to load the script globally to avoid any rendering issues.
In conclusion, Dashicons are a powerful tool for customizing your WordPress website. Whether you want to use them for custom post types or on the front-end theme design, Dashicons make it easy to add visually appealing icons to your site.
