Is it possible to create a WordPress tour? V3.3.1

by

I’ve recently upgraded to version 3.3.1 and noticed a nice feature that would be great for our non-Wordpress savvy clients – creating a tour of how to use WordPress.

I’ve used the Yoast SEO plugin for a long time and they’ve added a tour feature, which when you click the next buttons it goes through the various features (see screenshot):

enter image description here

Is it possible to create a custom tour of WordPress on how to add pages, posts etc and create our own help content to go with it.

I’ve got a standard set of plugins I tend to use so the tour (if possible) would need to jump through both the standard WordPress setup as well as all the different plugins.

UPDATE:

I’ve dug around the web and found the following code. This will create a one off pointer that you can put custom content in. The only problems are that the popup appears with every reload even when it’s dismissed (is there a way to improve the usability of this?) and also it’s a one off window rather than a tour.

Just use Firebug to find the div you want to attach the pointer to.

/*
    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="<h3>The Works http://www.teamworksdesign.com</h3>";
    $pointer_content .= '<p>Welcome to your custom WordPress installation. Please navigate to the settings page to change your site preferences</p>';
?>
   <script type="text/javascript">
   //<![CDATA[
   jQuery(document).ready( function($) {
    $('#menu-posts-events').pointer({
        content: '<?php echo $pointer_content; ?>',
        position: 'left',
        close: function() {
            // This function is fired when you click the close button
        }
      }).pointer('open');
   });
   //]]>
   </script>
<?php
}

4 s
4

If you look at this plugin I wrote as a demonstration on using pointers, you will see how to create them and have them close correctly:

https://github.com/Tarendai/WP-Pointer-Pointers

This plugin creates ‘pointer pointers’:

enter image description here

Leave a Comment