How to Change WordPress Gallery Spacing

Written by sara williams
  • Share
  • Tweet
  • Share
  • Pin
  • Email
How to Change WordPress Gallery Spacing
Change gallery spacing by overriding automatic WordPress styles. (Ablestock.com/AbleStock.com/Getty Images)

WordPress includes a shortcode for galleries. Shortcodes are simple, HTML-like codes that allow non-programmers to call preprogrammed PHP functions in posts and pages. When you add the "[gallery]" shortcode to a post or page, WordPress outputs thumbnails for all attached images and applies some styling to those thumbnails. The Cascading Style Sheets (CSS) code that WordPress adds to content containing galleries is found between style tags on the page. To edit the spacing of gallery items, you must write CSS code in the style.css file that overrides that code.

Skill level:
Moderate

Other People Are Reading

Instructions

  1. 1

    Visit the "wp-admin" directory of your website and log in to the WordPress dashboard. Navigate to "Appearance" and click the "Editor" link to load the "Edit Themes" screen. Find the "style.css" link at the bottom of the list under "Templates" and click to load it in the editor box.

  2. 2

    Add the following code to the bottom of style.css:

    .gallery-item {

    margin-top: XXpx !important;

    margin-left: XXpx !important;

    margin-bottom: XXpx !important;

    margin-right: XXpx !important;

    }

    The class name "gallery-item" matches the code WordPress generates for the gallery. WordPress automatically adds CSS code to any page containing an image gallery. In CSS, code between style tags on a Web page takes priority over code in an external CSS file, so you must use "!important" to override those on-page styles.

  3. 3

    Click the blue "Update File" button to save your changes. Visit your website and take a look at your gallery. If the new spacing creates a conflict with the rest of the site's design, go back and make tweaks to style.css until the gallery looks good.

Tips and warnings

  • You can duplicate the "gallery-item" code and replace "gallery-item" with "gallery-caption" to change the spacing of the image captions.
  • Edit the spacing and borders around the images themselves by targeting ".gallery-item img" in style.css.
  • Back up your theme files before editing them. If you encounter a "white screen" error, re-upload the original theme files to get back in to WordPress.

Don't Miss

Filter:
  • All types
  • Articles
  • Slideshows
  • Videos
Sort:
  • Most relevant
  • Most popular
  • Most recent

No articles available

No slideshows available

No videos available

By using the eHow.co.uk site, you consent to the use of cookies. For more information, please see our Cookie policy.