Wordpress Joyride for Backend Tour

Question

I just installed aclean copy of wordpress (latest) and the foundation press theme (latest). Is it possible to have Joyride run in the admin area to show clients basic information, if so how do you go about starting that process?

UPDATE: trying to make into a plugin using this but the scripts dont load, im enqueuing them like this. i added the initialization to a seperate js file.

function joyride_enqueued_assets() {
wp_enqueue_script( 'modernizer-js', plugin_dir_url( __FILE__ ) . '/js/modernizer.mq.js', array( 'jquery' ), '1.0', true );
wp_enqueue_script( 'foundation-js', plugin_dir_url( __FILE__ ) . '/js/foundation.js', array( 'jquery' ), '1.0', true );
wp_enqueue_script( 'foundation.joyride-js', plugin_dir_url( __FILE__ ) . '/js/modernizr.js', array( 'jquery' ), '1.0', true );
wp_enqueue_script( 'cookie-js', plugin_dir_url( __FILE__ ) . '/js/jquery.cookie.js', array( 'jquery' ), '1.0', true );
wp_enqueue_script( 'initialize-joyride-js', plugin_dir_url( __FILE__ ) . '/js/initialize-joyride.js', array( 'jquery' ), '1.0', true );
wp_enqueue_script( 'joyride-css', plugin_dir_url( __FILE__ ) . '/css/foundation.css', array( 'stylesheet' ), '1.0', true );

}

Answer 1

It's possible, but since the admin pages don't load the front-end CSS you need to load up the stylesheet containing what you need (as well as the JS files) where you load the tour.

Specifically, if you include the following files, Joyride will work:

• foundation.css
• foundation.js
• foundation.joyride.js
• jquery.cookie.js

You also need to initialize it in JQuery with the following:

<script type="text/javascript">
    jQuery(document).foundation('joyride', 'start');
</script>

Just echo the following to get it to display:

• HTML to include the css/js files
• The ol containing your tour
• The initializer script excerpt

That said, while this will get Joyride working, foundation.css has significant collisions with WordPress's back-end styles. It doesn't necessarily break everything, but things will appear weird and some items will be hidden behind the sidebar menu.

An alternative to work around this is to create a custom .css file containing the styles for the joyride itself and using it in place of foundation.css. Unfortunately, I'm still working on this part of the problem; I actually discovered your question while looking for an answer to it, myself. The idea is solid (copying all of foundation.css into a new file will allow the tour to run), but I haven't been able to pick out just the styles needed or contain them appropriately.