Introduce Your Plugin With WordPress Pointers

In version 3.3 WordPress released a new feature called pointers. These are little pop-up notification boxes which you can use to point to new information on your WordPress admin area.

This is a great idea if you are a plugin or theme developer, you can make it so that when a user installs your new plugin you can use the pointers to show exactly how they are suppose to use it.

For example if the plugin adds a new menu item to the WordPress admin area, you can use pointers to show the user that there is a new menu item and what it allows you to do with your wordpress site.

You can assign a pointer to be displayed on any HTML ID or class, it is just a jQuery widget which has a title bar, text area and close button.

How To Use Pointers?

To use WordPress pointers you first need to include the pointers styling and javascript's on to the page. As these are already registered with the core WordPress you just need to call them using the wp_enqueue_script() and wp_enqueue_style().

// Use the pointers
wp_enqueue_style( 'wp-pointer' );
wp_enqueue_script( 'wp-pointer' );

Now that the pointer javascript is added to the page there is a pointer object which is now available to use in your jQuery code.

To use this jQuery pointer object you just need to add some Javascript to the page assigning a pointer to a HTML element.

//

The most basic way of using the pointers will have 2 options the content and the position of the pointer. If you want the pointer to have a title you can add a h3 tag to the content object.

To use this in WordPress all you have to do is put the above all together, below is some example code of how to add a pointer to the admin area. In this example we are just going to add a pointer to the settings menu item, just add the following to your functions.php file.

// Register the pointer styles and scripts
add_action( 'admin_enqueue_scripts', 'enqueue_scripts' );
// Add pointer javascript
add_action( 'admin_print_footer_scripts', 'add_pointer_scripts' );
// enqueue javascripts and styles
public function enqueue_scripts()
{
	wp_enqueue_style( 'wp-pointer' );
	wp_enqueue_script( 'wp-pointer' );
}
// Add the pointer javascript
public function add_pointer_scripts()
{
	$content = '
<h3>Define New Settings</h3>
';
	$content .= '
Edit the settings of your WordPress website.';
?>
	//<![CDATA[
	jQuery(document).ready( function($) {
	    $('#menu-settings').pointer({
	        content: '',
	        position: {
                edge: 'left',
                align: 'center'
            },
	        close: function() {
	            // what to do after the object is closed
	        }
	    }).pointer('open');
	});
	//]]>
<?php
}