Skip to Content

WordPress: Columns Shortcode

A useful shortcode is the [columns]...[/columns] shortcode. This shortcode creates invisible columns on the page that can be used to easily arrange content (images, text, etc) into columns and rows.

The [columns]...[/columns] shortcode can use as many columns as you need, and multiple columns can be placed on a row.

Below are a couple of examples of columns being used in a post:

Initial columns shortcode setup

Add columns to your post or page by placing the shortcode in the visual editor. The below screenshot outlines an example of a basic [columns]...[/columns] setup:

Screenshot of editing a post with column shortcode outlined
  1. [columns col=2]]: This starts the first column. Content in-between the starting [[columns] and closing [/columns] tags will be in the first column. The col=2 part is used on the first column tag and specifies how many columns are in a row. In this case, there are two columns lined up in a row. The col= part only has to be used in the first column.
  2. [/columns]: Ends the first column.
  3. Another set of opening and closing [columns] shortcode tags. Content in-between these tags will be in the second column.
  4. [columns end=yes]: Ends the set of columns. Include this tag once after using the above columns shortcode to ensure that layout for the rest of the post is unaffected.

Filling in the content

First decide where you would like your content (text, images, etc) to go. The columns are arranged in order by how they are placed in the body of the visual editor.

Using the same [columns] set up from above, add a photo to the first column and some text to the second column. The shortcode and content should look something like this:

Screenshot column shortcode with an image and text added to the columns

Previewing our page shows that the image is in the first column, and the text is in the second column next to it:

Blog post with columns arranging a photo and text on one row.

Adding more rows

We can add another row of content by adding in two more sets of opening and closing [columns] tags. Be sure to add them in before the [columns end=yes] tag.

Screenshot column shortcode with four columns of images and text

Previewing the page, we can see that the added columns are underneath the first two:

Blog post with columns arranging a photo and text in two rows.

Changing the number of columns per row

But what if there needs to be a different number of columns per row? Simply adjust the col= part of the very first opening [columns] tag.

For example, if the tag is [columns col=4], then the end result looks like this:

Blog post with four columns all on one row