Create custom Dashboard notifications with WordPress Pointers

11
Mar

Pointers were introduced with the release of WordPress 3.3 and present a bold and unique way of displaying a notification when logging into the WordPress Dashboard.

WordPress just keeps getting better and better and with each new major release comes some really nifty features. The feature that I would like to discuss in this article is the new Pointers feature.

First things first, What are WordPress Pointers?

Pointers highlighting new WordPress features

Pointers highlighting new WordPress features

You probably came across the WordPress pointers when you updated your version of WordPress to 3.3.

A Pointer or Admin Pointer is a notification message that is displayed in the WordPress Dashboard when a new user-facing feature is included in a core update. The pointer highlights the new feature a la Facebook, Gmail, etc.

Some WordPress users may find the new popup message windows a little intrusive and many of us welcome the great new feature. One great thing about the new Pointers is the ability to “tap” into the WordPress core code and create your own personal popup notification messages. This could be really beneficial if you are designing WordPress sites for clients and would like to display a personal message once they first login to the Dashboard.

The Pointers API is quite simple. It’s basically a jQuery widget which you can stick to things like buttons, menus, links and any other elements in the DOM.

Create your own WordPress Pointer alert message

One of the best things about WordPress is the ability to tap into the core framework or extend the built in functionality. Pointers are no different. You can create and display your own unique alert messages.

To implement this shortcode we first need to navigate to our theme directory.
Navigate to wp-content -> themes -> your-curent-theme and open the functions.php file.

Copy the below functions and add it to your current active themes functions.php

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
/*
    Display custom WordPress Dashboard Pointers alerts
    Usage: Modify the $pointer_content message to the message you wished displayed
*/
add_action('admin_enqueue_scripts', 'enqueue_custom_admin_scripts');
 
function enqueue_custom_admin_scripts() {
    wp_enqueue_style('wp-pointer');
    wp_enqueue_script('wp-pointer');
    add_action('admin_print_footer_scripts', 'custom_print_footer_scripts' );
}
function custom_print_footer_scripts() {
    $pointer_content = 'WPInsite | http://www.wpinsite.com';
    $pointer_content .= 'Welcome to your custom WordPress installation. Please navigate to the settings page to change your site preferences';
?>
<script type="text/javascript">
jQuery(document).ready( function($) {
    $('#menu-appearance').pointer({
        content: '<?php echo $pointer_content; ?>',
        position: 'top',
        close: function() {
            // This function is fired when you click the close button
        }
      }).pointer('open');
   });
}
</script>
/*
    Display custom WordPress Dashboard Pointers alerts
    Usage: Modify the $pointer_content message to the message you wished displayed
*/
add_action('admin_enqueue_scripts', 'enqueue_custom_admin_scripts');

function enqueue_custom_admin_scripts() {
    wp_enqueue_style('wp-pointer');
    wp_enqueue_script('wp-pointer');
    add_action('admin_print_footer_scripts', 'custom_print_footer_scripts' );
}
function custom_print_footer_scripts() {
    $pointer_content = 'WPInsite | http://www.wpinsite.com';
	$pointer_content .= 'Welcome to your custom WordPress installation. Please navigate to the settings page to change your site preferences';
?>
<script type="text/javascript">
jQuery(document).ready( function($) {
    $('#menu-appearance').pointer({
        content: '<?php echo $pointer_content; ?>',
        position: 'top',
        close: function() {
            // This function is fired when you click the close button
        }
      }).pointer('open');
   });
}
</script>

New Dashboard Pointer alert message

As you can see, it is fairly simple and straightforward to display any alert message of your choosing. This particular code snippet will attach itself to the “Appearance” menu.

Be sure to check out our other great WordPress Code Snippets and WordPress Articles.
Enjoy this article? If so, we would love to hear your thoughts in the comments below

 

Related Blog Posts

Leave a Reply