Beginner's Guide for WordPress - Start your WordPress Blog in minutes.
Choosing the Best
WordPress Hosting
How to Easily
Install WordPress
Recommended
WordPress Plugins
View all Guides

How to Create an Image Gallery in WordPress

Last updated on by
Elegant Themes
How to Create an Image Gallery in WordPress

So you have bought a shiny new digital camera and want to share your pictures from last vacation on your WordPress blog? Great idea, but how do you add your images in a professional looking grid-like gallery view? Most folks start searching for WordPress plugins that will help them create a gallery in WordPress, but you don’t really need a plugin for this. WordPress has a built-in gallery feature that a lot of users don’t know about. In this article, we will show you how to create an image gallery in WordPress. The goal is to add your images in a gallery that looks nice and clean. We will also show you how to open your images in a carousel or lightbox view to create an immersive full-screen experience.

Update (4/1/2014): We recommend that you check out Envira Gallery because it allows you to create really robust WordPress galleries (see our tutorial).

Video version of the Tutorial

Creating an Image Gallery in WordPress

First thing you need to do is to create a new post. Alternatively if you want to add the gallery to an existing post, then click to edit that post. Once you are on the post edit screen, you need to click on the Add Media button.

Add Media Button in Posts

This will open the WordPress media uploader. Now you need to click on Create Gallery link that you see on the left side of the screen. To add images to the gallery, you can either upload the images from your computer or choose existing images from your media library (images that you have previously uploaded to your site). All you have to do is select the images you want by clicking on them. This will add a checked mark that you see on each image in the screenshot below.

Uploading images to create a gallery in WordPress

Once you have selected all the images that you want to add in your gallery, click on “Create New Gallery” button in the media uploader. Media uploader will then show your selected images in the Edit Gallery view. Here you can add captions to your images, change gallery settings, and rearrange the order of images by simply dragging and dropping them in the order you want them to appear in. When you are done with editing the gallery, click on the Insert Gallery button.

Add captions and arrange image order for gallery

Clicking on Insert Gallery button will close the media uploader and insert the gallery code inside your WordPress post. If you are using the Visual Editor then you will see a box in post edit area indicating that there is gallery code.

gallery place holder in WordPress post edit area

If you are using simple text editor mode to write your post, then you will see your gallery shortcode. Something like this:

[gallery ids="5,8,6,7,9,10,11,12"]

Check your gallery by clicking on the post preview button. If you are unsatisfied with the look then you can always click on Add Media button to edit gallery settings. You can rearrange order, increase or decrease image columns, add or remove an image or description. Once you are happy with the way it looks, you can publish your post and your gallery will be visible for everyone.

Note: Yes, this technique can be used for pages as well. If you want to add an image gallery to WordPress pages, then follow the same exact method.

Now that we have created an image gallery in WordPress, lets take a look at how to make it look prettier and easier to browse through.

Show Gallery Images in Carousel

The carousel view for images in WordPress gallery is similar to the photo view in Facebook. Originally this feature started out as part of the Jetpack plugin which is a collection of plugins released by WordPress.com. However, the problem with the Jetpack is that it requires you to connect your site with WordPress.com even if there is no need to do so. Sometime ago, we decided to fork the Carousel plugin from Jetpack and release it as a standalone plugin for everyone who wants to use it.

Carousel slideshow for WordPress image gallery

To use the carousel for your image galleries, first thing you need to do is install and activate the Carousel without Jetpack plugin. Once you activate it, this plugin will work out of the box meaning you don’t need to configure anything. Just go to your gallery post and click on an image in the gallery to see it in action. Or check out our image gallery below:

There are a few changes you can make to the plugin. To configure it go to Settings » Media scroll down to Image gallery carousel. Here you can choose either a black or white background for carousel view. Or disable exif data or the carousel view itself.

Configuration options for Carousel Image Gallery plugin

There are several other plugins to create amazingly beautiful image galleries with WordPress. However, for most people the default gallery feature is perfect for their needs. If you don’t mind playing with the codes, then check out this cool example of how we extended the default gallery functionality to create a photo album gallery in WordPress. If you find yourself adding a lot of images to your blog or you are a photoblogger, then we highly recommend that you check out showcase of best photography themes for WordPress.

We hope that you found this article helpful and it helped you create an image gallery in your WordPress site. If you have questions or suggestions, then please leave a comment below.


Editorial Staff at WPBeginner is a team of WordPress lovers led by Syed Balkhi. Page maintained by Syed Balkhi.

WPBeginner's Video Icon
Our HD-Quality tutorial videos for WordPress Beginners will teach you how to use WordPress to create and manage your own website in about an hour. Get started now »

Comments

  1. Michele says:

    Hi, is it possible to add a lightbox gallery like this in a widget area? Thanks-
    Michele

  2. Tyler says:

    I have a question. I use JQuery plugin for and hovering pin it button. I was wondering if you know of a solution when you click on the photo gallery for carousel mode there is no pin it button. I would I be able to add that button to the gallery?

  3. Diane Lara says:

    When someone is viewing my gallery of images with minimal captions, when they click on an image, I would like them to see a larger image with additional information about the image beside or below that large image. I don’t want a gallery of images with all of that information destroying the grid aesthetic. Is this possible? I do not know coding or website jargon – sorry.

  4. Imagine That says:

    This post is so helpful! Many Thanks

  5. Sabrina says:

    I just have to say, this post is awesome… as all your posts are. You have made me into a better programmer. Thank you for all you do.

  6. Keith Davis says:

    Hi guys
    Just created my first WordPress gallery and carousel – looks fantastic.

    Just one question, how do I edit the gallery when I work in html mode not visual mode.
    Messed about for half an hour and I can’t figure it out!

  7. Christy says:

    Thank you SO much for this post. Not only did you save me HOURS of time creating my client’s gallery, you also taught me something new – and I love a good challenge. Your instructions were clear, concise and accurate. You are appreciated!!!

  8. Kailash says:

    Hi, sayed will it increase the loading time of website ? Beacause i want ot add around 100 photos to my website

    • WPBeginner Support says:

      Yes, though it is probably not a good idea to add 100 images even if they are thumbnails, on a single page or post.

  9. Rita says:

    This made things so much easier than using a plugin, thanks so much for the article!
    I have a question though: is it possible to get rid of the image titles under the images and only show them in the lightbox view? I would like to see only images on the gallery page.
    Many thanks,
    Rita

  10. Ana Mota says:

    Thank you so much! You make wordpress very easy for beginners like me. I just have one question:

    I have installed the carousel plugin but I don’t want the “write a comment” area to appear. Is there a way to remove it?

    Thanks again!

  11. James McInally says:

    Never knew about the carousel plugin for the WP Gallery, so cheers for that, J

  12. Courtney says:

    Thanks so much for this page – it was definitely helpful. I did have one question: I’m working on a photography website and trying to apply a gallery to a page; however, I don’t seem to have the option of using the scroller format when I do that, only thumbnails. I’m using PhotoPro, which allows me to have a scroller on the homepage, but my client really wants that format (with different photos) on several pages, and carousel isn’t much of a substitute for the scroller. I’ve tried to find information about this through several sources, but I can’t seem to find a solid answer as to whether or not it’s possible.

  13. vaisakh says:

    tnkz for your post…..it really helped me…

  14. Gale Weithers says:

    This post was very very helpful! Thanks a mil!

  15. Marci Hess says:

    Thanks for this info! I have a couple of questions about the gallery that maybe you can help with.
    1) When adding photos, there is an option that I’m unsure about. What is the difference between link to “attachment page or link to “media file”
    2) Sometimes my photos get “cut off” in the gallery but are “full size” when you go the hyperlinked page or if you click on that particular photo. I have changed the settings so the media size is the same as what I’m resizing them to, but that didn’t help. What else can I do?
    Thanks for any help.
    Marci

    • WPBeginner Support says:

      1. You can choose to link an image to an attachment page, which is a WordPress page with the image displayed in large size, or you can link to media file, which is the actual image file you uploaded.

      2. It looks like cropping is turned on for thumbnail sizes in your WordPress theme. You can turn off cropping to allow WordPress to scale images when resizing them instead of cropping. The problem with this approach is that your images may look disproportionate.

      update_option(“thumbnail_crop”, “0″);

  16. Krish Murali Eswar says:

    God bless you, folks. Sometimes things are so easy in WordPress. Yet, I miss it. Your site is certainly my first ‘go-to’ site for any wordpress related help.

  17. Robert says:

    Kudos!! Simple solution for any beginner. Much easier approach that the various lightbox plugin implementations.

  18. Peter says:

    The images does not show up in IE. Is it a known problem?
    Tested IE10 on win7 and win8, same problem.
    Great article!

    • WPBeginner Support says:

      We are not aware of any such issue. We were unable to reproduce it in internet explorer.

  19. Dave Lampen says:

    Is it possible to get rid of the comment box under the gallery?

  20. Francesco says:

    Awesome !
    A question:
    Is it possibile link a gallery ?
    For example:
    PhotoGallery

    Is it possibile ? How ?

    Thanks and excuse me for my bad english

    • WPBeginner Support says:

      Yes it is possible. Lets say you create a post or a page with a photo gallery in it and you title that page PhotoGallery. It is like any other WordPress post or page and can be linked any where.

  21. Karen says:

    Awesome! so easy! I’ve spent hours…. trying to get a plugin to do this and it was right under my nose all the time!!!! thank youuuuuuuuuuuu

  22. Marie says:

    Thank you for explaining this so clearly! I really wish I would have found your site 3 days ago…make that 3 years ago.

  23. Santhi Wijaya says:

    Hi, is there a way to reduce the opacity of the image border? or to remove completely? Thanks

  24. Keith says:

    Thanks for a great tutorial. I’m wanting to have my gallery on one side of the page and have it open the album in a carousel next to it in another div. How difficult would that be to do?

    Thanks,
    Keith

  25. alex says:

    Hello and thank you for posting this! Do you have any idea why, when clicking on the photos to view them, they are as small as the thumbnails? Thank you!

  26. Lyman says:

    This is awesome. Exactly what I needed! Thanks for creating it.

  27. Santhi says:

    Hi, how come when i change the thumbnail size under Settings > Media, the previously uploaded images with old thumbnail size doesn’t change into the new size? Does this mean i have to re-upload those images?

  28. rachael knight says:

    Great article, thanks!

    Is it possible to keep the captions displayed on the page, instead of only displaying if the user clicks to display the larger img?

    Many thanks

  29. Annei says:

    Can i add this feature on my website without installing the plugin. I mean can i add it manually in theme files?

  30. Kristen says:

    Hi there, When I click on a thumbnail of a gallery in my post, it pulls up the gallery carousel but it is off to one side of my screen, like 2 inches on the left so the photos look scrunched up. Do I have something off on my settings?

  31. Daniel says:

    Thanks!

  32. Zimbrul says:

    The plugin is particularly good as it’s responsive, I’ll use it on my sites.
    I’m currently using a premium plugin that adds social share buttons to the image in a lightbox. It’s pretty good.
    One question: if you use the plugin and comment to a photo where the comments shows up? Is like a comment to the article?

    • Keith says:

      Zimbrul – Which plugin are you using to add social share buttons to the image in lightbox? Do you have an example you can share? I’m looking for this for a project I’m currently working on.

      Thanks,
      Keith

  33. Abhijith V M says:

    Nice information there. Thanks

  34. Carlin says:

    Good stuff…better than WP’s support pages!

  35. Savannah says:

    I send you this link to my site-URL.. Will you PLEASE check my galleries?
    http://savannahz.wordpress.com/
    Savannahz

    • Editorial Staff says:

      We don’t provide support for WordPress.com sites. This site is built for those who are using the self-hosted WordPress.

  36. savannah says:

    Hi!
    When I’m using the Visual Editor I can’t see the box in post edit area indicating that there is gallery code.It used to be there, but something is changed!
    Need to know how to fix this!
    Sanna

    • Editorial Staff says:

      Did you add a new plugin? Because the only thing we can think of with the information provided is that there is a plugin conflict.

      • Savannah says:

        Thanks for the reply!
        If I have added a plugin am I not aware of that I did. How can I check if there is any plugin that I should remove??
        / Savannah

  37. Nemo says:

    Great post! I’ve just been having fun choosing which great gallery mode to have on my blog – the ‘Circles’ option is stunning!! Really professional looking. I had no idea WP had this.

    Thanks for posting this HowTo! ;)))))))))))))

  38. joseph says:

    Hello! I THINK this post might be able to help me, but at this point in the day, I am feeling pretty dumb, so… who knows? I have been trying to install a simple slideshow on my WordPress.com blog all afternoon. Literally for the past 5 hours. I have read 8 million supporting pieces, but every time I preview it, I see small thumbnails that open to slightly larger images. If I click on THOSE images, they open into large, individual pictures. I know there is a way to just go straight to large images. I just cannot figure it out. Please, someone, help!

    thanks so much in advance.

    • Editorial Staff says:

      WordPress.com and self-hosted blogs are different. But WP.com does have a carousel feature that you need to enable.

  39. Doc4 says:

    Thank you for this post. I had no idea WordPress even had this fetaure and I’ve been using it for years. I was using the NextGen Galley but this is perfect for a small project I’m working on. Very helpful.

  40. Abdul Rahim says:

    Very nice and easy tutorial.
    I aslo use this plugin to create photo gallery.

  41. Susan says:

    Hi, When using the Carousel without Jetpack plugin (which works very well, thank you for that!) can you have just one large image on your webpage, which when clicked, opens the carousel gallery as it does in Facebook? I want my webpage to not be a gallery of all the pictures, but rather one image larger.
    Any thoughts?
    Thanks!

  42. Afro Arena says:

    Thank you very much for your article. With this, I was able to create a beautiful gallery

  43. Willem says:

    Hi, I wonder what to do about the empty tags being created before and after the gallery. Can you help me out with this?

    Kind regards,

    Willem

  44. Abbey says:

    Hey,
    I followed your instructions for a site I’m working on but it doesn’t seem to work.
    The images are not displayed in a carousel even though the plugin is installed and activated.

    Any ideas please?

    • Editorial Staff says:

      It is possible that you have another plugin activated that is conflicting with the carousel plugin. Can you please send us an email with your site url, so we can take a look.

  45. Tanja says:

    Thank you so much for this! I just made a gallery, it is going to be a visual recipe index for my food blog. Is there a way to add a link to the recipe, when the picture is clicked?

  46. Pamela says:

    Thank you for this! I was looking for a plugin to make a gallery, I didn’t know you could do this on wordpress directly, I just made a gallery for an article and it looks really good! <3

  47. Rob van den Brand says:

    Great post, I’ll probably replace NextGen with this option now.

  48. Amar says:

    How about using nextgen gallery plugin for the same ?

Add a Comment

We're glad you have chosen to leave a comment. Please keep in mind that all comments are moderated according to our comment policy, and all links are nofollow. Do NOT use keywords in the name field. Let's have a personal and meaningful conversation.