X

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.



Code Snippet:


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://site.com/wp-content/themes/theme_name/i/icon_24x24.png';?>') no-repeat; }
<?php } ?>
</style>
<?php
}

Comments  Leave a Reply

  1. 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.

    1. 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.

    2. 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.

      1. Uh, code tags not work?

        1. Nope :/ not in with diquss,

  2. 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; }';
    }

    1. 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.

Add a Comment

We're glad you have chosen to leave a comment. Please keep in mind that all comments are moderated according to our privacy policy, and all links are nofollow. Do NOT use keywords in the name field. Let's have a personal and meaningful conversation.

WordPress Launch Checklist

The Ultimate WordPress Launch Checklist

We've compiled all the essential checklist items for your next WordPress website launch into one handy ebook.
Yes, Send Me the Free eBook!