Make WordPress Core

Opened 16 years ago

Closed 16 years ago

Last modified 16 years ago

#7112 closed enhancement (wontfix)

Add Icons to the Design - Widgets Page in the Admin Panel

Reported by: scribblerguy's profile scribblerguy Owned by:
Milestone: Priority: normal
Severity: normal Version:
Component: General Keywords: has-patch, widgets, user interface, Admin Panel, usability
Focuses: Cc:


Overview: By adding icons to the Widgets Page in the Admin Panel, the usability and visual appeal of that page will be greatly improved. This enhancement only requires a few lines of new code in the "/wp-admin/widgets.php" file, a short helper function in the "/wp-admin/includes/widgets.php" file, and one extra CSS declaration.

Usability Improvements: Currently, individual widgets are only labeled with their name. By adding icons, they will now have graphic "labels" as well. These will provide an additional indicator of what functionality each widget provides.

Furthermore, adding icons will (1) help the user more readily distinguish among the individual widgets; (2) provide a better visual cue that the individual widget panels are a type of menu interface, rather than just a list; and (3) the icons will act as bullet-points that draw the user's attention to each specific widget name.

Visual Appeal Improvements: Text, no matter how fancy the typeface, is still just text. By adding icons, the Widgets page will appear less "dry and more "fresh." Users will be more drawn to page's interface and more likely to notice and interact with the interface. In addition, this will provide a minor "refresh" in the design that will hopefully generate some positive buzz in the blogging community.

Implementation: The attached patch does not alter any existing functions, but rather, uses the widget's class name to determine what icon to use. The class name appears to be language independent, so there should not be any conflicts there. By using the class name, this will keep the naming of the icon images consistent. The images will be stored in the "/wp-admin/images/" directory are intended only for use in the Admin Panel. The images files are named using the format of classname.gif, so the icon for the core Calendar widget is "widget_calendar.gif."

With the current patch, only core widgets will have unique icons. All other icons will have a plain default widget. Letting widget developers create their own icons and providing a hook or option to show that instead of the default icon is probably feasible, but not likely desirable.

The chief concern for not implementing custom icons is that the widget developer could use a non-visually appealing icon or an icon with colors that clash with the current colors and theme of the WP Admin Panel. See:

One workaround for this may be to allow the widget developer to set as an option, the name of an official, but extra icon that would be displayed instead of the default. (I tried doing something with third-party widgets and custom icons, but could not get it to work, so someone else should work on implementing this, if so desired).

The attached icons set only uses greyscale, as color seemed to be visually over-powering. A rationale for each icon choice is attached as a text file.

Stylesheet note: "vertical-align: text-top;" seems to be the best, browser-neutral setting for icons images of this size (16x16). The CSS declaration was tested in Firefox 2.0.14, Opera 9.27, Internet Explorer 7, and Safari 3, all on Windows Vista.

Attachments (5)

widget-icons.diff (3.7 KB) - added by scribblerguy 16 years ago. (5.0 KB) - added by scribblerguy 16 years ago.
widget-icon-list.png (17.7 KB) - added by scribblerguy 16 years ago.
just the icons with their names and file size
screenshot-widgets-panel-icons.png (34.2 KB) - added by scribblerguy 16 years ago.
the patch in action, with a few third party widgets to show the default icon
widget-icon-rationales.txt (3.0 KB) - added by scribblerguy 16 years ago.

Download all attachments as: .zip

Change History (13)

16 years ago

just the icons with their names and file size

16 years ago

the patch in action, with a few third party widgets to show the default icon

#1 @thee17
16 years ago

-1 because, I prefer a text based layout.

#2 @Viper007Bond
16 years ago

-1 as well, but not a strong one. I prefer the current design, but wouldn't kill myself over this change.

#3 @sambauers
16 years ago

I kind of like it, the icons are well thought out although they are a little bland.

Surely this could all be done using background images in CSS though, that way the semantic purists are less bothered.

#4 @strider72
16 years ago

I'm for this with two caveats:

1) I agree that it should be a CSS background. This is purely visual, and not needed in the HTML.

2) I believe the code that allows plugins to add widgets should also be changed so custom widgets can have included icon images as well.

#5 @caesarsgrunt
16 years ago

+1, although I don't really like these particular icons. The famfamfam ones might be suitable. I also think they should be CSS background images, and I definitely think plugin developers should be able to set their own icons.

#6 @matt
16 years ago

  • Milestone changed from 2.7 to 2.8

#7 @ryan
16 years ago

  • Resolution set to wontfix
  • Status changed from new to closed

Widget management redesign in 2.8 will take these suggestions into account, but if we use icons in some way, we would want them to match the style of the navigation icons, and since the code for widget management is going to be significantly changed, will need to consider in context of new screen composition.

#8 @johnbillion
16 years ago

  • Milestone 2.8 deleted
Note: See TracTickets for help on using tickets.