Introduce Your Plugin With WordPress Pointers

in Plugin Development

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.

public function print_footer_scripts() { $pointer_content = '

Edit The Appearance

'; $pointer_content .= '

Edit the appearance of your WordPress theme.'; ?> Define New Settings

'; $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 } [/php]

Subscribe To Newsletter

Get weekly updates to your email