Add 32×32 icon to custom post type index page

1 Views

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:

Read More
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

Post Views: 1

Related posts

Leave a Reply

3 comments

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

  2. Unless your server has been specifically configured to do so, PHP won’t work in a .css file. It looks like that is what you are trying to do. Relative URLs work fine in a stylesheet, in contrast to most parts of WordPress. Try using a relative URL as a path to your icon.

    Edit:

    It isn’t #icon-album. It is #icon-edit. That id doesn’t change with post types, at least not with the ones I tried. The classes change. That id appears to stay the same.

    add_action('admin_head', 'album_foo');
function album_foo() {
    global $post_type;$_GET; ?>
    <?php if (( isset($_GET['post_type'] && $_GET['post_type'] == 'album') || ($post_type == 'album')) : ?>
      <style type="text/css">
    #icon-edit.icon32.icon32-posts-post {
      background:url('<?php get_template_directory_uri(); ?>/images/album32x32.png') no-repeat;
    } 
      </style>
    <?php endif;
}

    I moved the <style tag into the conditional since there is no need to print an empty tag and with debugging on I was getting WARNINGs printing instide the <style> tag which could break it. I also added a check to see if $_GET['post_type'] is set before trying to use it.

  3. I figured it out!

    When WordPress looks for the 32×32 icon on custom post index/edit/add pages, it starts by looking in:

    /wp-admin

    because that’s where the WordPress 32px icons are located. But CSS references are usually relative to the location of your stylesheet. So when adding the location of your icon to CSS, FIRST, you have to use /wp-admin as your reference point, so it will be different than most of your other CSS references. Then use those relative URLs to get to the directory where your icon is located.

    Your CSS for a custom post type 32px icon should look like this:

    #icon-[your-menu-slug].icon32.icon32-posts-[custom-post-type] {
  background: url('[relative URL, but get out of wp-admin first!]/icon-location') no-repeat;
}

    Hope this helps somebody else!