Create an image gallery in a WordPress blog post with a shortcode

See how to create photo galleries in WordPress blog posts using a shortcode. It is quick and easy.

Have you ever wanted to create a gallery of images in a blog post on your WordPress website? You might think you need a plugin to do it, but you don’t. Here’s how to do it without plugins.

Plugins a great when you need to add special features and functions to your WordPress site, except when they go wrong. Plugins cause more problems than anything else and if you can possibly avoid adding one, then your site will be more reliable.

Suppose you want to add a gallery to a post on your site. This would consist of a collection of thumbnail images and when people click them, they display the full image. Do you need a plugin? No. Just use the gallery shortcode.

What is a shortcode?

A shortcode is a special instruction contained within square brackets. In the WordPress post editor it looks like this:

[ some shortcode text ]

When the web page is viewed however, that shortcode is replaced with something else. Plugins often use them to add features and functions, but WordPress has a few built in.

What you see depends on the shortcode and in this example I will show how to create a gallery of images.

1 The WordPress media library

WordPress media gallery in thumbnail view

The first thing you need to do is to add the images to be used in the gallery to the WordPress Media Library. Click Add New and drag and drop the images on the target area to upload them. Here are some cat photos I uploaded.

2 Switch to list view

WordPress media gallery list view

Click the icon in the top left corner to switch to list view and the media Library looks like this. Let the mouse hover over an image and look at the status bar at the bottom of the browser window. Here you can see that it says post=90.

Every image has a unique number and letting the mouse hover over each image shows they are numbered 89, 90, 91 and 92. If you upload several images in one go, they tend to have sequential numbers. Images uploaded last week or last month will have completely different numbers.

Find the numbers, called ids, and write them down.

4 Add the shortcode

WordPress post editor

Here’s how to create the gallery. Just enter [gallery ids="num1, num2..."] anywhere in a post just like it is in the screenshot above. Those numbers are copied from my Media Library and you need to use the numbers from your Media Library.

5 Preview the gallery

WordPress post editor with a gallery

Now here’s a bit of magic. The WordPress post editor can work in Visual mode or Text mode. Click the Text tab in the top right corner of the editor. Then click the Visual tab to return to normal mode.

That shortcode is magically replaced by thumbnails of the gallery images. It is brilliant!

6 Edit the gallery

WordPress image options

That’s not all it does and there are more features and options. Click the gallery in the post editor and as is usual with images, there is a little toolbar above it containing a pencil and a cross. The cross deletes it. Click the pencil icon.

7 Customise the gallery

WordPress gallery options

On the left side of the page are options to remove gallery images and to add extra ones. On the right of the page are the gallery settings:

  • Link To: What should the thumbnail image do when clicked? Choose from the options in this menu, such as link to the media file.
  • Columns: How many columns of thumbnail images do you want? Set the number here.
  • Random order: Do you want them in the order you listed them in the shortcode or do you want WordPress to show them in a random order? Choose here.
  • Size: How big should the images be? Choose from Thumbnail, Medium, Large or Full Size.

OK, it’s not the best image gallery in the world, but it is simple, easy to create, and it does not require any special plugins. It is a neat little feature that is worth knowing and it could be useful on occasions.

 

1 Comment

  1. Thanks for the easy to read and understand instructions (including pictures), …I appreciate that! Will give this a try as I’m always looking to improve my limited word press knowledge.

Leave a Reply

Your email address will not be published.


*