Quick Tip: Paginate Your WordPress Gallery

Quick Tip: Paginate Your WordPress Gallery

You can create beautiful image galleries in WordPress using the Gallery shortcode. You can even create your own templates for implementing galleries and do a lot of things. But what if you want to split an image gallery into multiple pages? WordPress provides Pagination functions for everything but nothing for the gallery. Here you will learn how to achieve that in a very simple manner.


Install Cleaner Gallery

To implement pagination, you will need to install a plugin. There are many plugins for this but the one I recommend is Cleaner Gallery by Justin Tadlock. This plugin not only will paginate the gallery but offers much more than that. You can have multiple galleries per post, choose the number of images you want in a gallery, integrate your gallery with multiple Lightbox-type scripts and most importantly you will get proper validated HTML for your gallery.


Configure Gallery Shortcode

Now that you have installed the Cleaner Gallery plugin, it’s time to modify your original gallery shortcode to implement the pagination. Pagination is achieved with the help of numberposts and offset arguments in the shortcode and combining it with the <!--nextpage--> tag. The numberposts argument is self explanatory, it allows you to configure how many images you want to show using the gallery shortcode. The offset argument allows you to start the gallery after skipping a certain number of images.

Let us say your gallery has 12 images and you want to show 6 images on the first page and 6 on the second one. This is how you need to format your gallery shortcode to make the pagination work:

[gallery numberposts="6"]
<!--nextpage-->
[gallery offset="6" numberposts="6"]

First shortcode displays the first 6 images from the gallery. Then we split up the post which in effect splits the gallery. After moving on to the next page, we set the offset to 6 so as to skip the first 6 images and start from the 7th. Here’s how it will look.

Gallery Pagination using Cleaner Gallery

Note

Now this method actually splits the post containing the gallery. We still haven’t touched the original gallery or modified it to implement the paging. We have just added a few extra parameters to restrict the number of images shown per gallery. To implement actual pagination in your gallery, you might want to try the Paginated Gallery plugin. Install it and set the number of images per page from its setting page. You can either use the plugin’s shortcode to display the gallery ([paginated_gallery]) or use the native gallery shortcode. I prefer Cleaner Gallery because it allows us to set a different number of images per page on each gallery separately which this plugin doesn’t.

Note: Want to add some source code? Type <pre><code> before it and </code></pre> after it. Find out more
  • http://drawrdesign.com Ryan

    Not really much of a tutorial is it? I can’t speak for everyone but I love this site for small snippets that increase my WP knowledge, now if you broke down the plugin and went through how it worked it would be a different story, but it’s not. Nothing more than a plugin spotlight.

    • http://wp.envato.com/ Japh Thomson
      Staff

      Hi Ryan, quite right, this was just a quick tip. Tomorrow, back to nice meaty tutorials :)

  • http://www.egydes.com Husien Adel

    thanks a Japh;) actulaly there is something missing for me
    look i make photo gallery in wp post and call it with the shotcode : [gallery]
    to view 6 images and offset first 2 do : [gallery numberposts="6" offset="2" ]
    and to view the paginaton i do the shortcode
    but actually there a 14 images and i offset 2 remain 12 of 6 per page should have a pagination for 2 pages when i click on page 2 son’t show the rest of images ?

    what happen , plz put the short code above to be clear for all users
    thanks

  • http://www.egydes.com Husien Adel

    i found ;)

    [gallery numberposts="3" offset="3"]

    [gallery numberposts="3" offset="6"]

    ..etc , you should put it in the post and waiting big meaty tutorials Japh

    • http://wp.envato.com/ Japh Thomson
      Staff

      Sorry about that! Looks like those characters weren’t encoded correctly. All fixed now!

  • http://www.des4x.com AmrAbdelaziz

    Very nice tutorail >
    I benefited a lot from it

  • Pingback: Quick Tip: Paginate Your WordPress Gallery | Shadowtek | Hosting and Design Solutions

  • dj

    Sorry… don’t understand this – All I see is <!– next page –> — and if you are saying that you’ve got to put some code in manually and count all the offsets — just how is this so wonderful? If this is some typo or something – guys it’s called proofreading.

  • http://ubuntuonforsa.blogdetik.com/ Eko

    Hi, please check again the code. I think it is incomplete code.
    Only appear on my browser.

    Thanks before

    • http://nspeaks.com Navjot Singh
      Author

      Sorry for the incomplete text. Post has been updated with the complete code now.

  • Pingback: Best PHP Web Hosting 2012 Q1 Award | Open Knowledge

  • http://www.webdesign309.com/ Steven D. Sanders

    I recently did something similar on a client’s site, but I used the “Easy Paginate” plugin for jQuery. It ended up looking really nice.

    http://cssglobe.com/post/9801/easy-paginate-jquery-plugin-for-pagination

  • Pingback: Как разбить WordPress галерею на несколько страниц | Wordpresso

  • Pingback: Wordpressギャラリーのページ分割の方法 | 備忘録

  • Pingback: Los mejores 35 tutoriales para WordPress marzo del 2012 | El blog de David Chávez s

  • Gufran

    not working,

    any code to be added in function.php

  • Guest

    ““

  • Gufran

    [gallery numberposts="6"] works but nextpage tag doesn’t work

    i.e Only show 6 images no pagination ( page 1 2 3)