Home / admin / Change custom post type icon for new and edit post pages
  • How to Change custom post type icon for new and edit post pages


    Adding this snippet to the functions.php of your wordpress theme will change the default icon on the post edit and new post pages. Don’t forget to change the URL on line 9 to the location of your 24px by 24px icon.

    ( click code to copy )

    wordpress snippet : PHP - change large 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;
    	<?php if($post_type == 'products'){ ?>
    	#icon-edit {
                    background: url('<?php echo 'http://site.com/wp-content/themes/theme_name/i/icon_24x24.png';?>') no-repeat; }
    	<?php } ?>

    ( WordPress codex functions, hooks, in this snippet. )

    admin_head, add_action, _n, wp,
  • 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.

  • Mike

    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.

    • Mike

      Of course 6 minutes later, I figure it out.  I switched the line


      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.

      • Mike

        Uh, code tags not work?