Do you want to add icons for custom post type in WordPress for new and edit post pages? It’s easy with our code snippet. Let’s take a look.
Instructions:
Add this snippet to the functions.php or to a site-specific plugin. Don’t forget to change the URL on line 9 to the location of your 24px by 24px icon.
add_action( 'admin_head-post.php', 'post_type_icon');
add_action( 'admin_head-post-new.php', 'post_type_icon');
function post_type_icon() {
global $post_type;
?>
<style>
<?php if($post_type == 'products'){ ?>
#icon-edit {
background: url('<?php echo 'http://example.com/wp-content/themes/theme_name/i/icon_24x24.png';?>') no-repeat; }
<?php } ?>
</style>
<?php
}
Alternatively, you can use this code. This snippet both creates a custom post type (called “products” on line 9) and sets the menu icon for that custom post type. Add this snippet to the functions.php or to a site-specific plugin. On line 10 of this snippet, we set the menu_icon URL to the location of the 16px by 16px icon image to display in the admin menu.
$args = array(
'label' => __('Products'),
'singular_label' => __('Product'),
'public' => true,
'show_ui' => true,
'capability_type' => 'page',
'hierarchical' => false,
'rewrite' => true,
'query_var' => 'products',
'menu_icon' => 'http://site.com/wp-content/themes/theme_name/i/icon_16x16.png',
'supports' => array('title','editor','comments','thumbnail')
);
register_post_type( 'product' , $args );
Note: If this is your first time adding code snippets in WordPress, then please refer to our guide on how to properly copy / paste code snippets in WordPress, so you don’t accidentally break your site.
If you liked this code snippet, please consider checking out our other articles on the site like: Best WordPress Page Builders (Compared).
Cannot seem to get this to work in WP 3.2.1. I have a custom theme I’m developing and I’ve added my own function into the functions.php and added the actions, but no dice.
It appears as though the only styles that are applying to it are from the “colors-fresh.css” stylesheet. I’ve checked all misspellings and made sure that my if statements match up with the correct post type definition.
If you view the source on the admin page you should be able to see if the css above is added to the proper custom post type admin pages. This is simply css that overrides he default icons used. You may also want to try adding !important to the end of the css to make sure it would override any defaults.
Of course 6 minutes later, I figure it out. I switched the line
to
This seemed to be all that was necessary to fix it. No idea why the previous line wasn't working for me because logically it should have been.
Uh, code tags not work?
Nope :/ not in with diquss,
it can be done with one hook
like here
add_action("admin_head", array(&$this, "stylize")); //i use classes
function stylize() {
global $post_type;
if($post_type == 'billboard') echo '#icon-edit {background: url("'.plugins_url( 'billboard.png', __FILE__ ).'") no-repeat; }';
}
Yes I was thinking about using admin_head, however we only need to replace the large icon on two pages so adding to the admin_head would still add the code to every page.