[wp-trac] [WordPress Trac] #25419: Add widget icons from customizer to widgets admin page and customizer (was: Add widget icons from customizer to widgets admin page)

[WordPress Trac]

#25419: Add widget icons from customizer to widgets admin page and customizer
-------------------------------------------------+-------------------------
 Reporter:  westonruter                          |       Owner:
     Type:  enhancement                          |      Status:  new
 Priority:  normal                               |   Milestone:  Future
Component:  Widgets                              |  Release
 Severity:  minor                                |     Version:  3.9
 Keywords:  ui-feedback has-patch dev-feedback   |  Resolution:
  needs-testing needs-docs                       |     Focuses:  ui,
                                                 |  administration
-------------------------------------------------+-------------------------
Changes (by eherman24):

 * keywords:  needs-patch ui-feedback => ui-feedback has-patch dev-feedback
     needs-testing needs-docs


Comment:

 Hey Westonruter,

 I had actually wrote about this a few months back on my blog, and towards
 the end proposed that a patch be added to core that would allow this
 feature ([http://www.evan-herman.com/add-an-icon-to-a-wordpress-
 widget/#.U-OuB_ldXT8]).

 I began development on a plugin, and wanted to customize the plugin and
 brand it a bit further than was possible. I had created a custom widget,
 but wanted to include the company logo into the widget on the admin side.
 The main reason behind this thought was that there are so many Widgets
 available to a user, that it quickly becomes visually overwhelming.

 Adding an icon to the widget would make it a lot easier to locate the
 widget, without much time spent reading each widget title. WordPress has
 allowed for icons in menu items for sometime now, and allowed us to
 include dashicons into menu items. Going off that thought , I began to
 look around for a solution.

 The route that I ended up taking was through CSS customizations, adding a
 background image to the widget title.

 After mulling it over a bit, I decided I wanted to take charge and submit
 the first patch to adding icon support to widgets, much in the same way
 that `add_menu_page()` allows for.

 I've come up with what I believe to be a solid solution to this need.

 --------------------------------------------

 I've written the patch to allow an extra argument (icon_url) to be passed
 through to `__construct()` when initializing your custom widget.


 `public function __construct( $id_base, $name, $icon_url, $widget_options
 = array(), $control_options = array() ) `


 Initializing your widget with a dashicon would look like this:

 {{{
 function __construct() {
         parent::__construct(
                 'foo_widget', // Base ID
                 __('Widget With Icon', 'text_domain'), // Name
                 'dashicons-admin-collapse' ,  // New Icon Param (dashicon)
                 array( 'description' => __( 'Testing a widget with an
 icon', 'text_domain' ), )
         );
 }
 }}}

 [[BR]]
 [[BR]]

 '''Dashicon Widget Icon Screenshots:'''
 [[Image(http://s30.postimg.org/pnqqmrsn5/widget_screen_widget_dashicon.jpg)]]
 [[Image(http://s30.postimg.org/6u4xpruf5/widget_screen_active_widget_dashicon.jpg)]]
 [[Image(http://s30.postimg.org/7orhbt29t/theme_customizer_widget_dashicon.jpg)]]


 [[BR]]
 [[BR]]

 Whereas initializing your widget with a custom image would be very
 similar, you would just pass in the path to the icon, much in the same way
 you do with `add_menu_page()` like this:

 {{{
 function __construct() {
         parent::__construct(
                 'foo_widget', // Base ID
                 __('Widget With Icon', 'text_domain'), // Name
                 plugin_dir_url( __FILE__
 ).'/image/yikes_logo_widget_icon.png' ,  // New Icon Param (image)
                 array( 'description' => __( 'Testing a widget with an
 icon', 'text_domain' ), )
         );
 }
 }}}

 [[BR]]
 [[BR]]

 '''Image Icons (.jpg,.png etc) Widget Icon Screenshots:'''
 [[Image(http://s30.postimg.org/psuhwfzy9/widget_screen_widget_image_icon.jpg)]]
 [[Image(http://s30.postimg.org/dof8fgn29/theme_customizer_widget_image_icon.jpg)]]

 [[BR]]
 [[BR]]

 I took into consideration that some users ( or existing plugins/widgets )
 may not want to use an icon or may not want to go back and add the new
 parameter. This is true for all of the default widgets (Archives, Tag
 Cloud etc.). So instead of going back and adding the new parameter to
 those already existing widgets, I've built in some backwards compatibility
 when parsing the code to prevent issues with existing widgets.

 Adding icons to default widgets, or any widgets created by plugins would
 be as simple as going in and adding the new icon_url parameter just below
 the widget name.

 Lets consider adding this feature into 4.0 or 4.1, as a way to unify the
 styles (and creation) between the admin and widget menus.

--
Ticket URL: <https://core.trac.wordpress.org/ticket/25419#comment:9>
WordPress Trac <https://core.trac.wordpress.org/>
WordPress publishing platform