How to Add Widgets to Your WordPress.com Blog
Installing and Configuring the WordPress.com Stats Plugin
How to Install a WordPress Theme

How to Insert a Photo Gallery into a WordPress Page or Blog Post

You can use the WordPress Insert Media page to insert a full photo gallery into your pages (or posts). Follow these steps to insert a photo gallery into a page (or post):

  1. On the page (or post) in which you want to insert a gallery, upload your images.

  2. On the Add New Page (or Add New Post) page, click the Add Media button.

    The Insert Media dialog box appears.

  3. Click the Create Gallery link on the left side of the Insert Media dialog box.

    The Gallery tab appears only for posts or pages that have one or more images uploaded.

    This tab displays thumbnails of all the images you’ve uploaded for your page (or post).

    image0.jpg
  4. Click the Create a New Gallery button.

    This step opens the Edit Gallery page, where you can drag and drop the images to determine the order in which they should appear on your site.

  5. In the Gallery Settings section, set the display options for your gallery:

    • Link To: Select Media File (the physical image file) or Attachment Page (a page that displays only the image itself).

    • Random Order: Select this option to make the images appear in random order.

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

  6. Click the Insert Gallery button at the bottom of the dialog box.

    WordPress returns to the Add New Page (or Add New Post) page. You can see that WordPress has inserted into your page (or post) a piece of short code (a snippet of code that WordPress uses to execute certain functions, such as the gallery display) that looks like this:

    [gallery]

    Note: You have to switch to HTML view (click the HTML tab) to see this code.

  7. (Optional) In the Page (or Post) edit box in HTML view, you can change the order of appearance of the images in the gallery, as well as the markup (HTML tags or CSS selectors), by entering the following short code:

    captiontag: Changes the markup that surrounds the image caption by altering the gallery short code. For example,

    [gallery captiontag="div"]

    places <div></div> tags around the image caption. (The <div> tag, which is considered a block-level element, creates a separate container for the content.)

    To have the gallery appear on a line of its own, use the following code:

    [gallery captiontag="p"]

    This 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 short code to look something like this:

    [gallery icontag="p"]

    This code 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 short code to look something like this:

    [gallery itemtag="span"]

    This code 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 that the images display within your gallery. Change the order used to display the thumbnails in the gallery by altering the gallery short code to look something like this:

    [gallery orderby="menu_order ASC"]

    This code 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.

  8. When you’re finished, click the Preview button to preview your changes; when you’re satisfied, click the Publish button to publish your page.

    Gallery Short Code Output
    [gallery columns="4" size="medium"] A four-column gallery containing medium-size images
    [gallery columns="10" id="215" size=”thumbnail”] A ten-column gallery containing thumbnail images pulled from the blog post with the ID 215
    [gallery captiontag="p" icontag="span"] 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

Follow these steps to edit the stylesheet for your theme to include the gallery styles in the CSS:

  1. From the Dashboard, choose Appearance→Themes→Editor and then open your CSS stylesheet.

  2. Define the style of the <span> tags in your 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. Here’s an example of what you can add to the stylesheet (style.css) for your current theme to define the style of the <span> tags:

    span.gallery-icon 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.

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

Here is a photo gallery using the preceding steps and the CSS example in the default Twenty Thirteen theme. Here’s the gallery short code:

image1.jpg
[gallery icontag="span" size="thumbnail"]

Matt Mullenweg, a co-founder of the WordPress platform, created an extensive photo gallery by using the built-in gallery options in WordPress.

Some useful WordPress plugins work in tandem with the WordPress gallery feature.

  • Add a Comment
  • Print
  • Share
blog comments powered by Disqus
How to Browse and Install Themes from the WordPress Dashboard
How to Upload a New WordPress Plugin
How to Find and Install Free WordPress Theme
How to Add Widgets to Your WordPress.com Blog Sidebar
How to Preview and Activate WordPress.com Themes
Advertisement

Inside Dummies.com