Take the 2-minute tour ×
WordPress Development Stack Exchange is a question and answer site for WordPress developers and administrators. It's 100% free, no registration required.

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

share|improve this question
    
have you tried to use !important ? –  Oleg Butuzov Nov 30 '12 at 15:51
    
Yes, unfortunately it didn't work. And I also think that it's better not to use !important unless absolutely necessary. Seems to me the CSS ought to work. –  chowwy Nov 30 '12 at 20:52
add comment

3 Answers

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
}
share|improve this answer
    
Thank you for your comment. I am actually using a function code (similar to yours) and only included my CSS in the question. That's why the PHP is in there. I will update my question with the complete script. –  chowwy Nov 30 '12 at 20:05
    
I have also tried out your function, but it does not show the 32px icon. Any idea how else custom post types alter the CSS? –  chowwy Nov 30 '12 at 20:22
add comment

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.

share|improve this answer
    
My CSS is wrapped in function, which is why there is PHP inside of it. I have added my function code above. –  chowwy Nov 30 '12 at 20:13
    
Thank you for your update. That CSS still doesn't work; #icon-edit is generally used when an item has been added to the Posts menu. While I have added a custom post type, it is accessed from my custom menu, so the CSS wouldn't be #icon-edit. –  chowwy Dec 1 '12 at 15:05
    
(Sidenote: the function update you added didn't work either, but I am mostly focused on the CSS, because I could just override the WP css, but can't seem to identify the element. –  chowwy Dec 1 '12 at 15:06
    
The id is icon-edit for 'posts' and for any of the custom post type menus created by WordPress that I checked. It is different for 'pages' -- `icon-edit-pages'. I am looking at 3.4.2, so maybe that has changed in the most recent version. –  s_ha_dum Dec 1 '12 at 15:40
add comment
up vote 0 down vote accepted

I figured it out!

When WordPress looks for the 32x32 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!

share|improve this answer
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.