Add content to widget title in admin area within the widget?

Question

Is it possible to add content (icon & text) to widget title in admin area and customizer based on other value from the widget?

Widgets are custom and developed by me (not WP default one)

Ideally it should work bot in admin area & customizer. On frontend extra content is now shown.

---

---

Then user changes an option in the widget and upon the save title changes to

---

I've managed to achieve this with JS and .on('widget-updated widget-added') event, but looking for more robust approach as it doesn’t work in customizer.

Answer 1

You can add filter for widget_title hook.

Or change the $instance['title'] on update.

Answer 2

As per my understanding I can suggest you that you can probaly use something like font-awesome. This will help you to display a image sort of thing using simple CSS class.

So you may please check my solution and let me know your views over it.

Answer 3

Let me describe every situation.

1. If you would like to change "Search" on the above screenshot, I should disappoint you, you can look in /wp-admin/includes/widgets.php (line 232) and in any widget class (I opened /wp-includes/widgets/class-wp-widget-search.php) and you will find out that there are no filter hooks for it. It could be changed only in your custom widgets.

On my custom widget I change it in this part of the widget class code:

    function __construct() {
         parent::__construct(
            'misha_widget', 
            'Widget title', // here it is
            array( 'description' => 'Widget description' )
        );
    }

2. If you would like to change "My search" on widget in admin area, JavaScript is good enough way to do it because WordPress also do it with JS. The widget_title hook will be applied only for website appearance not for admin area or customizer:

   add_filter('widget_title', 'misha_change_title1', 10, 3 );
   function misha_change_title1( $title, $instance, $id ){
       if( $id == 'search' ) {
           return '📷'. $title;
       }
       return $title;
   }
   

What about customizer, you can find the instruction how to run custom JS code here https://codex.wordpress.org/Theme_Customization_API#Step_2:_Create_a_JavaScript_File