wp_enqueue_script inside shortcode [closed] - wordpress

Question

Closed. This question is off-topic. It is not currently accepting answers.
Want to improve this question? Update the question so it's on-topic for Stack Overflow.
Closed 10 years ago.
Improve this question
hi so I used a great tutorial off of http://scribu.net/wordpress/optimal-script-loading.html and I am having trouble loading the scripts when a shortcode called lightbox is used here is my code. I am at the page when it is called wanted to check with someone to see if it is properly written.
add_shortcode('lightbox', 'lightbox_handler');
function lightbox_handler($atts) {
$base = get_stylesheet_directory_uri();
wp_enqueue_script('jquery-mousewheel', $base . '/js/jquery.mousewheel-3.0.6.pack.js', array('jquery'), null, true);
wp_enqueue_script('jquery-fancybox', $base . '/js/jquery.fancybox.pack.js', array('jquery'), '1.0', true);
wp_enqueue_script('jquery-fancybox-buttons', $base . '/js/jquery.fancybox-buttons.js', array('jquery-fancybox'), '1.0', true);
wp_enqueue_script('jquery-fancybox-media', $base . '/js/jquery.fancybox-media.js', array('jquery-fancybox'), '1.0', true);
wp_enqueue_script('jquery-fancybox-thumbs', $base . '/js/jquery.fancybox-thumbs.js', array('jquery-fancybox'), '1.0', true);
wp_enqueue_style('jquery-fancybox', $base . '/css/jquery.fancybox.css', false, '1.0', true);
wp_enqueue_style('jquery-fancybox-buttons', $base . '/css/jquery.fancybox-buttons.css', array('jquery-fancybox'), '1.0', true);
wp_enqueue_style('jquery-fancybox-thumbs', $base . '/css/jquery.fancybox-thumbs.css', array('jquery-fancybox'), '1.0', true);
}
function lightbox( $atts, $content = null ) {
$defaults = apply_filters( 'toggle_shortcode_args',
array(
'title' => '',
'id' => '',
'type' => '',
'rel' => '',
'url' => '',
)
);
extract( shortcode_atts( $defaults, $atts ) );
$html .= '<a class="'.$id.'" rel="'.$rel.'" data-fancybox-group="gallery" href="'.$url.'" title="'.$title.'"><img src="'.$url.'" alt="" />';
$html .= '</a>';
return $html;
}

Answer 1

First point: that tutorial is based on an old version of WordPress; don't follow that one. Now:
The handle you specify in wp_register_script() must be unique. You are reusing the same handle (fancybox) for all scripts; this won't work. Give each one a different handle, e.g. 'jquery-mousewheel', 'jquery-fancybox', 'jquery-fancybox-buttons', etc. Try to stick to established naming habits that WordPress uses, see wp_enqueue_script() default scripts for examples.
If you want your scripts to be output in the footer, just say so in wp_register_script() (which you have); there is no need to use the wp_footer action. Styles should be output in the header anyway, not the footer.
You can tell WordPress to register and enqueue scripts and stylesheets for output with one call each: wp_enqueue_script() and wp_enqueue_style(). There is no need to register, then enqueue, in your simple case.
The best action hook for registering and enqueueing scripts is 'wp_enqueue_scripts'. Try to only use that one except in special circumstances.
Bonus points: where a script name already includes the version number, you can suppress the extra '?ver=nnn' that WordPress tacks on by passing null as the version string.
And finally, get_stylesheet_directory_uri() doesn't take any arguments.
NB: this gets your script working. One thing your linked tutorial does differently is only output your scripts conditionally, but there are better tutorials on that subject linked at the bottom of the wp_enqueue_scripts() manual page. First, get your site working!
class fancy{
static function init() {
add_shortcode('lightbox', array(__CLASS__, 'handle_shortcode'));
add_action('wp_enqueue_scripts', array(__CLASS__, 'wp_enqueue_scripts'));
}
static function handle_shortcode($atts) {
self::$add_script = true;
// actual shortcode handling here
}
static function wp_enqueue_scripts() {
$base = get_stylesheet_directory_uri();
wp_enqueue_script('jquery-mousewheel', $base . '/js/jquery.mousewheel-3.0.6.pack.js', array('jquery'), null, true);
wp_enqueue_script('jquery-fancybox', $base . '/js/jquery.fancybox.pack.js', array('jquery'), '1.0', true);
wp_enqueue_script('jquery-fancybox-buttons', $base . '/js/jquery.fancybox-buttons.js', array('jquery-fancybox'), '1.0', true);
wp_enqueue_script('jquery-fancybox-media', $base . '/js/jquery.fancybox-media.js', array('jquery-fancybox'), '1.0', true);
wp_enqueue_script('jquery-fancybox-thumbs', $base . '/js/jquery.fancybox-thumbs.js', array('jquery-fancybox'), '1.0', true);
wp_enqueue_style('jquery-fancybox', $base . '/css/jquery.fancybox.css', false, '1.0', true);
wp_enqueue_style('jquery-fancybox-buttons', $base . '/css/jquery.fancybox-buttons.css', array('jquery-fancybox'), '1.0', true);
wp_enqueue_style('jquery-fancybox-thumbs', $base . '/css/jquery.fancybox-thumbs.css', array('jquery-fancybox'), '1.0', true);
}
}
fancy::init();
PS: I suspect that jquery.fancybox.pack.js is a packed (i.e. minified) version of jquery.fancybox.js, so use that one as 'jquery-fancybox' if it is; you don't need both.

Answer 2

The first argument to wp_register_script needs to be unique for each script (see the codex), so you might need names like "fancybox.mousewheel", "fancybox", "fancybox.buttons" etc to differentiate. I'd check, but I suspect you only need one of fancybox.js and fancybox.pack.js - I'd think the pack file is a minified version of fancybox.js
But what version of WordPress are you using? The link at the top of the tutorial you mentioned shows a cleaner way to do it in WordPress 3.3+, removing the need for the class.