The contents of this popular post are outdated as of WordPress 3.9. Check out the update on styling these new HTML5 galleries.

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 "

(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)('|\")(.*?)>(.*?)<\/a>/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.

Want blog posts sent directly to your email?

Sign up to get emails from Logos Creative! You'll get the latest blog posts and an occasional extra email. Unsubscribe (easily) at any time.

July 31, 2010 — 27 Comments — In Blog, Tutorial, WordPress
  • Meduse

    Thus… One very good solution. Thanks a lot for this post !!!

  • Ok, that is useful !
    Thanks for sharing.

  • Ant

    Hi,

    Thanks for the information I am testing but no luck so far, hoping you might be able to help! I have registered and enqueued the scripts and style for prettyphoto in the functions.php as well as the code above, but the individual images still load in a separate page as before. Does all the code go into the functions.php file or is some supposed to go into the header.php?

    Thanks,

    Ant

    • cliff

      Ant,

      Everything but the CSS would go in your functions.php file, yes. A couple of things:

      I know you’ve registered and enqueued, but make sure the file is definitely being loaded, and after jQuery. Use your browser tools to check for JS errors.
      Make sure you’re not including a target="_blank" on those links.

      If you need more help, let me know, and we’ll get things working!

  • Ant

    Hi Cliff,

    Thanks for the speedy response and appreciate your time on this. Ok checked a couple of things but have to admit fairly new to PHP and WP, but have some HTML and CSS experience. Looked at the webpage via Firebug and firstly the prettyphoto script is appearing in the head, the images in the gallery don’t have a target=”_blank” on them,, but neither do they have a rel=”prettyphoto” (not sure if they should, but my understanding of the code it adds this to gallery item links?). This is all running on a WAMP server so cannot point you to a link. I am running WP 3.4.1 not sure if this has anything to do with it? This is also on my first custom theme I am building so highly likely it is something I have done/or not. I know I have also registered and a enqueued the WP jQuery script and carried out the same proceedure with links for the prettyphoto as per best practice for scripts.

    I have integrated nivoslider ok into my theme and not running much else so far, but it could well be something in my code so understand if this cannot be solved!

    Cheers,

    Ant

    • cliff

      Ant,

      The rel=”prettyphoto” should appear on the links surrounding the images, not the images themselves. Are they appearing there? If so, just check and make sure the PrettyPhoto script is loading after jQuery.

      You might also want to turn on WP_DEBUG to see if that gives you any valuable info.

  • Ant

    Cliff,

    Thanks and cheers for the tip that highlighted an issue I wasn’t aware of which was easy to solve. I still have the issue but will do some further digging with this new tool.

    Thanks again,

    Ant

  • Nice post man, really helped me out!
    I still had a problem where the containing div (div.gallery) would disappear.
    While I was looking where the ‘gallery_style’ was applied, I found that there is also a ‘use_default_gallery_style’ action now.
    just return false and you’re golden:)

    function no_gallery_style(){
    return false;
    };
    add_filter(‘use_default_gallery_style’, ‘no_galery_style’);

    • Cliff Seal

      Good call, Midge! You can actually shorten that up a bit with add_filter( 'use_default_gallery_style', '__return_false' );.

  • Hndsght

    Is there a way to ad a element around the gallery?

    • Cliff Seal

      You can select ‘Media File’ in the ‘Link to’ section when inserting the gallery to have the images point to the actual files. Is that what you mean? Otherwise, you’re going to have a elements inside of one another.

  • Brandon Frank

    I am getting the following error. Warning: preg_replace() [function.preg-replace]: Compilation failed: unmatched parentheses at offset 2 in /home/content/21/11501821/html/powerbox/wp-content/themes/powerbox/functions.php on line 67 **line 67 is: $content = preg_replace($pattern, $replacement, $content); Any solutions would be greatly appreciated.

    • Mikkel

      Get the same. This does not seem to work in 3.6, php 5.4.10

    • Cliff Seal

      Eh, it looks like my code was just being oddly cut off when displaying. I made an update above that should show everything properly now. Sorry!

      • Brandon Frank

        Thank You for fixing that. I just got started with WordPress a few days ago but I love the flexibility this code provides. Would you mind explaining how I get PrettyPhoto to work. I downloaded the files and put them in the appropriate folders(e.g.. scripts,, images, css) but am not sure what to do after that.

      • Dotted Squirrel

        So what’s the solution? I’m getting the same error as Frank and the code is exactly the same…

        Warning: preg_replace(): Compilation failed: unmatched parentheses at offset 2 in C:xampphtdocswordpresswp-contentthemesWriterlyfunctions.php on line 172

        Line 172 – $content = preg_replace($pattern, $replacement, $content);

        I think the code is still oddly cut off on the display?

        • Mark

          Seems to still be cutting off some of the code. If you view the source of this page you can copy the full code which is:

          // 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 = ‘ID.’]”$6>$7‘;
          $content = preg_replace($pattern, $replacement, $content);
          return $content;
          }

        • FYI: an alternative to filtering strings through PHP here is to use Javascript instead. You can see in my Nivo Lightbox plugin that I add an attribute to gallery images directly (to have them be connected in the lightbox), and then apply the affect to any links that are images (jQuery('a:has(img)')): https://github.com/logoscreative/Nivo-Lightbox/blob/master/nivo-lightbox-init.js

          So, you could do something more like jQuery('a:has(img)').prettyPhoto();. Roll with JS selectors if you’re having trouble with the filtering.

  • Dmitry

    Hi there, is there a way to add a custom css class to the last thumbnail in each row as I am finding when I add margin-right:40px to them the last thumbnail in each row gets bumped over?

  • AnonyousCoward

    I spent hours trying to figure this out before finally coming across this page. This was EXTREMELY helpful, thank you!

  • promovareseo

    Ok, that is useful !
    Thanks for sharing.

    Rca Ieftin Craiova

  • charlie

    Thanks for the post!

    SOS:
    Is there a way to customise the standard wordpress gallery slideshow so that when put into a blog post it will only display (and therefore load) the first image of the set until the user actually clicks on the “read more” button in the blog post, at which point they will be taken to the entire blog post with the full gallery slider. My blog homepage is taking forever to load because there’ a gallery slideshow in every post!
    Any help would be greatly appreciated
    -Charlie from Melbourne

  • Pingback: Styling an HTML5 WordPress Gallery()