How to Insert a Photo Gallery into Your WordPress Blog

By Lisa Sabin-Wilson

You can use the WordPress Insert Media window to insert a full photo gallery into your posts. Upload all your images and then, instead of clicking the Insert into Post button, click the Create Gallery link on the left side of the Insert Media window. The Create Gallery window opens and displays all the images you’ve uploaded to your site.

Follow these steps to insert a photo gallery into a blog post:

  1. In the Create Gallery window, select the images you want to use in your gallery.

    Click each image once in order to select it for use in the gallery. A selected image displays a small checkmark in its upper-right corner.


  2. Click the Create New Gallery button.

    The Edit Gallery page opens.

  3. (Optional) Add a caption for each image by clicking in the Caption This Image area and typing a caption or short description for the image.

  4. (Optional) Set the order the images appear in the gallery by using the drag-and-drop option on the Edit Gallery page.

    Click and then drag and drop images to change the order.

  5. (Optional) Specify the following options under the Gallery Settings section on the right side of the Edit Gallery Page:

    • Link To: Media File or Attachment Page.

    • Random Order: Select to randomize the order in which the images are displayed in the gallery.

    • Gallery Columns: Select how many columns of images you want to appear in your gallery.

  6. Click the Insert Gallery button.

    WordPress inserts into your post a piece of shortcode that looks like this: .

  7. (Optional) Change the order of appearance of the images in the gallery, as well as the markup (HTML tags or CSS selectors).

    Use the WordPress gallery shortcode to change different aspects of the display of the gallery in your post:

    • captiontag: Change the markup that surrounds the image caption by altering the gallery shortcode. For instance, places <div></div> tags around the image caption. (The <div> tag is considered a block-level element and creates a separate container for the content.)

      If you want to have the gallery appear on a line of its own, the code places <p class=”gallery-caption”></p> tags around the image caption. The default markup for the captiontag option is dd.

    • icontag: Defines the HTML markup around each individual thumbnail image in your gallery. Change the markup around the icontag (thumbnail icon) of the image by altering the gallery shortcode to something like , which places <p class=”gallery-icon”></p> tags around each thumbnail icon. The default markup for icontag is dt.

    • itemtag: Defines the HTML markup around each item in your gallery. Change the markup around the itemtag (each item) in the gallery by altering the gallery shortcode to something like , which places <span class=”gallery-item”></span> tags around each item in the gallery. The default markup for the itemtag is dl.

    • orderby: Defines the order in which the images are displayed within your gallery. Change the order used to display the thumbnails in the gallery by altering the gallery shortcode to something like , which displays the thumbnails in ascending menu order. Another parameter you can use is ID_order ASC, which displays the thumbnails in ascending order according to their IDs.

Gallery Short Code Examples
Gallery Short Code Output
A four-column gallery containing medium-sized images
A ten-column gallery containing thumbnail images pulled from
the blog post with the ID 215
A three-column (default) gallery in which each image is
surrounded by <span></span> tags and the image caption
is surrounded by <p></p> tags
  1. Define the style of the <span> tags in your CSS stylesheet.

    The <span> tags create an inline element. An element contained within a <span> tag stays on the same line as the element before it; there’s no line break. You need a little knowledge of CSS to alter the <span> tags. Click the Design tab in your WordPress Dashboard, and then click the Theme Editor subtab to edit the stylesheet for your theme.

    Here’s an example of what you can add to the stylesheet (style.css) for your current theme: img {
    padding: 3px;
    background: white;
    border: 1px solid black;
    margin: 0 5px;

    Placing this bit of CSS in the stylesheet (style.css) of your active theme automatically places a 1-pixel black border around each thumbnail, with 3 pixels of padding and a white background. The left and right margins are 5 pixels wide, creating nice spacing between images in the gallery.

  2. Click the Update File button to save changes to your Stylesheet (style.css) template.

The figure shows a post with a photo gallery displayed, using the preceding steps and CSS example in the default WordPress theme: Twenty Twelve.


Matt Mullenweg, cofounder of the WordPress platform, created a very extensive photo gallery by using the built-in gallery options in WordPress. Check out this fabulous photo gallery.