How to Set a Screen Icon for Your Plugin or Theme Options Page

A nice touch when building a theme or plugin options page is to add your own icon next to the heading on the options page.

Here’s the correct way to do it:

First pass a string with the name of your plugin to the screen_icon() function, like so:

[php]
screen_icon( ‘my-plugin’ );
[/php]

Then in your plugin’s CSS file, add something like so:

[php]
#icon-my-plugin {
background: transparent url( ‘plugin-icon.png’ ) no-repeat;
}
[/php]

This is preferable to adding the image directly into the HTML on the plugin options page. Only the approach of a

with a background image gives you the possibility to use a CSS sprite for the image, which is a great benefit, and which is something core and some plugins do.

Reference: http://core.trac.wordpress.org/ticket/19878

If you enjoyed this post, make sure to subscribe to WPMayor’s RSS feed.

About Jean Galea

Jean Galea is a WordPress developer, entrepreneur and padel player. He is the founder of WP Mayor, the plugins WP RSS Aggregator and EDD Bookings, as well as the Mastermind.fm podcast. His personal blog can be found at jeangalea.com.

Related Articles

One Response

  1. Gowri
    Gowri April 11, 2013 at 19:28 | | Reply

    Jean this is real awesome, I was search for solution an hour. it helps lot

    extra information to add this style in admin head use add_action( ‘admin_head’, ‘admin_css’ ); this action.

Leave a Reply