How to create multi-column text in WordPress with shortcodes

How to create multi-column text using the Shortcodes Ultimate WordPress plugin.

Sometimes you want a page to stand out from the rest and a special layout is required. While some people resort to page builders, an alternative is to use a multi-function plugin called Shortcodes Ultimate.

This uses shortcodes and they are a feature built into WordPress, but the number and capabilities have been greatly extended by Shortcodes Ultimate to include not only more shortcodes, but more powerful ones with many more features.

How to get Shortcodes Ultimate

This is a plugin and it is free in the WordPress plugins library, which makes installing and activating it very straightforward. Here is a step by step guide.

  1. Click Plugins in the sidebar of WordPress
  2. Click the Add New button at the top
  3. Enter shortcodes ultimate into the search box at the top right
  4. Click the Install Now button next to Shortcodes Ultimate
  5. Click the Activate button to enable it

Create text columns with Shortcodes Ultimate

The plugin is now ready to use and it adds dozens of brilliant shortcodes, but here I will focus on just one of them and it is for creating multicolumn layouts. (I looked at another feature of Shortcodes Ultimate in How to hide content and spoilers in WordPress posts).

Suppose you had a list of items, such as: Potato, Carrot, Peas, Beans, Cabbage, Cauliflower. You could put them in a table like this:

Potato
Carrot
Peas
Beans
Cabbage
Cauliflower

What you can’t see here are the shortcodes that are used to create this two column table. This is what you would type into the WordPress post editor:

Use Shortcodes Ultimate in WordPress to create columns of text

There are two parts to this and there is:

[ su_row] . . . [ /su_ro] marks the start and end of the table.

[ su_column] . . . [ /su_column] marks the start and end of a column.

There are two columns by default, but it is possible to specify more than two and there could be three, four or more. If you wanted three columns for example, you would enter:

Use Shortcodes Ultimate in WordPress to create columns of text

That is what you would type into WordPress, but when the page is viewed, it looks like this, and there are three columns. (The colour is just for fun.)

Apple
Banana
Orange
Lemon
Cherry
Strawberry
Blackberry
Melon
Raspberry

Here you can see that I have added an extra parameter to the su_column and there is a size setting, size=”1/3″. It means that the column is one third the width (of whatever space is allocated for text).

For four columns, just change the size to 1/4 and make sure there are four columns of text.

There is another useful parameter and this is used to center the column on the page. Add center=”yes” if you want columns centered. It may or may not have an effect.

Newspaper style columns

So far I have just used simple lists to demonstrate how to create a simple table, but it this shortcode does more than this and the feature can be used to create newspaper and magazine style layouts. Text can flow down a column
It can be applied to the whole page, just part of the page, or just a paragraph or two. Whatever appears between [ su_column]  . .  [ /su_column] appears in a column and you can create two, three or more columns as described above.

So that was two columns of text and now we are back to one. How does this look in the WordPress post editor? It looks like this:

Use Shortcodes Ultimate in WordPress to create columns of text

That is pretty clever and creating multiple columns of text can make a page more visually attractive.

Potential problems

When creating  multiple column tables or multiple column text, you must consider how it will look on a phone. Not everyone uses a desktop or laptop computer with a big screen, so take care. What looks good on your computer may not look good on a mobile device with a small screen.

Lack of space collapses the table columns on this page, so you will not see columns on your phone, just regular text.

This is something you will have to experiment with and the results may depend on your theme. Try creating tables and multi-column text  and view it on your phone to see what happens.

 

Affiliate links

Be the first to comment

Leave a Reply

Your email address will not be published.