CODEWITHSUNDEEP
phpwordpresswidget
Solomon Closson
Solomon Closson

Reputation: 6217

Any way to edit the titlebar of Wordpress Widgets in the Admin area?

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...

enter image description here

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... If I echo $params[0]['before_title'] the image shows, but not in the right place. I need the image to show within the <h3> tag of the title of the widget, if possible. Any ideas?

Upvotes: 2

Views: 201

Answers (1)

random_user_name
random_user_name

Reputation: 26160

If you snoop the WP code, you'll see two things:

  1. That WordPress is stripping the tags out of the title, which is why your image is getting removed. This is from the WP Core file "widgets.php":

    $widget_title = esc_html( strip_tags( $sidebar_args['widget_name'] ) );

  2. That there are no hooks, actions, or filters to allow you to manipulate them.

So, you're going to have to get creative.

One way would be to attempt to leverage the ID of the widget. This is a bit tricky, however, because the WP code is intentionally managing the ID's so that it keeps them unique, even if you have the same widget added multiple times.

So, let's take the "recent-comments" widget as an example of how you might be able to handle this:

The ID of the first "recent-comments" widget shown in the interface is widget-17_recent-comments-2, the ID of the second "recent-comments" widget is widget-9_recent-comments-3, etc. You get the idea.

Let's leverage the piece that says recent-comments.

To do that, we'll need to tap into some of the "funner" CSS selectors: the contains selector. In this case, I would recommend [id*="_recent-comments-"]. Pay special attention to the starting _ and ending - - this will help ensure your styles don't get applied to other widgets with ID's that may contain part of your selector.

With that little piece of information, we can now get an image to show in our h3 as a background:

div[id*="_recent-comments-"] h3 {
    color: red; /* if you want to manipulate the title color */
    padding-left: 35px; /* to create some space for our image */
    /* obviously adjust this as needed */
    background: transparent url(http://placehold.it/20x20) 5px center no-repeat;
    /* your other styles here ... */
}

Upvotes: 1

Related Questions