How to Add Icons for Custom Post Types in WordPress

If you don’t like the video or need more instructions, then continue reading.

Adding Custom Post Type Icons using a Plugin

First thing you need to do is install and activate the CPT Custom Icon plugin. Upon activation, simply go to Settings » CPT Custom Icon Settings where you will see your custom post types listed. Next, click on the ‘Choose icon’ button next to a custom post type and then select a font from the menu.

Adding Icons using Custom Post Type UI Plugin

If you’re new to registering a custom post type, then we recommend that you use Custom Post Type UI plugin to create and manage custom post types and taxonomies.

Adding an icon to a custom post type created with CPT UI plugin is very simple. It supports Dashicons by default, so first you need to visit the Dashicons website and select the icon you want to use for your post type.

Clicking on an icon in the list will show a larger version of the icon on the top. Next to it, you will see the icon’s CSS class. It will be something like dashicons-groups, dashicons-calendar, dashicons-cart, etc. You need to copy the CSS class and edit the custom post type you want to edit in CPT UI. All you need to do is click on the Advanced Options link and scroll down to the Menu Icon section, then paste the CSS class and save your changes.

You can also create an image icon yourself and upload it by clicking Media » Add New. After the upload, click on the Edit link and copy the image file URL. Now simply paste this URL in the menu icon field in CPT UI settings.

Manually Adding Icon to a Custom Post Type

If you created a custom post type by placing a code in your site-specific plugin or functions.php file, then you can add menu icons manually. Once again simply visit to Dashicons website to select an icon and copy the CSS class. After this add it to your custom post type code like this:

  'menu_icon'           => 'dashicons-cart',  

You can also add the full URL of an image file you want to display as icon, like this:

  'menu_icon'           => 'http://www.example.com/wp-content/uploads/2014/11/your-cpt-icon.png',  

Here is a full code snippet that creates a custom post type called products with a menu icon:

  // Register Custom Post Type  function custom_post_type() {    	$labels = array(  		'name'                => _x( 'products', '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 found', 'text_domain' ),  		'not_found_in_trash'  => __( 'Not found in Trash', 'text_domain' ),  	);  	$args = array(  		'label'               => __( 'Products', 'text_domain' ),  		'description'         => __( 'Post Type Description', 'text_domain' ),  		'labels'              => $labels,  		'supports'            => array( ),  		'taxonomies'          => array( 'category', 'post_tag' ),  		'hierarchical'        => false,  		'public'              => true,  		'show_ui'             => true,  		'show_in_menu'        => true,  		'show_in_nav_menus'   => true,  		'show_in_admin_bar'   => true,  		'menu_position'       => 5,  		'menu_icon'           => 'dashicons-cart',  		'can_export'          => true,  		'has_archive'         => true,  		'exclude_from_search' => false,  		'publicly_queryable'  => true,  		'capability_type'     => 'page',  	);  	register_post_type( 'Products', $args );    }    // Hook into the 'init' action  add_action( 'init', 'custom_post_type', 0 );  

We hope this article helped you add icons for your custom post types in WordPress. You may also want to check out how to use icon fonts in WordPress post editor.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Google+.