WordPress Pointer feature detailed

Lets make a Pointers code for new WordPress 3.5+
Share this post and Be Happy!

In one of the WordPress (seems in 3.3) releases new cool features appeared — new pointers (with new design in 3.5) that help users to work in the admin area easier. In fact, this is a jQuery widget that can be stuck to various DOM elements, such as buttons, links and etc. They look as notifications to the user that make his work in the admin panel more pleasant. They also present user-friendly attitude that produces good impression. It helps users who are new to WordPress to get accustomed to this CMS.

Due to the right location of the source code, the pointers can be used not only in the admin area.

You can apply pointers, when you create your own products. You can, for instance, create theme supporting them or make your plugin.

How to use pointers in your products

Try to experiment first LenSlider code experience. Create a child theme to introduce changes there so that you could always play everything back in case you do something wrong.

The first thing you should do is to create functions.php file.

Add the code you have created to add scripts and styles for pointers. Also we add a function for display content of pointers for plugin page, and we will check it by standart WordPress admin GET-param for plugins named page.

Ok, lets make our JS file lenslider.pointer.js located in /len-slider/js with a function

A variable was set to include the content of pointer. You should take into consideration that pointer content was included to the block with javascript.

After a portion of php code pointer function is called in jQuery, supplying the function with selector — a DOM object for the pointer use. If can apply the pointer, for instance, to menu-appearance — id for sector Appearance, located in the admin menu. Special developers’ tools were devised for that in Chrome and can resort to them if you look for these elements.

Then we need to determine the position in the pointer, setting its position by position argument.

Close argument runs as you choose the close button. In the end call to .pointer(‘open’) is added to show the pointer.

When the result is obtained, the other part of the problem should be solved. It is necessary to avoid the situation when pop-up window appears again and again. When help is annoying, it is not user-friendly and the impression will be quite the opposite.

How to close the pointer

There was a suggestion to make user setting to manage the pointers that would combine cookies with WP individual options. Alternatively, use of meta table alongside with AJAX calls for closing can be employed.

Though many expected that API pointers would be introduced in WordPress, it still didn’t happen. AJAX use and attachment to pointer close can be a good guidance for us how to fulfill the task.

This is just a short description of such interesting feature in WP as pointers. Look at the way they function on your WordPress website and try to experiment, adding them to the product you make. It is not that hard in fact to create your own products with such feature. You can use it to your benefit!

Share this post and let Your Dreams come true!
About The Author

Hi, I'm Igor, one of many PHP/WordPress developers. I'll try to share here WordPress news and development ideas/hacks here. I'll be glad if you share my texts via socials. Have a good day!

Leave a Reply

Your email address will not be published. Required fields are marked *

nine − = 6

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">

© 2013 LenSlider. All rights reserved.