How to Add and Deactivate the new Feature Pointer in WordPress 3.3

With WordPress version 3.3 comes with the Feature Pointer a well-known idea from other tools. We know this for example from Gmail or Google Doc where they notice you of new features, in which they point with bubbles to these new features. In WordPress 3.3, the Admin Bar has been redesigned successfully – I think – and this is the first time the feature pointer points to it.


If you are in the environment of customers, it may be that you don’t want the feature pointer – different scenarios are possible. But here it also relies on the WordPress hooks so you can intervene in various ways. One idea is to adjust the user settings of the user, as the feature pointer is using Javascript to drop an option in the table, so that the user does not read the instructions again. Alternatively, you can disable it via hook, following solution paste into a small Plugin or the functions.php of your theme (whereas the second solution isn’t the best).


add_filter( 'show_wp_pointer_admin_bar', '__return_false' );

If you don’t have the admin bar not active, then it won’t show a feature pointer to it.

Also you can use the hooks to create your own feature pointer. Without adjustment in the design and position is the following simple example conceivable. If the position is changed, it is sufficient to adapt the script section JS-function pointer() in the PHP function get_content_in_wp_pointer(). The function pointer() can be controlled by various parameters (content, position, arrow) .

function get_content_in_wp_pointer() {
	$pointer_content  = '<h3>' . __( 'WP Pointer with version 3.3.', 'my_textdomain' ) . '</h3>';
	$pointer_content .= '<p>' . __( 'Add your own informations to WP Pointer.', 'my_textdomain' ) . '</p>';

?>
<script type="text/javascript">
//<![CDATA[
jQuery(document).ready( function($) {
	$('#wpadminbar').pointer({
		content: '<?php echo $pointer_content; ?>',
		position: {
			my: 'left top',
			at: 'center bottom',
			offset: '-25 0'
		},
		close: function() {
			setUserSetting( 'p1', '1' );
		}
	}).pointer('open');
});
//]]>
</script>
<?php
}

function fb_enqueue_wp_pointer( $hook_suffix ) {
	$enqueue = FALSE;
	
	$admin_bar = get_user_setting( 'p1', 0 ); // check settings on user
	// check if admin bar is active and default filter for wp pointer is true
	if ( ! $admin_bar && apply_filters( 'show_wp_pointer_admin_bar', TRUE ) ) {
		$enqueue = TRUE;
		add_action( 'admin_print_footer_scripts', 'get_content_in_wp_pointer' );
	}
	// in true, include the scripts
	if ( $enqueue ) {
		wp_enqueue_style( 'wp-pointer' );
		wp_enqueue_script( 'wp-pointer' );
		wp_enqueue_script( 'utils' ); // for user settings
	}
}
add_action( 'admin_enqueue_scripts', 'fb_enqueue_wp_pointer' );

Please note: The implementation is based on a nightly build of WordPress, not the final Release 3.3 and thus might have some changes or other solutions are possible in a later version. Therefore, please validate according to the version of WordPress the solution. As a tip this should be enough – anything else is creativity and your skills.


Posted

in

by

Comments

8 responses to “How to Add and Deactivate the new Feature Pointer in WordPress 3.3”

  1. Konstantin Avatar

    Here’s an example admin pointers implementation in a child theme for Twenty Eleven: http://theme.fm/2011/09/introducing-pointers-in-wordpress-3-3-2407/ 🙂

    ~ Konstantin

  2. Rev. Voodoo Avatar

    Phew, thanks for this! The pointers are totally incompatible with IE7. You can’t close ’em! I mean, that’s totally cool, WP no longer supports IE7 with this release. But, unfortunately at work, I have no options. I can’t upgrade my browser, I’m stuck with what they give me.

  3. ocean90 Avatar

    @Rev. Voodoo

    WP no longer supports IE7 with this release.

    That’s not right.

    If you think it’s broken then please add a comment on http://core.trac.wordpress.org/ticket/18693.

  4. Konstantin Avatar
    Konstantin

    Best practice probably would be to put the JavaScript in an external file and use wp_localize_script() to access the pointer content.

  5. Rev. Voodoo Avatar

    @ocean90, Done!

    Looks like it’s an issue in IE8 as well, Ipstenu and I reported the same problem, at the exact same time….

  6. Andrew Nacin Avatar

    The “Please note” at the bottom is nice, but it never ends up being enough. This API is absolutely guaranteed to change.

    I’d be nice if new features aren’t written about at least until beta or something.

  7. Frank Avatar

    @Andrew: hmm, i see this as an chance to get little peeks for WordPress, news are very interest, especial if it a news, waht also see the Users outside the source 😉 If an developer will use this, then he can see the source on the current version. Also, maybe so it is possible you get more feedback to this topic, more people read this and can give constructive feedback; install the nightly build, see this new feature, see the ticket and give feedback.

  8. TCBarrett Avatar

    I like the idea of people writing about upcoming features, but I can understand why getting into the technical details may not be such a good idea. Certainly any changes to the API should be reflected in the post to avoid incorrect information getting a high search position?