Add 32×32 icon to custom post type index page

by

I’ve setup an “album” custom post type and want to add an icon on the index page where the RED circle is (see image below; from wptheming.com).

Here’s my function to replace the icon. The CSS is what I found when I inspected the icon element with firebug:

add_action('admin_head', 'album_foo');
function album_foo() {
        global $post_type;
    ?>
    <style>
    <?php if ($post_type == 'album') : ?>

     #icon-album.icon32.icon32-posts-album {
      background:url('<?php get_template_directory_uri(); ?>/images/album32x32.png') no-repeat;
    } 
    <?php endif; ?>
        </style>
        <?php
}

I also tried this CSS in the function:

#icon-edit.icon32-posts-album {
        background:url('<?php get_template_directory_uri(); ?>/images/album32x32.png') no-repeat;
}

I can’t figure out what my CSS is missing, but my icon isn’t showing.

enter image description here

3 Answers
3

If when using firebug you are seeing

#icon-album.icon32.icon32-posts-album {
  background:url('<?php get_template_directory_uri(); ?>/images/album32x32.png') no-repeat;
}

Then you’re passing the string '<?php get_template_directory_uri(); ?>/images/album32x32.png' to the background property in your css file – and they don’t execute php code.

If the image and CSS are in a theme folder (or at least the CSS file is in some directory above/with the image) then you can use relative urls.

For those who are developing plug-ins for release and do not want to enqueue some CSS file for one simple line…

// Adds icon to the page head
add_action('admin_head', 'wpse74477_plugin_header_image');
function wpse74477_plugin_header_image() {
    $post_type = get_current_screen()->post_type;

    if ( 'album' != $post_type )
        return;
    ?>
         <style type="text/css">
            .icon32.icon32-posts-album {
               background: url(<?php echo get_template_directory_uri(); ?>/images/album32x32.png) !important;
            }
         </style>
     <?php
}

Leave a Comment