Using WordPress Custom Fields to Display NextGen Gallery Slideshows Conditionally

SR 20 - Snow Slide (by Washington State Dept of Transportation)

When I was setting up up the NextGen Gallery plugin to manage my portfolio I decided I also wanted to display a slideshow of the images on certain pages. Since NextGen has a Slideshow feature built in (sort of but I’ll get to that) I assumed that this would be a piece of cake (and why is something that is easy called a piece of cake anyway?). But it wasn’t as simple as I though it would be. Fortunately, I found some awesome resources to help me out.

Let’s step back for a second though. NextGen DOES have a slideshow but not ALL of the functionality is built in.

  1. You also need to download the JW Image Rotator, which is not included with the plugin. The only file you need in the package is imagerotator.swf. This file needs to be uploaded in the main NextGen gallery plugin folder.
  2. Set the path to the imagerotator file under Gallery>Options>Slideshow>Path to the Imagerotator. Usually clicking the Search Now button will set the path for you.

Ok – so now the slideshow will work.

NextGen Gallery has shortcodes that can be used in posts and pages. So, if I wanted a slideshow on a post or a page I would use the following.

slideshow id=x w=width h=height surrounded by brackets [ ]

Shortcodes, as far as I know, do not work in the template files, such as the sidebar. Now NextGen does have a sidebar widget that can be used to display the Slideshow in the sidebar but I didn’t want the slideshow on every page – just certain pages. And if a widget can be conditionally displayed, I don’t know how to do it. Additionally, I am not aware of any functions that can be used in the sidebar with NextGen. Maybe there are and I just didn’t find them and I’m certainly not clever enough to write one of my own (yet ;-).

My “yeah I’ll just add the slideshow to certain pages” turned out to not be so simple. So, I did some google searches and came across this awesome article – Inserting a NextGen gallery or slideshow in a custom field. If you are interested in using custom fields to display Next Gen slideshows, galleries, or other features, you should definitely read the article. It truly is a treasure and I couldn’t have done this without that article. The code in the next section comes from it.

How it Works

  1. Add the following code to the sidebar or template file where you want the slideshow or gallery displayed.
    <?php $gallery = get_post_meta($post->ID, 'gallery', true); ?>
    $gal = $gallery;
    $gal = apply_filters('the_content', $gal );
    echo $gal;
  2. On the pages where you actually want the slideshow (or gallery) to show up, you will want to scroll down to the custom field section and add

    name field: gallery
    value field: slideshow=id#,width,height surrounded by brackets [ ]

    In mine I used


    If you want to display a gallery you would use

    gallery=ID# surrounded by brackets [ ]

  3. The first time you are going to add a custom field you will need to select the Add New button. After that the name will be available in the dropdown box.
  4. Now the slideshow will display on the sidebar of the page I filled out the custom field information on. I did this for each one of the pages. If you want a different slideshow or gallery to display, just fill that in on the value field. The same code in the sidebar or other template file will still work.
  5. An example if on my Services page.

I also wanted to use the title ‘Portfolio’ for the slideshow in the sidebar. Since the code for the slideshow is always on the sidebar and is only displayed if the custom field is filled out for that page, the title needed to be displayed conditionally otherwise it would show up on pages where there wasn’t a slideshow. I did this with the following and is just like the code on my How to Conditionally Display Sidebar Content with is_page article. This goes right before the code to display the custom fields.

if (is_page(array('pagename','pagename','pagename','pagename'))) { ;?>
      <h2 class="classname">
        <?php _e('Portfolio'); ?>
<?php } ?>

So, adding the slideshow to the sidebar only on certain pages was more work than I anticipated but I learned a lot. And had some fun. Please do visit Scotproof’s article because the code came from her. She also has a whole category of articles about the NextGen Gallery plugin.

photo credit: Washington State Dept of Transportation

It's Time!

Start your WordPress website project now!

Contact Me! >>


Keep Reading:
Theme Test Drive: A WordPress Plugin for Theme Development
Converting a Static Website to WordPress: Mary Shelley and Frankenstein Part 2
9 Pinterest Plugins for WordPress
How to Delete the Uncategorized Category in WordPress


  1. says

    i’m not using the slide show yet, but i saved this post for future reference. i l like this plugin a lot. there are some glitches with the albums, but otherwise it’s very versatile

    Natural´s last blog post – Why Wait, Buy Now!

  2. says

    This is my first time here, Im happy I came across this article. I currently have a wordpress blog and use the NexGen plugin, I seem to always have issues displaying my pictures the way I really want to. I haven’t installed this yet but will be giving this a try very soon.

    Extreme John´s last blog post – My CommentLuv Project

  3. says

    FYI he updated this plug-in and it is working correctly, the albums don’t post double pics. finally!

    the slide show now is a widget, just a matter of dragging it over to the sidebar and customizing.
    .-= Natural´s last blog ..I am conductor, hear me cook =-.

    • says

      Hi Valerie – I’m really glad the update fixed the problem. I haven’t updated my plugins recently and need to spend some time with that.

      I think the slideshow widget was there before. I didn’t use it because
      I only want the slideshow to appear on certain pages.

  4. Jordan says

    Hi Kim,

    Great website and explanation of the NextGEN slideshow!

    My needs are slightly different, and my php is non-existent…

    I’d like to insert a small slideshow on *every* inner-page – this means all posts (many) and pages (very few), other than the homepage. My theme (Advance Newspaper) has an “inner-page” “mid sidebar” that would be terrific for just that.

    Any suggestions on what’s the correct php code for this? I believe I know where to place it…

    Many Thanks!

    • says

      Hi Jordan,

      You can put the code in #1 in the two templates that you mention. Place the code in the location where you want the slideshow to appear.Then on each post that has photos you want to include, make sure to fill in the custom fields as described in #2.

  5. Jordan says


    THANKS! I tried this a while ago and, of course, it works.

    But, I think, this is not quite what I have in mind. I wasn’t more specific because I didn’t want to limit your response, perhaps I should have been…

    1. I wanted the slideshow to run ‘automatically’ on all post pages, *within* the 275px-wide right-inner column. So, for example, when clicking on any of the post excerpts on the homepage, all post pages will open with the slideshow loading automatically at the top of the inner-right col.

    It would be nice not to have to add any code to all the post pages. I know there are plugins that can add code to post pages automatically, but I wouldn’t want the gallery or thumbnails showing on the post pages themselves.

    2. In addition, ideally, I would like to set it up that by clicking on the sideshow, or a link below it, it will open the images in a gallery page/thickbox.

    Sorry to burden you with all this info, but does this change your advice?

    Many Thanks!

  6. Jordan says


    You might recall that we were looking to have a slideshow on *all* pages… sort of the opposite of the solution you were sharing with us.

    Here’s the solution I came up with: inserted the following php code into the “inner-mid-sidebar” template – meaning the sidebar that’s adjacent to the right-most sidebar on all inner-pages…

    This brings the slideshow to all pages other than the homepage. I decided to provide access to the gallery pages via a standard link – this way the user maintains greater control over the slideshow – clicking to advance the images.

    Could use some tweaking, perhaps, but it works.

    Thanks again for sharing your expertise!

  7. says

    Hi Kim,

    Works great on my site! Thank you so much!

    I wonder if you can point me in the right direction to take this a little further. My slideshow shows up in a div on the left side of the page ( using a custom field. I would like to somehow automatically pull in the gallery title and gallery description in the div on the right based on the slideshow that shows up on that page.

    I’ve tried editing my page template, using a whole bunch of options. Here’s one I tried that was sure to work to show the gallery title, but no love!

    ID, ‘gallery’, true)) {?>

    Any suggestions? Thanks so much!

    .-= Lori´s last blog ..Bamboo Laundry Room =-.

  8. says

    Oops. The sample code I sent didn’t sow up correctly in the post above! Not sure how to make it display correctly. Will try again.

    Apologize if it doesn’t come through, but perhaps you get the idea of what I’m trying to achieve?

    Hope you’re feeling better soon.

    ID, ‘gallery’, true)) {?>

    .-= Lori´s last blog ..Bamboo Laundry Room =-.

  9. says

    Thanks for saving the little bit of hair I have left. I’ve been pulling it out for two days before seeing this post, and now I am on the cusp of success, thanks to your brilliance.

    Hope you can help me out.

    I’m trying to make a template that can pull in blocks of content with embedded shortcodes–a variety of plugins–sniplets, download manager, notes, etc. (I do an online reference guide, and am looking for a uniform look for all the entries that I can easily change. Each section of content is assigned a key and I put the html in as the value)

    So, the problem I am running into is that the code is pulling up some of the plugins that show up at the bottom of the page–ratings and share this–every time I call up the value from the custom field. With two custom fields, I get three ‘share this’ displays–the correct one and one after each value is shown.

    Any ideas on how to get rid of this?

    I’m not much of a programmer–just a muddler, so i just cut and paste code.
    here’s what I am testing


    ID, ‘DiscussionContent’, true); ?>

    <?php the_content(‘Read the rest of this page »’); ?>

    Pages: ‘, ‘after’ => ”, ‘next_or_number’ => ‘number’)); ?>

    <?php edit_post_link(‘Edit this entry.’, ”, ”); ?>

    .-= Jeff Hajek´s last blog ..Work Lean: Ride the Continuous Improvement Wave =-.

  10. mike says

    Try using the Widget Logic plugin, it may save even more time. It adds a variable below the widget so you could do is_page(whatever), or any of the other WP conditionals.

  11. Jonathan Shapiro says

    I came across your post while searching for a solution for why my NextGen Slideshow feature didn’t work. I had downloaded the Image Rotator and correctly uploaded it, but I didn’t know I had to activate it. Thank-you so much for this information! It is working beautifully now. I assume the sidebar widgets will now work too.

    One follow up question, I notice that there is a brief ad that pops up between images. Is there a way to eliminate that–say by registering?

      • Jonathan Shapiro says

        Yes this is with the slideshow. It looks like a balloon like in the comics. It pops up briefly during the transition effects and then goes away. So far, I’ve only previewed my pages, but I have to assume that if I actually make a post, it will appear the same way.

  12. Jonathan Shapiro says

    In the balloon appears the word “jwplayer.” Is this a plug for another product they offer? I just looked at their web site again, and it looks like this is open source.

    I will try posting a live page to my site to see if it looks the same as preview.

    • says

      Hi Jonathan – Did you upload the entire folder for the rotator script? If you are using NextGEN Gallery you only need one file – imagerotator.swf It gets installed in wp-content/plugins/nextgen

      • Jonathan Shapiro says

        Yes, I only uploaded the SWF file. The ImageRotator works. It is just that an ad pops up between slides.

        It looks like I have to purchase the commercial license to get rid of the ad balloon. I went to their web site, and I emailed them about this. They linked me to a registration form. The registered verson removes the ad.

        So even though it is free for non-commercial use, you do get an ad. I will probably register, as I think this a nice add-on for NextGen.

        Thanks for all your help on this.

          • Jonathan Shapiro says

            It probably is new. Too bad for me.

            I bought it last night, and it cost me $85. Ouch! I think it would have been fair to charge more like $25. The $85 does give me the rights to some of their other products such as the flash video player though (if I ever use it).

            I think that is a little steep when you consider that WordPress/NextGen are both free. WordPress is a fantastic product, and NextGen is an amazing plug-in. These are so good, that I intend to donate to both.

            I can’t help but wonder if Alex Rabe would end up using a different product if he knew that the image rotator is not quite as free as it used to be. I’d feel pretty bad if an update suddenly supported a different product.

            Changing the subject a bit, do you know if there is a page somewhere that has all the embed codes for NextGen documented? For example, in your post you show the following:

            slideshow id=x w=width h=height surrounded by brackets [ ]

            Where can I find a complete list of all of these?

  13. says

    I have a question that is slightly unrelated but I was wondering if you can help me. I am using the slideshow on my index.php page on It works fine when I set the id=2 (or any specific gallery number) but I want the slideshow to cycle through ALL the gallery albums (which are all displayed on the portfolio page) and not just the gallery whose id=2. I tried using id=x but it won’t work. Do you have any ideas? Thanks!

      • Danielle says

        Yes, I tried that. When I do:

        it only shows the images from the gallery whose id=1

        This is the code I am currently using. Any ideas if I should change anything?

        The weird thing is that the slideshow sidebar widget has the option to display images from all galleries and that works perfectly. Since it’s a widget, I don’t input any code, I just select that option from a dropdown menu. So I am wondering if it has something to do with the code I am using.


        • Danielle says

          Hmmm, it deleted everything that I had put within the code brackets. How do I type the code so you can see it?

          • Danielle says

            I tried using the code and /code in the previous post. Anyways, here is the code I am using, leaving off the beginning :

            ?php echo do_shortcode(‘[slideshow id=x w=600 h=250]’); ?

            It works fine when I set the id=2 (or any number) but not when id=x to try to get it to read from all the galleries. Am I doing something wrong in the code?

  14. says

    Hi Danielle – I haven’t been able to locate any supporting documentation but I thought that if slideshow=2,3,5,6 was used like that, that maybe it would work.

    I also looked through the php file for the widget but that didn’t really help me figure it out.

    I wonder if slideshows work with albums … if all galleries were put into an album maybe then it could pull that one album. ??

  15. Danielle says

    That is an idea. What PHP code do you think would work to call the album?

    Thanks again for your help. I have posted this topic numerous times in the past few weeks on the forums and no one has replied. So I greatly appreciate your time and thoughts on the matter.

  16. says

    Hi Danielle – Now that I’ve had some time to look around it seems that my logic was correct but that only galleries work with slideshows – not albums. And I haven’t found a way to have multiple galleries in a single slideshow – I’m starting to think that it can’t be done.

    I guess the only thing to really do is make a gallery called ALL or Everything and put all your images in that one gallery. :(

  17. says

    Hi Kim

    I wonder if you might have an answer for me on this one, as I’ve looked everywhere and your site seems to be the most active and helpful!

    I’ve got a wordpress / next-gen gallery / jw image rotator set up on this site (, and all I’d now like it to do is for people to be able to move forward and backward through the slideshow using the arrow keys on their keyboard instead of having to click on the “>” and “<" icons (particularly because the position of these icons moves with each image, annoyingly).

    Can this be done? Or is there another way round it, by say making all the images exactly the same size (although that would be a bit of a pain)?

    Best wishes


  18. says

    Finally, I got closer to learning about how to use the custom fields! Thanks for sharing that.

    Have you tried the WidgetLogic plugin to control what widgets appear in the sidebar of specific pages? It’s pretty powerful once you figure it out how to specify the pages.

  19. saya says

    Thx a lot for this, but it doesn’t seem to work. I’m sure I added the php correctly, as well as the custom field-code, but still nothing

  20. am says

    thanks for ongoing replies
    I am trying to use the code you originally posted for a nggallery in a custom field. What I can’t seem to figure out is how to format the code so that I can identify a template for my entire gallery [nggallery id=1 template=testing]
    What php would I need to pass the template string variable or value??

  21. Amanda Gillespie says

    Thanks so much for this! I’ve been looking for a way to output my gallery shortcode from a custom meta box that I created for my Custom Post type in WordPress 3.0… Works like a charm! Thanks

  22. Amanda Gillespie says

    It also works if you condense it into one line (just watch your brackets):

    ID, ‘gallery’, true)) ));

  23. Vajra says

    This works


    to make the menu drop down in front of the slideshow (not behind it)

    [slideshow id=1 w=180 h=240 ]

    position: absolute;
    z-index: 0;”

    These two items work together to send the slideshow back.

    Unfortunately sends the slideshow back behind the text as well as the menu.
    note: z-index only works on “position: absolute”

    To make the slideshow visible not behind text have a transparent gif/png as a picture for the text to run around.

    [singlepic id=30 w=240 h=180 float=left] My Text………………………………..

    Note the single pic option does funny things to the png/gif you create the image imported though nextgen. So you import a transparent image place it in the document over the slide show so it has an id (the size is part of the name). Then create a transparent gif/png with the same name id and replace the one created by nextgen direct via ftp its stored in wp-content/gallery/cache/

  24. Lidia says

    Do you know if i can put custom fields in a nextgen gallery which is show as a slideshow? i can’t put the code ngg_custom_fields[“Your Field Name Here”]; ?> because i dont find where i have to put it when is a slideshow.


  25. kitzo says

    Dear readers,

    this is realy something that will helb me a lot.
    But I’m using the headway theme. So I don’t have a page.php or single.php … So, has someone an idea where to include the code? Somwhere in the easy hooks maybe?

    Would be nice to hear if some already included it in headway.

    Thanks a lot

  26. Emma says

    Thank you!!! Fantastic, exactly what I was trying to achieve.

    I was having trouble understanding how custom fields are displayed, this was exactly what I needed now, and great learning for next time :)


Comments are closed. Please contact me for specific questions or subscribe to my newsletter.