Do you get any errors?
Are you using other javascript libraries? Ones that use the $-character? You may have to change the ‘$’ in scripts to ‘jQuery’ to make it work or declare a no-conflict rule/reserve the use of the $ for jQuery.
(I haven’t tried Colorbox but I have used Thickbox on my blog before, which is also jQuery-based, if I’m correct. I use shadowbox now.)
Thread Starter
Sean
(@aristophanes)
Hi esmi and thijs77, thank you both for your help. I’ve been adding scripts to themes the wrong way for a while then!
My header.php’s <head> now looks like this:
...
<?php if (!is_admin()) {
wp_enqueue_script('jquery');
/* Colorbox */
wp_register_style('colorbox_css', get_bloginfo('template_directory') . '/js/colorbox/colorbox.css');
wp_enqueue_style('colorbox_css');
wp_register_script('colorbox', get_bloginfo('template_directory') . '/js/colorbox/jquery.colorbox-min.js');
wp_enqueue_script('colorbox');
}; wp_head(); ?>
<script>
jQuery(document).ready(function(){
jQuery("a[rel='colorbox']").colorbox();
});
jQuery("#menu > li").click(function() {
jQuery("ul", this).slideToggle(400);
}, function (){});
});
</script>
</head>
I’ve checked the file paths again and they’re fine. Unfortunately this didn’t fix Colorbox, and the jQuery menu above no longer works. It was working while I included jquery manually in sidebar.php where #menu lives (an earlier mistake/temporary measure), but now doesn’t work with or without that manual include. Without it, I noticed that WP also wasn’t automatically including jQuery in <head>, which is why I added wp_enqueue_script('jquery'); but again to no avail.
So to clarify, I’ve removed manual js includes in and out of <head> and have declared and enqueued custom scripts/styles the safe way as above. I’ve tried using the jQuery notation (rather than $), and moving the contents of <script> into <body>, but the problem persists.
Thanks for putting me on the right path.
You have an extra set of closing parentheses in your code (line 4). Also, you can put an anonymous function wrapper around your jQuery stuff, pass in the no-conflict jQuery variable and keep using the dollar sign. Here’s the corrected code:
<script type="text/javascript">
(function($) {
$(document).ready(function(){
$("a[rel='colorbox']").colorbox();
$("#menu > li").click(function() {
$("ul", this).slideToggle(400);
});
});
})(jQuery);
</script>
Thread Starter
Sean
(@aristophanes)
My coder / web developer friend pointed out the stray }); after the colorbox function, and used this notation to resolve the conflict with $s:
<script type="text/javascript">
(function($) {
$(document).ready(function() {
$("a[rel='colorbox']").colorbox();
$("#menu > li").click(function() {
$("ul", this).slideToggle(400);
});
});
})(jQuery);
</script>
I’ve still had to manually queue jquery like so, which I thought WP did automatically?:
wp_enqueue_script('jquery');
