set_textdomain = 'mytextdomain'; //add the capability a user must have to view the tutorial $tutorial->set_capability = 'manage_options'; //optionally add some custom css. This example give our title a red background and loads up our modified pointer image sprite to the up arrow will be red too $tutorial->add_style('.my_tutorial-pointer .wp-pointer-content h3 { background-color: #b12c15; } .my_tutorial-pointer .wp-pointer-arrow { background-image: url("'.plugins_url( 'includes/images/arrow-pointer-red.png' , __FILE__ ).'"); }'); //optional shortcut to add a custom icon, just pass a url $tutorial->add_icon( plugins_url( 'includes/images/my-logo-white.png' , __FILE__ ) ); //start registering steps. Note the 'content' argument is very important, and should be escaped with esc_js() as it will go in JSON $tutorial->add_step(admin_url('index.php'), 'index.php', '#wpmudev_widget', __('Step Number One', 'mytextdomain'), array( 'content' => '
' . esc_js( __('On each category page, plugins and themes are listed in an easy to read grid format.', 'mytextdomain') ) . '
', 'position' => array( 'edge' => 'bottom', 'align' => 'left' ), )); $tutorial->add_step(admin_url('index.php'), 'index.php', '#toplevel_page_wpmudev', __('Step Number Two', 'mytextdomain'), array( 'content' => '' . esc_js( __('On each category page, plugins and themes are listed in an easy to read grid format.', 'mytextdomain') ) . '
', 'position' => array( 'edge' => 'top', 'align' => 'right' ), )); $tutorial->add_step(admin_url('index.php'), 'index.php', '#wdv-release-install', __('Step Number Three', 'mytextdomain'), array( 'content' => '' . esc_js( __('On each category page, plugins and themes are listed in an easy to read grid format.', 'mytextdomain') ) . '
', 'position' => array( 'edge' => 'left', 'align' => 'top' ), )); //second page steps $tutorial->add_step(admin_url('admin.php?page=my-plugin'), 'toplevel_page_wpmudev', '.nav-tab-wrapper', __('Step Number Four', 'mytextdomain'), array( 'content' => '' . esc_js( __('On each category page, plugins and themes are listed in an easy to read grid format.', 'mytextdomain') ) . '
', 'position' => array( 'edge' => 'top', 'align' => 'center' ), )); $tutorial->add_step(admin_url('admin.php?page=my-plugin'), 'toplevel_page_wpmudev', '.wdv-grid-wrap .themepost:not(.installed):first', __('Step Number Five', 'mytextdomain'), array( 'content' => '' . esc_js( __('On each category page, plugins and themes are listed in an easy to read grid format.', 'mytextdomain') ) . '
', 'position' => array( 'edge' => 'left', 'align' => 'center' ), )); $tutorial->add_step(admin_url('admin.php?page=my-plugin'), 'toplevel_page_wpmudev', '.wdv-grid-wrap .themepost:not(.installed):first .themescreens .metainfo a', __('Step Number Six', 'mytextdomain'), array( 'content' => '' . esc_js( __('On each category page, plugins and themes are listed in an easy to read grid format.', 'mytextdomain') ) . '
', 'position' => array( 'edge' => 'top', 'align' => 'left' ), )); //start the tutorial $tutorial->initialize(); You may want to later show a link to restart the tutorial, or start at a certain step. You can grab a link for that via start_link($step). $step = 0; //Note that steps start at 0, then 1,2,3 etc. $link = $tutorial->start_link($step); } Have fun! */ if ( !class_exists( 'Pointer_Tutorial' ) ) { /* * class Pointer_Tutorial * * @author Aaron Edwards (Incsub) * @version 1.0 * @requires WP 3.3 * * @param string $tutorial_name Required: The name of this tutorial. Used for user settings and css classes. * @param bool $redirect_first_load Optional: Set to true to redirect and show first step for those who have not completed the tutorial. Default true * @param bool $force_completion Optional: Set to true to redirect and show the current step for those who have not completed the tutorial. Basically forces the tutorial to be completed or dismissed. Default false. */ class Pointer_Tutorial { private $registered_pointers = array(); private $page_pointers = array(); private $tutorial_name = ''; private $tutorial_key = ''; private $admin_css = ''; private $textdomain = 'pointers'; private $capability = 'manage_options'; //these are public in case you need to change them directly after registering the tutorial public $redirect_first_load = true; public $force_completion = false; public $hide_dismiss = false; //hides the dismiss tutorial link public $hide_step = false; //hides the current step label /* * function __construct * * Create your tutorial using this method. * * @param string $tutorial_key Required: The key of this tutorial. Used for user settings and css classes. Should not be changed. * @param string $tutorial_name Required: The nice name of this tutorial. Should be i18n. * @param bool $redirect_first_load Optional: Set to true to redirect and show first step for those who have not completed the tutorial. Default true * @param bool $force_completion Optional: Set to true to redirect and show the current step for those who have not completed the tutorial. Basically forces the tutorial to be completed or dismissed. Default false. */ function __construct( $tutorial_key, $tutorial_name = '', $redirect_first_load = true, $force_completion = false ) { global $wp_version; //requires WP 3.3 if ( version_compare($wp_version, '3.3-beta4', '<') ) return false; $this->tutorial_key = sanitize_key( $tutorial_key ); $this->tutorial_name = empty($tutorial_name) ? __('Tutorial', $this->textdomain) : trim($tutorial_name); $this->redirect_first_load = $redirect_first_load; $this->force_completion = $force_completion; } /* * function add_step * * Register your individual steps using this method. * * @param string $url Required: The admin url of the step. Can be just index.php, but better to pass a full url from admin_url() or network_admin_url() functions. * @param string $hook Required: This is the wordpress hook suffix for the page. This is returned by add_menu_page() or can be nabbed from the $hook_suffix global * @param string $selector Required: The jQuery selector to attach the pointer to. It should only select one DOM element. * @param string $title Optional: The title of the pointer. Leave empty to add no title/icon. No HTML allowed. * @param array|string $args Required: The javascript arguments for the pointer jQuery plugin. content, position, pointerClass, pointerWidth, etc. */ public function add_step( $url, $hook, $selector, $title, $args ) { //add title if given if ( !empty($title) ) $args['content'] = '