As I was designing this personal website on the WordPress engine, I decided to use the famous Lightbox to display my Portfolio page. I had used it for other sites before (not on the plugin basis) but to my dismay, it failed to work. I then installed the Lightbox 2 Plugin for WordPress, thinking that something in WordPress was screwing it up. It took me so long to find the answers, and I would like to present it here in the hopes of providing a more comprehensive and straightforward solution.

Many blogs out there will tell you that the first thing to check is whether you have wp_head() function in your header.php.

Including <?php wp_head(); ?> in your header.php lets WordPress scan for all the enabled plugins, generate the code for CSS and Javascript declarations needed to style them, and dynamically insert them. Lightbox CSS and JS files fall within its realm and it’s a good idea to check this.

So you can imagine my frustration when this didn’t solve the problem. After hours of internet research, I realized that jQuery, which I was using to systematically add styling to my list items, interferes with the Prototype-based JS files used by Lightbox. This can be easily fixed by adding a declaring a no-conflict variable and using it to call every function:

I hope this saved someone hours of Googling.