I’m a fan of learning how to customize WordPress without a plugin. It’s not because I don’t like them- they’re one of the reasons WordPress is such an incredible platform. However, for one thing, learning to custom code your own functions into the functions.php file allow you to familiarize yourself with the programming language (always a good thing). Second, and perhaps most importantly, the more plugins you run at a time, the more potential conflicts you have between individual plugins and even the version of WordPress; not to mention they can bog your site down.
So, while there are plenty of ready-made themes and plugins that can help you customize your WordPress gallery, a few lines of code will help you take control yourself! When you have a theme that doesn’t override the default styling parameters that WordPress inserts into the middle of your code (which can invalidate your XHTML), you can end up with an ugly display of images. So, step one of two in taking control of the gallery is to tell WordPress you don’t want its code in the middle of your page- you want to control it from your CSS stylesheet.
Insert this into your functions.php file:
// Remove Gallery Styling
add_filter( 'gallery_style', 'my_gallery_style', 99 );
function my_gallery_style() {
return "";
}
add_filter( 'use_default_gallery_style', '__return_false' );
(Thanks to Midge for mentioning the recent `use_default_gallery_style` filter we need to return false on.)
Then, add the code it would have inserted into the page into your stylesheet, and customize as desired:
.gallery {
margin: auto;
}
.gallery-item {
float: left;
margin-top: 10px;
text-align: center;
width: 33%;
}
.gallery img {
border: 2px solid #cfcfcf;
}
.gallery-caption {
margin-left: 0;
}
Now you have control! The second step is to integrate some JavaScript to make an image that’s clicked on pop up in a cool overlay instead of a blank page. This site uses prettyPhoto, which is quite similar to Lightbox and the like. Integrate whichever suits you (there’s hundreds more than those two) per the site’s instructions. Pay close attention to how your image is integrated into it- for instance, for prettyPhoto, any image link needs to have rel="prettyphoto" added to make it work. We can use a function to make that happen automatically:
// Make prettyPhoto Work
add_filter('the_content', 'addprettyphotorel', 12);
add_filter('get_comment_text', 'addprettyphotorel');
function addprettyphotorel($content) {
global $post;
$pattern = "/]*).(bmp|gif|jpeg|jpg|png)('|\")(.*?)>(.*?)/i";
$replacement = '$7';
$content = preg_replace($pattern, $replacement, $content);
return $content;
}
The function’s name, ‘addprettyphoto’, can be changed to anything you like as long as it’s the same in all three instances. Inside the brackets of the function, where you see rel="prettyphoto['.$post->ID.']", change the term ‘prettyphoto’ to whatever your rel link needs to be for the image JS you’ve chosen. You can also replace the ['.$post->ID.'] or erase it if it interferes- it’s only there to help organize the gallery. If your JS works on something different than a rel link, replace the whole rel="prettyphoto['.$post->ID.']" in the function above with whatever you need.