Creating WordPress Dashboard Menu Icons for Custom Post Types

07 Jul 2012 By Articles No Comments
07
Jul

Adding unique icons to your newly developed custom post types is a great way to distinguish between the built-in WordPress menu items and your custom menu items.

By default when you create a custom post type and menu WordPress will default to using the “Push Pin” icon which is part of the “Posts” menu.

When we create our custom post types we use the the below WordPress function and arguments:

Registering our Custom Post Types

1
<?php register_post_type( $post_type, $args ) ?>
<?php register_post_type( $post_type, $args ) ?>

Custom Post Type Arguments

label – A plural descriptive name for the post type marked for translation.

labels - An array of labels for this post type.

description - A short descriptive summary of what the post type is.

public - Whether a post type is intended to be used publicly either via the admin interface or by front-end users.

exclude_from_search – Whether to exclude posts with this post type from front end search results.

publicly_queryable – Whether queries can be performed on the front end as part of parse_request().

show_ui - Whether to generate a default UI for managing this post type in the admin.

how_in_nav_menus – Whether post_type is available for selection in navigation menus.

show_in_menu – Where to show the post type in the admin menu. show_ui must be true.

show_in_admin_bar – Whether to make this post type available in the WordPress admin bar.

menu_position - The position in the menu order the post type should appear. show_in_menu must be true.

menu_icon – The url to the icon to be used for this menu.

capability_type – The string to use to build the read, edit, and delete capabilities.

capabilities – An array of the capabilities for this post type.

map_meta_cap – Whether to use the internal default meta capability handling.

hierarchical - Whether the post type is hierarchical (e.g. page).

supports - An alias for calling add_post_type_support() directly.

register_meta_box_cb – Provide a callback function that will be called when setting up the meta boxes for the edit form.

taxonomies - An array of registered taxonomies like category or post_tag that will be used with this post type.

has_archive – Enables post type archives.

permalink_epmask – The default rewrite endpoint bitmasks.

rewrite - Triggers the handling of rewrites for this post type.

query_var – Sets the query_var key for this post type.

can_export – Can this post_type be exported.

_builtin – Whether this post type is a native or “built-in” post_type.

_edit_link - Link to edit an entry with this post type.

The argument we are interested here is the highlighted “menu_icon“. This is the simplest way to define a unique icon for our custom post types. When defining our custom post type code we define the icon as demonstrated below:

1
'menu_icon' => bloginfo('template_url') . '/images/my-icon.png',
'menu_icon' => bloginfo('template_url') . '/images/my-icon.png',

Change “my-icon.png” to the name of your unique custom post type icon.

By adding the above argument you are defining a single image for your custom post type in general. It does the job however defining the icon in this manner doesn’t allow you the ability to define a two state roll-over icon image.

 

Single state menu icon

What we want to do is define a two state rollover menu icon image. It just looks a little more professional. This is what we are going to cover in the follow section of the article.

Creating a custom 2 state rollover icon image

This is the two state icon image we are going to be creating.

custom icon

The method uses an image sprite which is a single graphic file containing multiple images (sprites) at known pixel locations.

We then code our CSS code to define and manipulate the two states of the image.

Copy and paste the above .png image and save it to “wp-content/theme/your-current-theme”. Replacing “your-current-theme” with the name of your theme.

Next we need to define the code that instructs WordPress to use our two state menu icon.
Navigate to you theme directory and open your “functions.php” file. Add the below code.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<?php
// Define custom icon style for the custom post type
function custom_icons() {
?>
<style type="text/css" media="screen">
#menu-posts-custom .wp-menu-image {
background: url(<?php bloginfo('template_url') ?>/images/custom-icon.png) no-repeat 6px -32px !important;
}
#menu-posts-custom:hover .wp-menu-image, #menu-posts-custom.wp-has-current-submenu .wp-menu-image {
background-position:6px 0px !important;
}
#icon-edit.icon32-posts-custom {background: url(<?php bloginfo('template_url') ?>/images/custom-icon-32x32.png) no-repeat;}
</style>
 
<?php }
add_action( 'admin_head', 'custom_icons' );
?>
<?php
// Define custom icon style for the custom post type
function custom_icons() {
?>
<style type="text/css" media="screen">
#menu-posts-custom .wp-menu-image {
background: url(<?php bloginfo('template_url') ?>/images/custom-icon.png) no-repeat 6px -32px !important;
}
#menu-posts-custom:hover .wp-menu-image, #menu-posts-custom.wp-has-current-submenu .wp-menu-image {
background-position:6px 0px !important;
}
#icon-edit.icon32-posts-custom {background: url(<?php bloginfo('template_url') ?>/images/custom-icon-32x32.png) no-repeat;}
</style>

<?php }
add_action( 'admin_head', 'custom_icons' );
?>

 

The code above assumes you already have a custom post type named “custom”.

Replace “custom” in the above code block with the name of your custom post type.

The first two code blocks determine the icon image in the “normal” state and the “rollover” state.

The file code block defines a separate larger 32×32 icon for the post index which will appear at the top next to the custom post type name when displaying all posts in the dashboard.  This is only available from WP 3.1 and above.

The 32×32 graphic file being used is placed in the current theme at this file path /images/custom-32×32.png.

custom 32×32 icon image

Once the image files are in place and the code saved in your functions.php file, your custom post type will have a new set of menu icons in the dashboard.

completed icon

completed icon

Be sure to check out our other great WordPress Articles and Plugins
Tags : ,
Enjoy this article? If so, we would love to hear your thoughts in the comments below

 

Related Blog Posts

Leave a Reply