HTML5 Zone is brought to you in partnership with:

Paulund is a website dedicated to writing tutorials and code snippets about Web Development, the main subjects are PHP, Wordpress, jQuery, CSS3 and HTML5. Paul is a DZone MVB and is not an employee of DZone and has posted 139 posts at DZone. You can read more from them at their website. View Full User Profile

Introduce Your Plugin With WordPress Pointers

01.17.2013
| 2466 views |
  • submit to reddit

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.

Pointer

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
}
Published at DZone with permission of Paul Underwood, author and DZone MVB. (source)

(Note: Opinions expressed in this article and its replies are the opinions of their respective authors and not those of DZone, Inc.)