How do you create a basic Wordpress admin pointer?

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

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' );
}

Answer 2

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&#8217;s privacy policy page under <strong>Settings &gt; 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&#8217;s privacy policy page under <strong>Settings &gt; 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' );
    }
}