Tutorials

WordPress 3.5 – How to create Galleries with Shortcodes

  • January 22, 2013

Let’s review how you’d create a gallery using the Gallery Shortcode.

In earlier versions (and the current documentation for version 4.0.3) it’s a little different than it is now for WordPress 3.5. The user-interface has changed a little as noted in our previous post, “WordPress 3.5 – How it affects KingSize WP“. So let’s get started.

Step by Step Gallery Shortcode Tutorial:

1. Log into your WordPress Dashboard.

2. Locate the “Galleries” post type in the WP Dashboard sidebar.

3. Under “Galleries” select the option to “Add New”.

4. First, let’s add in a title for your new Gallery.

The reason for the title is so you can organize your Galleries created.

5. You can add content into the Text Editor, but that content will not display on the frontend. When adding descriptions/content to your galleries, that is part of the shortcode that we’ll expand on a little later.

6. Now we want to upload some images, click the “Add Media” button.

7. A new window will open in lightbox above the post being created.

8. By default, WordPress will load “Media Library”, showing all uploaded images associated with your WordPress website.

If you have not yet uploaded images, then WordPress will prompt you to upload new images by selecting new files. You can either drag and drop those images into the Upload box from your desktop/computer, or you can use the File Browser.

If you’ve already images uploaded to your WordPress website, you will see the “Media Library” section selected/loaded by default.

To answer the question you’re likely already thinking, “Can I just select images from the currently uploaded images in Media Library?” and unfortunately the answer is no. The images need to be specifically attached to this Gallery post you’re creating, otherwise they will not work.

Learn more about WordPress’ New Media Upload.

9. Once you’ve uploaded your images, or want to browse those images already uploaded, you would use the dropdown selection menu that may already display “All media items” and we want to change that to show “Uploaded to this post”. If there are images already associated with this post, they will display here. If there are none, then you will be prompted to upload/select your files.

Using the Gallery Shortcode:

OK, so you now know how to upload those images, but how do you use the Gallery Shortcode? Allow us to explain…

You’ve already created your Gallery post and have added your images as explained above. Now we want to make use of those images with the use of the Gallery Shortcode. It’s pretty simple, we promise it won’t get too confusing.

1. First, go to the “Galleries” sidebar item and click it.

2. Now you should see all the Galleries you’ve created.

3. To the far right, you’ll see a column labeled as “ID”.

The ID is the number code associated with that specific gallery you’ve created. We’ll be using this ID number to call that gallery into the Gallery Shortcode when using it throughout your website. So either write that number down, or copy it as we’ll be using that shortly in the next steps.

4. Now you want to add that Gallery into either a Page, Portfolio Post or Blog Post. So we’ll head over to that area now. In our description here we’ll be using a “Page” and creating a Gallery within it using the Gallery Shortcode.

5. Once you’ve created your new page, in the TinyMCE editor (where you find the options for Rich Text Formatting in your Text Editor) you will see a small black icon that looks like a Unicorn (or horse). Click this and it will open in a new lightbox window a shortcode selector and drop-down selection menu.

6. In that list of items, locate “Image Gallery”.

7. Click the “Image Gallery” and press “Insert”.

8. In your text editor, automatically will appear this:

[img_gallery id=”” type=”” layout=”” orderby=”” order=”” description=”” placement=””]

The only required values to be used are:

ID = This is the ID of the Gallery you’re wanting to display.
TYPE = This is the type of Gallery you’re wanting to use.
LAYOUT = This is the Gallery Layout (in Columns) you want

There are additional values (optional) you may use:

ORDERBY: Order by “Random” or “Ascending Order”.
ORDER: Order by Ascending or Descending.
DESCRIPTION: Add a Description to your Galleries.
PLACEMENT: Place the description “Above” or “Below” the gallery.

In addition to these descriptions above, you can always head to any one of the Galleries within our demonstration website, http://www.kingsizetheme.com and you’ll find there is a “Toggle” (Hide/Show) link labeled as “Show Shortcode Options / Explanations for Galleries” and this will break down the usage of the various gallery values and requirements.

For further buyer support, we encourage you to visit our Buyer Support Forums at http://www.denoizzed.com/forum – registration is required. If you have troubles with registering please read the link labeled as “How do I Register / Help” and it will walk you through the step by step process of registering your support account.