Anyway to edit the titlebar of Wordpress Widgets in the Admin area?

Question

I am providing a means for Mobile Widgets and Desktop Widgets in all custom widgets I am creating, so I think it would be a good idea to indicate if a widget is mobile/desktop in the title of the widget area in the backend so as to help make this section more user friendly.

Is there a filter that can be used to load up an image within the titlebar of widgets (to the left of the widget title), to include a mobile/desktop icon to be able to identify which active widgets are desktop and which active widgets are mobile, without having to open up the widget to see in the options of it?

Is there a hook somewhere in wordpress to capture this only in the backend admin widgets.php page? Would like to use php hook for when page loads. Already using jQuery for when option changes from mobile to desktop and vice versa. It's the initial load of the widgets page that has me needing to do this.

Possible?

Example below, if possible to do on initial widgets.php page load easily from within and extended WP_Widgets class file? Or filters, actions, etc...

So, I've tried to do the following like this inside the Widget class that extends WP_Widget:

function __construct() {

        parent::__construct(
            'social_media_widget',
            __('Social Media Widget', 'mydomain')
        );

        add_filter('dynamic_sidebar_params', array($this, 'my_sidebar_params'), 10, 1);

    }

    function my_sidebar_params($params) {

        $sidebar_id = $params[0]['id'];

        if (is_admin() && $params[0]['widget_name'] == 'Social Media Widget')
        {
            $_widget = get_option('widget_social_media_widget');

            if (!empty($_widget) && isset($_widget[$params[1]['number']]))
            {
                // $platform is being set in here as "desktop" because if I do a var_dump, it gives me "desktop", however, the image is not showing in the titlebar using before_title below... why?
                $platform = isset($_widget[$params[1]['number']]['platform']) ? $_widget[$params[1]['number']]['platform'] : '';
            }

            if (!empty($platform))
            {
                $params[0]['before_title'] = '<img src="' . get_stylesheet_directory_uri() . '/img/' . $platform . '-icon.png" alt="' . $platform . ' menu" class="menu-icon ' . $platform . '-icon" />';
            }
        }
    return $params;
}

So, $platform is the correct value now, but the image is not being attached before the title in the title bar of the admin Widgets area, so I'm not sure why it is not showing... Any ideas?

Answer 1

I believe you are looking for $params = apply_filters( 'dynamic_sidebar_params', $params ); (look here: https://github.com/WordPress/WordPress/blob/master/wp-includes/widgets.php#L706).

Now this filter will evaluate both in front end and back end. so to answer your question, you could wrap your filter in a if( is_admin() ){ // Do icons } check.

Better yet, you could define this at registration level with your register_sidebar( $args ) function. Check out Line 236 for the definition of the function and Line 250 for the actual argument you would need to customize conditionnaly. Something like this

$before_title = is_admin() ? '<span class="custom-icon"></span><h2 class="widgettitle">' : '<h2 class="widgettitle">';

$args = array(
  // ... your custom args definition
  'before_title' => $before_title,
);

register_sidebar( $args );

UPDATE

After digging deeper into code, my answer doesn't fit your need because of a few things.

• Widget titles are being HTML escaped, so no tag can be rendered
• A filter exists widget_title to override HTML escape behaviour, but it is not applied for the admin area, therefore we cannot modify this behaviour for your use case since it's already ecaped when printed on Line 229
• So the only solution possible here is to revert back to jQuery/CSS to apply your desired glyphs