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 Preference, 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. If you followed the recommendation I gave about clearing out the dimensions from the WordPress settings for Media, there should be one thumbnail size that gets created with a 255 x 170 pixels dimension, while the other is the original image you upload. Long story short, that 255 x 170 thumbnail will be used for the gallery.
Before we begin, if you want to see what this gallery will look like, check out the demo site:
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
- Get all of your photos together that you want in your gallery
- With your favourite image program, crop and size your photos to how you want them to be
- 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.
- 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
- For pages, go to Pages >> Add New
- Title your page as “Gallery” or whatever you want, then click on “Publish”
- With your editor still open, we will start by clicking on the “Add Media” button.
- Click on the “Create Gallery” text link you see in the popup window…upper left
- Click on the “Upload” option, unless you already have your images loaded in the media library…I prefer uploading them here though.
- Once your photos are uploaded, you will have the original size of each and a 255 x 170 thumbnail as well. 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.
- Click Create a new Gallery button in the lower right corner of the window
- 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.
- 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:
- 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:
BONUS: A little bonus for you when you click on any gallery thumbnail…a custom image page for preview with navigation
