How to Align Images Side-by-Side in WordPress

Image alignment is a constant struggle for the WordPress blogger.

This post is for anyone who has spent more time than they’d care to admit fiddling with image alignment and positioning in the editor.

The two best methods to align images

There are two techniques you should consider for placing images next to each other. I’ll share how to use each one as well as the pros and cons included.

1. Align images with a gallery

The most reliable method for placing images side-by-side is to use a WordPress gallery.

If you’ve never created a gallery before, follow this tutorial on how to create galleries.

The trick is to use a medium-sized version of the images and choose two columns, even if you are including just two images. The result will look something like this:

Screenshot of an example gallery

Unlike images that you place into your post, galleries have special HTML that keeps the images next to each other. This structure makes it easier and less of a hassle to align the images into rows/columns.

2. Place images with Column Shortcodes

If you don’t mind adding a new plugin to your site, Column Shortcodes is a great solution for aligning images.

Screenshot of the Column Shortcodes plugin page

Column Shortcodes is one of those awesome plugins that doesn’t fill up your site with new menus. In fact, the only thing it adds to your admin dashboard is this convenient button above the editor.

The button added by Column Shortcodes

To show how it works, I’ll create a single row of three images.

How to use Column Shortcodes

The first step is to place your cursor on an empty line in the editor. Then click on the shortcode button and select a column option.

Displaying how to add a column shortcode
Creating a row with three columns.

Repeat this step to add a second 1/3 column and then repeat once more but this time using the one-third (last) option. The result is the following shortcodes added to the editor.

Shortcodes in the editor

If you’ve never used shortcodes before, you may want to follow this tutorial first.

As you can see, each shortcode has an opening and closing tag. Now you can put an image inside each shortcode, like this:

Images in shortcodes in the editor

Looks like a mess, doesn’t it?

That’s because the shortcodes can’t style the images in the editor, but it’s not a problem. Once you view them on the site, they’ll align neatly into columns, like this:

Example of images placed into columns

Column Shortcodes compared to galleries

While the shortcodes don’t display nicely in the editor like galleries and can be more of a challenge to work with, you also get a bit more control. For instance, galleries force all images to link to:

  • Media file
  • Attachment page
  • Nothing

With the columns plugin, images can have custom URLs and each link to a different type of page.

You can also mix-and-match the columns. For instance, you can place one image in a 2/3 shortcode next to a picture with a 1/3 column shortcode.

Why you shouldn’t use alignment options

These methods will produce the layouts you want without all the headaches.

WordPress galleries are the simplest and easiest way to align images in a row. However, Column Shortcodes is a good alternative that provides more flexibility.

They both work so well because they place images into a new HTML structure. The HTML makes it possible to maintain a side-by-side layout, regardless of the screen used to view them.

Is there something I missed? Have any questions? Post a comment below.

Take our 7-day Email Course for FREE

You'll learn how to make your WordPress site look better, load faster, and make more money.

Invalid email address
You'll get one email a day for the next 7 days


  1. juliemarg juliemarg

    Wow Wow Wow – this is fantastic! I’ve been working for a couple of days on how to use the excellent vertical iphone videos my client has. He’s a tree climber and trees are vertical, so the usual advice of making horizontal videos doesn’t apply.

    Thanks to Paul Bradshaw’s post “How to embed a vertical video from YouTube or Vimeo”, I learned how to get rid of the ugly black sidebars on a vertical video.

    Now, with your help I was able to put text side by side with the video. Hooray!

    • Ben Sibley Ben Sibley

      Thanks for stopping by! Glad you found the post helpful 🙂

  2. Kumar Kumar

    Hi Ben, nice stuff. Can it be used with Easy Azon plugin? any idea? Also, to use this one, will all the image sizes have to be same, or does it have the capability to adjust the size?

    • Ben Sibley Ben Sibley

      Hi Kumar,

      I have not tested with the Easy Azon plugin in particular, but I see no reason why these methods wouldn’t still work. The gallery will automatically use versions of the images that are the same size and that can’t be changed. The columns approach will allow for different sized images.

  3. Ajay Bansal Ajay Bansal

    Thank you so much…was going crazy to find a solution. Great plugin for WordPress.

    Great help!

    Thank you!

Comments are closed.

Disclosure: This post may contain affiliate links. Purchasing a product through one of these links generates a commission for us at no additional expense to you.