How do you create a basic Wordpress admin pointer? - wordpress

Question

I have been looking around for quite awhile now and all I have found are tutorials from 3-4 years ago that explain how to do a pointer tour. All I want to do is add a pointer that pops up when someone activates my plugin so that I can notify them of a new menu option where they will go to view my plugin settings. Any help would be greatly appreciated!

Answer 1

Pointers in WP need 3 components:
1: wp-pointer css file
2: wp-pointer JS file
3: A JavaScript snippet
To 1 and 2
include them simply with:
wp_enqueue_style( 'wp-pointer' );
and
wp_enqueue_script( 'wp-pointer' );
The JS code:
<script type="text/javascript">
(function($){
var options = {"content":"<h3>Personal Data and Privacy<\/h3><h4>Personal Data Export and Erasure<\/h4><p>New <strong>Tools<\/strong> have been added to help you with personal data export and erasure requests.<\/p><h4>Privacy Policy<\/h4><p>Create or select your site’s privacy policy page under <strong>Settings > Privacy<\/strong> to keep your users informed and aware.<\/p>","position":{"edge":"left","align":"bottom"},"pointerClass":"wp-pointer arrow-bottom","pointerWidth":420}, setup;
if ( ! options )
return;
options = $.extend( options, {
close: function() {
$.post( ajaxurl, {
pointer: 'wp500_isrc_pointer',
action: 'dismiss-wp-pointer'
});
}
});
setup = function() {
$('#menu-settings').first().pointer( options ).pointer('open');
};
if ( options.position && options.position.defer_loading )
$(window).bind( 'load.wp-pointers', setup );
else
$(document).ready( setup );
})( jQuery );
</script>
Of Course you need to wrap all them in a php file to check the user capabilities and check the dismiss from the users meta.
I have copied the WP pointer class in wp-admin/includes/class-wp-internal-pointers and made a custom one from it.
Here the complete code which i can call it with an action hook like:
add_action( 'admin_enqueue_scripts', array( 'isrc_Internal_Pointers', 'enqueue_scripts') );
add_action( 'user_register',array( 'isrc_Internal_Pointers', 'dismiss_pointers_for_new_users' ) );
The Full PHP file (include it in your code and call the 2 actions):
<?php
/**
* Administration API: WP_Internal_Pointers class
*
* #package WordPress
* #subpackage Administration
* #since 4.4.0
*/
/**
* Core class used to implement an internal admin pointers API.
*
* #since 3.3.0
*/
final class isrc_Internal_Pointers {
/**
* Initializes the new feature pointers.
*
* #since 3.3.0
*
* All pointers can be disabled using the following:
* remove_action( 'admin_enqueue_scripts', array( 'WP_Internal_Pointers', 'enqueue_scripts' ) );
*
* Individual pointers (e.g. wp390_widgets) can be disabled using the following:
* remove_action( 'admin_print_footer_scripts', array( 'WP_Internal_Pointers', 'pointer_wp390_widgets' ) );
*
* #static
*
* #param string $hook_suffix The current admin page.
*/
public static function enqueue_scripts( $hook_suffix ) {
/*
* Register feature pointers
*
* Format:
* array(
* hook_suffix => pointer callback
* )
*
* Example:
* array(
* 'themes.php' => 'wp390_widgets'
* )
*/
$registered_pointers = array(
'index.php' => 'wp500_isrc_pointer',
);
// Check if screen related pointer is registered
if ( empty( $registered_pointers[ $hook_suffix ] ) )
return;
$pointers = (array) $registered_pointers[ $hook_suffix ];
/*
* Specify required capabilities for feature pointers
*
* Format:
* array(
* pointer callback => Array of required capabilities
* )
*
* Example:
* array(
* 'wp390_widgets' => array( 'edit_theme_options' )
* )
*/
$caps_required = array(
'wp500_isrc_pointer' => array(
'install_plugins'
),
);
// Get dismissed pointers
$dismissed = explode( ',', (string) get_user_meta( get_current_user_id(), 'dismissed_wp_pointers', true ) );
$got_pointers = false;
foreach ( array_diff( $pointers, $dismissed ) as $pointer ) {
if ( isset( $caps_required[ $pointer ] ) ) {
foreach ( $caps_required[ $pointer ] as $cap ) {
if ( ! current_user_can( $cap ) )
continue 2;
}
}
// Bind pointer print function
add_action( 'admin_print_footer_scripts', array( 'isrc_Internal_Pointers', 'pointer_'.$pointer ) );
$got_pointers = true;
}
if ( ! $got_pointers )
return;
// Add pointers script and style to queue
wp_enqueue_style( 'wp-pointer' );
wp_enqueue_script( 'wp-pointer' );
}
/**
* Print the pointer JavaScript data.
*
* #since 3.3.0
*
* #static
*
* #param string $pointer_id The pointer ID.
* #param string $selector The HTML elements, on which the pointer should be attached.
* #param array $args Arguments to be passed to the pointer JS (see wp-pointer.js).
*/
private static function print_js( $pointer_id, $selector, $args ) {
if ( empty( $pointer_id ) || empty( $selector ) || empty( $args ) || empty( $args['content'] ) )
return;
?>
<script type="text/javascript">
(function($){
var options = <?php echo wp_json_encode( $args ); ?>, setup;
if ( ! options )
return;
options = $.extend( options, {
close: function() {
$.post( ajaxurl, {
pointer: '<?php echo $pointer_id; ?>',
action: 'dismiss-wp-pointer'
});
}
});
setup = function() {
$('<?php echo $selector; ?>').first().pointer( options ).pointer('open');
};
if ( options.position && options.position.defer_loading )
$(window).bind( 'load.wp-pointers', setup );
else
$(document).ready( setup );
})( jQuery );
</script>
<?php
}
/**
* Display a pointer for wp500_isrc_pointer
*
* #since 4.9.6
*/
public static function pointer_wp500_isrc_pointer() {
$content = '<h3>' . __( 'Personal Data and Privacy' ) . '</h3>';
$content .= '<h4>' . __( 'Personal Data Export and Erasure' ) . '</h4>';
$content .= '<p>' . __( 'New <strong>Tools</strong> have been added to help you with personal data export and erasure requests.' ) . '</p>';
$content .= '<h4>' . __( 'Privacy Policy' ) . '</h4>';
$content .= '<p>' . __( 'Create or select your site’s privacy policy page under <strong>Settings > Privacy</strong> to keep your users informed and aware.' ) . '</p>';
if ( is_rtl() ) {
$position = array(
'edge' => 'right',
'align' => 'bottom',
);
} else {
$position = array(
'edge' => 'left',
'align' => 'bottom',
);
}
$js_args = array(
'content' => $content,
'position' => $position,
'pointerClass' => 'wp-pointer arrow-bottom',
'pointerWidth' => 420,
);
self::print_js( 'wp500_isrc_pointer', '#menu-settings', $js_args );
}
/**
* Prevents new users from seeing existing 'new feature' pointers.
*
* #since 3.3.0
*
* #static
*
* #param int $user_id User ID.
*/
public static function dismiss_pointers_for_new_users( $user_id ) {
add_user_meta( $user_id, 'dismissed_wp_pointers', 'wp500_isrc_pointer' );
}
}

Answer 2

What you are looking for is WordPress Activation / Deactivation Hooks. For example:
register_activation_hook( __FILE__, 'pluginprefix_function_to_run' );
And on pluginprefix_function_to_run, display a nice message to let users know that you've added a menu using admin_notices:
function my_admin_notice() {
?>
<div class="updated">
<p><?php _e( 'Your message goes here!', 'my-text-domain' ); ?></p>
</div>
<?php
}
function pluginprefix_function_to_run() {
add_action( 'admin_notices', 'my_admin_notice' );
}