Create a WordPress Gallery

December 24, 2013|

The default gallery shortcode that is part of WordPress is extremely limited and getting a good looking gallery in conjunction of working with WordPress thumbnails is a nightmare because there was not enough thought that went into this available feature. However, with Luminescence, I did a little extra customization for those who want to use the default WordPress gallery in their website by stripping out the built-in styles they use and opted in for my own. It’s not perfect but it still looks good without the need of a plugin.

Prepare Your Photos

As I will keep saying this on all tutorials relating to images, prepare your images by cropping, sizing, and optimizing your photos before uploading. I also recommend making your images the same dimensions if you can so you keep a consistent layout and size with each image, but this of course is not required.

Before we begin, if you want to see what this gallery will look like, check out the demo site:

Demo WP Gallery

For this tutorial, we will do this with a page, but you can also do it with a post if you want.

Step 1 – Preparation of Your Photos

  1. Get all of your photos together that you want in your gallery
  2. With your favourite image program, crop and size your photos to how you want them to be
  3. Save the photos and if you know how to optimize photos, I would recommend it, but I would also recommend not sizing your photos too big so that they will fit in the viewable browser window without scroll bars.
  4. Save your photos to a folder or other location where you can grab these in our next step.

Step 2 – Create a Page or Post

  1. For pages, go to Pages >> Add New
  2. Title your page as “Gallery” or whatever you want, then click on “Publish”
  3. With your editor still open, we will start by clicking on the “Add Media” button.
    add-media
  4. Click on the “Create Gallery” text link you see in the popup window…upper left
    create-gallery-link
  5. Click on the “Upload” option, unless you already have your images loaded in the media library…I prefer uploading them here though.
  6. Once your photos are uploaded, you will have the original size of each. Each gallery image will show a checkmark on each photo thumbnail which you can now decide if you want to use a caption and set any other attributes per image. For now, we will just do an ALT for each and a caption for each. We do this by clicking on each thumbnail.
    en-gallery-upload
  7. Click Create a new Gallery button in the lower right corner of the window
  8. Once you click the “Create a new Gallery” button, a new page is displayed which lets you choose how many columns you want when your gallery displays in your page or post. For this tutorial, let’s just do 4 columns and Link it to the Attachment page.
    en-gallery-edit
  9. Click “Insert Gallery” and then we will be back in our Gallery page editor with a blue box in the content area that looks like this:
    gallery-inserted
  10. Now we can click “Publish” or “Update

See Your New Gallery

If you don’t have this new gallery page added to your menu, you can do so now, otherwise go to the front of your website and check out your new gallery which should look something like this – although with different photos:

en-gallery-finish

BONUS: A little bonus for you when you click on any gallery thumbnail…a custom image page for preview with navigation

Categories: Setup Tutorials for Luminescence Lite

Leave a Reply