Create Your Own Custom Pointers in the WordPress Admin

Admin pointers were first added in WordPress 3.3 for the purpose of helping users discover and navigate new features in major releases. For example, when widgets were added to the customizer, an admin pointer displayed to highlight live widget previews on the themes page.

new-feature-admin-pointer

The friendly pointers, when used sparingly, can draw attention to important items and help new users more effectively navigate the admin. Ordinarily, creating your own pointers requires a bit of custom coding. Fortunately, the admin pointers feature is easy to extend, so plugin developers have been able to harness it for unique uses.

Better Admin Pointers is a plugin that makes it possible for anyone to create custom pointers and add them to any screen in the admin. The plugin saves the new pointers as a custom post type. Pointers will display until they are dismissed by the user.

Here’s an example of a pointer created to identify which plugin you’re editing:

edit-plugin

Pointer Customization Options

Better Admin Pointers allows you to customize every aspect of your custom pointers, including:

  • Main content area
  • Pointer id – A unique id so that it can be tracked in the WP DB as dismissed
  • Screen – What page/screen it should appear on
  • Target – CSS id or class we want the pointer to attach to on the screen above
  • Position Edge – Which edge should be adjacent to the target? (left, right, top, or bottom)
  • Position Align – How should the pointer be aligned on this edge, relative to the target? (top, bottom, left, right, or middle)

The plugin’s settings page has a checkbox option to “show current screen,” which will display the value you need for the screen ID when creating a new pointer.

screen-id

The WordPress Plugin API also has a handy Admin Screen Reference where you can easily locate IDs for the screens.

A point of caution here: It’s easy to go overboard creating too many admin pointers. Some popular plugins annoy users to no end with their ever-present pointers. Don’t make this mistake if you decide to customize your own.

While testing the plugin, I was able to create and customize pointers faster than I imagined. The custom post type essentially guides you through the process with an explanation of the values expected in each box. For the average user, the most difficult aspect of customizing a pointer might be setting the target. If you’re not familiar with using your browser to inspect elements, it may be frustrating to determine the right CSS class or ID to use. However, the plugin’s most typical use case is most likely to be a developer setting up pointers for a client website or for someone who is new to WordPress.

I can see pointers being very useful for helping clients navigate custom features that a developer has built into the admin. Better Admin Pointers provides a quick way to write up a few friendly pointers to accompany new or confusing screens. Download it for free from WordPress.org.

13 Comments


  1. What do you think it would take to get these pointers working on the front end of the site?

    Report


    1. That’s just what I was thinking. I’m working on a “student Report’ theme idea and front end pointers could be a way for a teacher to comment on the student’s content.

      Report


    2. Hmm, interesting idea. I don’t think I’ve ever seen front end pointers before. Maybe the customizer would be the way to go or has that ability?

      Report


      1. I believe the BuddyPress Balance theme used to use that script for frontend pointers, was an interesting idea.

        Report


      2. I’ve used joyride inside one of my plugins with great success. It’s fairly easy to set up and is very good at what it accomplishes.

        Report


  2. Hi Sarah!

    I’m going to try this out. I was designing something similar but it was in process, I like how it can attach to id or class.

    I love putting notes on everything.

    Thanks again for your thoughtful posts. Hope all is well. :-)

    Report


  3. My idea was to right click and automatically attach to a class or id.

    Report


  4. Interesting. Would be useful if pointers could be grouped and then sequenced to provide a cheap and cheerful alternative to SideKick.

    Report


  5. Just an FYI, I am the developer of this plugin. I just released version 2.0 which adds the ability to put these on the front end, arrange them along the Z-axis, and use a single pointer on all pages at once in either the admin or the front end.

    Report


    1. Thanks Steven. Amazing plugin; saved me quite a bit of poking around

      Report

Comments are closed.