Latest Tech and Tips

How to Add Icons for Custom Post Types in WordPress


Ever asked yourself how you could add custom icons for your custom post types in WordPress? If so, after that you’re in the ideal area. In this short article, we will certainly reveal you how to add icons for custom post typesin WordPress

WordPress began utilizing a symbol font style called Dashicons considering that WordPress 3.8. These font icons look terrific on any kind of gadget or display dimension. Well, you can utilize these icons to designate custom icons to your post types.

Video Tutorial

Subscribe to WPBeginner

If you do not such as the video clip or require even more directions, after that proceed analysis.

Adding Custom Post Type Icons utilizing a Plugin

First point you require to do is set up as well as trigger the CPT Custom Icon plugin. Upon activation, just go to Settings” CPT Custom Icon Settings where you will certainly see your custom post types detailed. Next, click the ‘Choose icon’ switch following to a custom post kind and after that pick a font style from the food selection.

Choosing a font for your custom post type using a plugin

Adding Icons utilizing Custom Post Type UI Plugin

If you’re brand-new to signing up a custom post kind, after that we advise that you make use of Custom Post Type UI plugin to develop as well as handle custom post types as well as taxonomies.

Adding a symbol to a custom post kind produced with CPT UI plugin is really straightforward. It sustains Dashicons by default, so initially you require to go to the Dashicons website as well as pick the symbol you desire to usage for your post kind.

Copying an icon class from Dashicons website

Clicking on a symbol in the checklist will certainly reveal a bigger variation of the symbol on the top. Next to it, you will certainly see the symbol’s CSS course. It will certainly be something like dashicons-groups, dashicons-calendar, dashicons-cart, and so on You requirement to duplicate the CSS course as well as modify the custom post kind you desire to edit in CPT UI. All you require to do is click the Advanced Options web link as well as scroll down to the Menu Icon area, after that paste the CSS course as well as conserve your adjustments.

Adding font icon in custom post type UI plugin

You can likewise develop a picture symbol on your own as well as post it by clicking Media”Add New After the upload, click the Edit web link as well as duplicate the picture data URL. Now just paste this URL in the food selection symbol area in CPT UI setups.

Manually Adding Icon to a Custom Post Type

If you produced a custom post kind by positioning a code in your site-specific plugin or functions.php data, after that you can add food selection icons by hand. Once once more just go to to Dashicons site to pick a symbol as well as duplicate the CSS course. After this add it to your custom post kind code such as this:

' menu_icon' => > 'dashicons-cart',.

You can likewise add the complete URL of a picture data you desire to show as symbol, such as this:

' menu_icon' => > '',

Here is a complete code bit that produces a custom post kind called items with a food selection symbol:

//Register Custom Post Type
feature custom_post_type() {

$ tags = variety(.
' name' => > _ x( 'items', 'Post Type General Name', 'text_domain' ),.
' singular_name' => > _ x( 'Product', 'Post Type Singular Name', 'text_domain' ),.
' menu_name' => > __( 'Products', 'text_domain' ),.
' parent_item_colon' => > __( 'Parent Item:', 'text_domain' ),.
' all_items' => > __( 'All Items', 'text_domain' ),.
' view_item' => > __( 'View Item', 'text_domain' ),.
' add_new_item' => > __( 'Add New Item', 'text_domain' ),.
' add_new' => > __( 'Add New', 'text_domain' ),.
' edit_item' => > __( 'Edit Item', 'text_domain' ),.
' update_item' => > __( 'Update Item', 'text_domain' ),.
' search_items' => > __( 'Search Item', 'text_domain' ),.
' not_found' => > __( 'Not located', 'text_domain' ),.
' not_found_in_trash' => > __( 'Not located in Trash', 'text_domain' ),.
$ args = variety(.
' tag' => > __( 'Products', 'text_domain' ),.
' summary' => > __( 'Post Type Description', 'text_domain' ),.
' tags' => > $tags,.
' assistances' => > variety( ),.
' taxonomies' => > variety( 'group', 'post_tag' ),.
' ordered' => > incorrect,.
' public' => > real,.
' show_ui' => > real,.
' show_in_menu' => > real,.
' show_in_nav_menus' => > real,.
' show_in_admin_bar' => > real,.
' menu_position' => > 5,.
' menu_icon' => > 'dashicons-cart',.
' can_export' => > real,.
' has_archive' => > real,.
' exclude_from_search' => > incorrect,.
' publicly_queryable' => > real,.
' capability_type' => > 'web page',.
register_post_type( 'Products', $args );.


// Hook right into the 'init' activity.
add_action( 'init', 'custom_post_type', 0 );.

We wish this short article aided you add icons for your custom post typesin WordPress You might likewise desire to look into how to make use of symbol font styles in WordPress post editor.

If you liked this short article, after that please subscribe to our YouTube Channel for WordPress video clip tutorials. You can likewise discover us on Twitter as well as Google+.