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:
Other People Are Reading
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.
Add the following code to the bottom of style.css:
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.
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.
- 20 of the funniest online reviews ever
- 14 Biggest lies people tell in online dating sites
- Hilarious things Google thinks you're trying to search for