Tips for targeting widget dragable for WP Pointer on widgets.php page

by

I’m updating a widget plugin I wrote called Feature Me and am adding in WordPress pointers for first time users to help them find the widget after installing the plugin. However, I have come across a problem.

The pointer has to have a target to go to which is either an ID # or a CLASS . (that’s fine under normal circumstances). But on the widget page, all widgets are prepended with widget-[somenumber].

Screen of prepended widget number with the message I'd like to display

If i know what [somenumber] is I can target it no problem, but 99% of the time, I won’t know what the number is since it really depends on the order of the plugin’s installation.

On a different website, this is the ID of the widget:

Screen of prepended widget number from a different website

Hopefully you can see my problem.

For context, I’m using this method of displaying the pointer from TutsPlus. Specific function for the above message here:

function fm_message_widget_location( $p ) {
    $p['fm_message_widget_location'] = array(
        'target' => '#widget-7_feature_me-__i__',
        'options' => array(
            'content' => sprintf( '<h3> %s </h3> <p> %s </p>',
                __( 'Feature Me - Getting Started' ,'plugindomain'),
                __( 'Looking for Feature Me? It\'s right here! Drag the widget to create your first call to action!',
                    'plugindomain')
            ),
            'position' => array( 'edge' => 'left', 'align' => 'middle' )
        )
    );
    return $p;
}
add_filter( 'fm_admin_pointers-widgets', 'fm_message_widget_location' );

This would work fine if my widget was always in the 7th position, but it won’t be.

I’ve attempted to pass through regex for the target, but that doesn’t work, I’m assuming because the javascript code treats it as a string.

ie. 'target' => '#widget-[0-9*]_feature_me-__i__' or 'target' => 'RegExp("#widget-[0-9*]_feature_me-__i__")'

So given all of this, has anyone ever been successful at targeting these individual widget “dragables” with success in their plugins? Any advice/recommendations would be most welcome.

1 Answer
1

Since the Feature Me widget in the Available Widgets list, is wrapped into something like this:

<div id="widget-5_feature_me-__i__">...</div>

I then wonder if the following would work (untested):

 'target' => "div[id$='_feature_me-__i__']",

to target all div elements with id’s that end with _feature_me-__i__.

I think there should only be a single match, at most, if this works.

Leave a Comment