WPBeginner

Beginner's Guide for WordPress

  • Blog
    • Beginners Guide
    • News
    • Opinion
    • Showcase
    • Themes
    • Tutorials
    • WordPress Plugins
  • Start Here
    • How to Start a Blog
    • Create a Website
    • Start an Online Store
    • Best Website Builder
    • Email Marketing
    • WordPress Hosting
    • Business Name Ideas
  • Deals
    • Bluehost Coupon
    • SiteGround Coupon
    • WP Engine Coupon
    • HostGator Coupon
    • Domain.com Coupon
    • Constant Contact
    • View All Deals »
  • Glossary
  • Videos
  • Products
X
☰
Beginner's Guide for WordPress / Start your WordPress Blog in minutes
Choosing the Best
WordPress Hosting
How to Easily
Install WordPress
Recommended
WordPress Plugins
View all Guides

WPBeginner» Blog» Beginners Guide» How to Display WordPress Photos in Columns and Rows

How to Display WordPress Photos in Columns and Rows

Last updated on January 31st, 2017 by Editorial Staff
175 Shares
Share
Tweet
Share
Pin
Free WordPress Video Tutorials on YouTube by WPBeginner
How to Display WordPress Photos in Columns and Rows

Do you want to display WordPress photos in columns and rows? By default WordPress adds images in a vertical column on top of each other. However if you are adding multiple photos to a blog post, then this doesn’t look very clean and requires a lot of scrolling for your users. In this article, we will show you how to easily display WordPress photos in columns and rows.

Display WordPress photos in rows and columns

Why You Need WordPress Photos in Columns and Rows

By default, when you add multiple images to a WordPress post, they would appear right next to each other or on top of each other.

default scrolling display of photos in WordPress

This doesn’t look very good, and your users will have to scroll a lot to view multiple images and photos.

You can easily solve this problem by displaying photos in rows and columns using a grid-based layout. This way images will appear in a compact layout and improve user experience on your website.

photos in columns and rows

Having said that, let’s take a look at how to display WordPress photos in columns and rows.

1. Display Photos in Columns and Rows without Plugins

This method does not require you to install any new plugin on your website. If you don’t add multiple photos too often, then this would work just fine for you.

First, you need to create a new post or edit an existing one where you want to display your photos. On the post edit screen, click on the ‘Add Media’ button to launch the WordPress media uploader popup.

Click on add media button to upload your photos in WordPress

Next, you need to upload all the photos you want to display in rows and columns. After the upload, you will see your photos in the media library.

Create gallery in WordPress

The images you just uploaded will already be selected. If you want to include any previously uploaded photos, then you can select them as well by just clicking on them in media library.

After that you need to click on ‘Create Gallery’ link from the left column and then click on ‘Create a new gallery’ button.

Click to create a new gallery of selected photos

The popup window will now change to show gallery settings options.

You can select number of columns, where each image should link to, what size of image to show, and randomize display order.

Gallery settings option

After that you need to click on the insert gallery button and WordPress will insert the gallery in your blog post.

Photos in columns and rows as a gallery in WordPress

If you want to change the number of columns or other settings, then you just need to click on the photos in post editor.

WordPress will select your gallery and you can then click on the pencil icon to edit your gallery settings.

Edit gallery settings

That’s all, you can continue writing your post or save your changes. You can preview the post now to see your photos in rows and columns.

Photos in rows and column layout in WordPress

This method would work for most beginners. However, if you run a photography blog or often share photos on your website, then this method lacks several important features.

For example, the appearance of photos relies on your WordPress theme and you are limited to that one particular layout and style.

Your images will not open in a lightbox popup and users will have to load them as a new page and then hit the back button to return to the original page.

For a more professional and beautiful user experience you should try the plugin method.

2. Display Photos in Columns and Rows Using Plugin

First thing you need to do is install and activate the Envira Gallery plugin. For more details, see our step by step guide on how to install a WordPress plugin.

Envira Gallery is one of our premium WordPress plugins and pricing starts from $19 for a single site license.

Upon activation, you need to visit Envira Gallery » Settings page to enter your license key. You can get this key from your account on Envira Gallery website.

Enter Envira Gallery license key

Now you are ready to create beautiful image galleries.

Head over to Envira Gallery » Add New page to create your first gallery.

Upload photos to create new gallery

You can select and upload files from your computer, or you can select from WordPress media library.

After uploading your photos, they will appear in the gallery settings box below.

Photos added to Envira Gallery

Next, you need to click on the config tab to customize how you want to display your photos.

Under ‘Number of Gallery Columns’, you can select the number of columns for your photos.

Configure number of columns for your photos

You can also specify the exact size of thumbnails you want to display, and the how much spacing you want between images in columns.

After that you can click on the publish button to make your photo gallery ready to be added into your WordPress site.

Now you need to edit a post or create a new one. You will notice the new ‘Add Gallery’ button on top of post editor.

Add gallery button

Clicking on it will bring up a popup where you need to select the gallery you just created and click on the insert button.

Insert gallery

The plugin will now add the gallery shortcode into post editor.

You can save your post and preview it to see your photos in columns and rows in a beautiful mobile-responsive photo gallery.

Photo columns in Envira Gallery

Now when your users click on a photo thumbnail it will open up in a beautiful popup. They will also be able to browse images without leaving the page.

Browsing photos in a post

We hope this article helped you learn how to display WordPress photos in columns and rows. You may also want to see our guide on how to fix common image issues in WordPress.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.

175 Shares
Share
Tweet
Share
Pin
Popular on WPBeginner Right Now!
  • How to Start Your Own Podcast (Step by Step)

    How to Start Your Own Podcast (Step by Step)

  • How to Properly Move Your Blog from WordPress.com to WordPress.org

  • How to Fix the Error Establishing a Database Connection in WordPress

    How to Fix the Error Establishing a Database Connection in WordPress

  • Checklist

    Checklist: 15 Things You MUST DO Before Changing WordPress Themes

About the Editorial Staff

Editorial Staff at WPBeginner is a team of WordPress experts led by Syed Balkhi. Trusted by over 1.3 million readers worldwide.

The Ultimate WordPress Toolkit

14 Comments

Leave a Reply
  1. Chris Thom says:
    Feb 8, 2021 at 11:22 am

    Using the default gallery is there a way to control the margin/padding between images?

    Reply
    • WPBeginner Support says:
      Feb 9, 2021 at 9:26 am

      You would need to manually modify the CSS for your content.

      Reply
  2. Chris Thom says:
    Feb 8, 2021 at 9:47 am

    Good information but on the stock WP galley how can I adjust the padding between images? Right now they’re butted right up against each other.

    Reply
    • WPBeginner Support says:
      Feb 8, 2021 at 10:58 am

      You would need some knowledge of CSS, for a better understanding, we would recommend taking a look at our article below:

      https://www.wpbeginner.com/wp-tutorials/basics-of-inspect-element-with-your-wordpress-site/

      Reply
  3. gedi says:
    Jan 2, 2020 at 5:25 am

    problem is u can’t put url behind image – wp won’t give option – can’t be edited execpt in html which is drawn out… good though if you dont want someone to cliick thru

    Reply
    • WPBeginner Support says:
      Jan 2, 2020 at 10:33 am

      At the moment WordPress does not have the option to add individual links by default to the gallery which is why we show Envira Gallery which does have that option :)

      Reply
  4. Agnieszka says:
    Nov 23, 2017 at 5:14 am

    Hi!
    I tried to set up a gallery and even though I set the number of columns when I eventually update and preview my page all images show in just 1 column..no matter what I do!!
    I tried to change the layout and number of columns but every time it is just 1 column and I have no idea how to fix it. Could you please help?

    Reply
  5. Shannon Ball says:
    May 25, 2017 at 7:01 pm

    I would like to have a grid of images so that when a reader clicks on an image it takes them to an external url with more info. (like a grid of ads/sponsors) at the bottom of a post…

    Any suggestions?

    Reply
    • Isaiah Hammons says:
      Oct 30, 2017 at 12:17 pm

      I want the same exact thing you’re talking about..

      Reply
      • sean sewell says:
        Jun 7, 2018 at 8:27 am

        I am desperately after the same thing! If you ever find out please let me know!

        Reply
    • Michelle says:
      Dec 20, 2018 at 10:35 pm

      Just curious… I am sure you have already tried this, but on the media tab inside of wordpress have you clicked on the photo and under the information there is a spot to put a URL so someone can click on it. I know it is kind of hidden and not that intuitive, but that might work for you.

      Reply
  6. Cathrine says:
    Feb 8, 2017 at 11:54 am

    My gallery still won’t post in multiple columns, any idea why that might be?

    Reply
    • Vasilis says:
      Apr 21, 2017 at 10:48 am

      That’s my problem also…
      Anybody there?

      Reply
  7. Eileen says:
    Jan 31, 2017 at 1:55 pm

    Wow – the gallery button function is a hidden gem I didn’t know about! Thank you.

    Reply

Leave a Reply Cancel reply

Thanks for choosing to leave a comment. Please keep in mind that all comments are moderated according to our comment policy, and your email address will NOT be published. Please Do NOT use keywords in the name field. Let's have a personal and meaningful conversation.

Over 1,320,000+ Readers

Get fresh content from WPBeginner

Featured WordPress Plugin
RafflePress - WordPress Giveaway and Contest Plugin
RafflePress
Giveaway and Contest Plugin for WordPress. Learn More »
How to Start a Blog How to Start a Blog
I need help with ...
Starting a
Blog
WordPress
Performance
WordPress
Security
WordPress
SEO
WordPress
Errors
Building an
Online Store
Useful WordPress Guides
    • 7 Best WordPress Backup Plugins Compared (Pros and Cons)
    • How to Fix the Error Establishing a Database Connection in WordPress
    • Why You Need a CDN for your WordPress Blog? [Infographic]
    • 30 Legit Ways to Make Money Online Blogging with WordPress
    • Self Hosted WordPress.org vs. Free WordPress.com [Infograph]
    • Free Recording: WordPress Workshop for Beginners
    • 24 Must Have WordPress Plugins for Business Websites
    • How to Properly Move Your Blog from WordPress.com to WordPress.org
    • 5 Best Contact Form Plugins for WordPress Compared
    • Which is the Best WordPress Popup Plugin? (Comparison)
    • Best WooCommerce Hosting in 2020 (Comparison)
    • How to Fix the Internal Server Error in WordPress
    • How to Install WordPress - Complete WordPress Installation Tutorial
    • Why You Should Start Building an Email List Right Away
    • How to Properly Move WordPress to a New Domain Without Losing SEO
    • How to Choose the Best WordPress Hosting for Your Website
    • How to Choose the Best Blogging Platform (Comparison)
    • WordPress Tutorials - 200+ Step by Step WordPress Tutorials
    • 5 Best WordPress Ecommerce Plugins Compared
    • 5 Best WordPress Membership Plugins (Compared)
    • 7 Best Email Marketing Services for Small Business (2020)
    • How to Choose the Best Domain Registrar (Compared)
    • The Truth About Shared WordPress Web Hosting
    • When Do You Really Need Managed WordPress Hosting?
    • 5 Best Drag and Drop WordPress Page Builders Compared
    • How to Switch from Blogger to WordPress without Losing Google Rankings
    • How to Properly Switch From Wix to WordPress (Step by Step)
    • How to Properly Move from Weebly to WordPress (Step by Step)
    • Do You Really Need a VPS? Best WordPress VPS Hosting Compared
    • How to Properly Move from Squarespace to WordPress
    • How to Register a Domain Name (+ tip to get it for FREE)
    • HostGator Review - An Honest Look at Speed & Uptime (2020)
    • SiteGround Reviews from 4196 Users & Our Experts (2020)
    • Bluehost Review from Real Users + Performance Stats (2020)
    • How Much Does It Really Cost to Build a WordPress Website?
    • How to Create an Email Newsletter the RIGHT WAY (Step by Step)
    • Free Business Name Generator (A.I Powered)
    • How to Create a Free Business Email Address in 5 Minutes (Step by Step)
    • How to Install Google Analytics in WordPress for Beginners
    • How to Move WordPress to a New Host or Server With No Downtime
    • Why is WordPress Free? What are the Costs? What is the Catch?
    • How to Make a Website in 2020 – Step by Step Guide
Deals & Coupons (view all)
WPEngine
WP Engine Coupon
Get 20% OFF on all WP Engine hosting plans PLUS 2 months free on annual payment.
Nextiva
Nextiva Coupon
Get the lowest possible price on the best VoIP and business phone service.
Featured In
About WPBeginner®

WPBeginner is a free WordPress resource site for Beginners. WPBeginner was founded in July 2009 by Syed Balkhi. The main goal of this site is to provide quality tips, tricks, hacks, and other WordPress resources that allows WordPress beginners to improve their site(s).
Join our team: We are Hiring!

Site Links
  • About Us
  • Contact Us
  • FTC Disclosure
  • Privacy Policy
  • Terms of Service
  • Free Blog Setup
  • Free Business Tools
Our Sites
  • OptinMonster
  • MonsterInsights
  • WPForms
  • SeedProd
  • Nameboy
  • RafflePress
  • Smash Balloon

Copyright © 2009 - 2021 WPBeginner LLC. All Rights Reserved. WPBeginner® is a registered trademark.

Managed by Awesome Motive | WordPress hosting by SiteGround | WordPress CDN by MaxCDN | WordPress Security by Sucuri.