Column Shortcodes


What are Column Shortcodes?

Column shortcodes allow the content area to be divided into multiple columns. Additionally, multiple column configurations are available.

Mostly used in magazine-style templates, column shortcodes can provide an easy way to divide content into a more visually attractive format.

I’m using one here, to display the image to the right of this text. Click the image to enlarge.

column-shortcodes
UPDATE: A new button has been added to WP Edit Pro for easily inserting column shortcodes. Please read the Column Shortcodes Button article for more information.

Explanation of Column Shortcodes

When using column shortcodes, up to six columns can be created. Additionally, multiple sized columns can be used together.

Column shortcodes don’t divide the entire page… as that would be too limiting. Instead, the shortcodes can be used multiple times through the page content. The means a set of shortcodes can be used; then some additional content can be added using any formatting; then another set of column shortcodes can be used. The possibilities are endless!

The following list displays all available column shortcode sizes:

Main Shortcodes

  • [ one_half ]
  • [ one_third ]
  • [ two_third ]
  • [ one_fourth ]
  • [ three_fourth ]
  • [ one_fifth ]
  • [ two_fifth ]
  • [ three_fifth ]
  • [ four_fifth ]
  • [ one_sixth ]
  • [ five_sixth ]

Closing Shortcodes

  • [ one_half_last ]
  • [ one_third_last ]
  • [ two_third_last ]
  • [ one_fourth_last ]
  • [ three_fourth_last ]
  • [ one_fifth_last ]
  • [ two_fifth_last ]
  • [ three_fifth_last ]
  • [ four_fifth_last ]
  • [ one_sixth_last ]
  • [ five_sixth_last ]

Note: The shortcodes should not have spaces between the brackets. Spaces had to be inserted for the brackets to display properly on this page.

Column Shortcodes Rules

Rule One:

The shortcodes used together in any one grouping MUST total one (1).

For example; if a two column area is desired, two [ one_half ] column shortcodes would be inserted (two times one-half equals (1)).

Another example; if a three column area is desired, three [ one_third ] column shortcodes would be inserted (three times one-third equals (3)).

Rule Two:

The closing shortcode must use the _last syntax in the shortcode.

Any combination of shortcodes can be used… but the last set of opening/closing shortcodes MUST use the _last syntax.

Column Shortcodes Examples

Okay.. enough technical jargon… let’s look at some examples.

Two Column Example

Let’s imagine we wish to create an area using two columns. We have a few options available. Let’s first look at the basic, two equal columns example:

Shortcode:

[ one_half ]This is the first column.[ /one_half ][ one_half_last ]This is the second column.[ /one_half_last ]

Output:


This is the first column.
This is the second column.

The output is divided into two separate columns, each of equal width.

Now, let’s examine a few unequal column examples:

Shortcode:

[ one_third ]This is the first column (one-third size).[ /one_third ][ two_third_last ]This is the second column. (two-thirds size).[ /two_third_last ]

Output:


This is the first column (one-third size).
This is the second column. (two-thirds size).

Shortcode:

[ two_third ]This is the first column (two-thirds size).[ /two_third ][ one_third_last ]This is the second column (one-third size).[ /one_third_last ]

Output:


This is the first column (two-thirds size)
This is the second column (one-third size)

Shortcode:

[ one_fourth ]This is the first column (one-fourth size).[ /one_fourth ][ three_fourth_last ]This is the second column (three-fourths size).[ /three_fourth_last ]

Output:


This is the first column (one-fourth size)
This is the second column (three-fourths size)

These are not the only possibilities. Remember, any combination can be used; as long as both rules above are met. One; the total MUST equal one (1). Two; the closing shortcode set MUST use the _last syntax.

Three Column Example

Let’s now investigate using a three column example:

Shortcode:

[ one_third ]This is the first column.[ /one_third ][ one_third ]This is the second column.[ /one_third ][ one_third_last ]This is the third column.[ /one_third_last ]

Output:


This is the first column.
This is the second column.
This is the third column.

Using other HTML Elements

The column shortcodes are not just restricted to text. Other HMTL elements may be inserted as well; including images, videos and even other shortcodes.

Shortcode:

[ one_third ]< img src=”http://learn.wpeditpro.com/wp-content/uploads/2014/04/information.png” alt=”information” width=”128″ height=”128″ class=”alignnone size-full wp-image-19″ / >[ /one_third ][ one_third ]My Image[ /one_third ][ one_third_last ]This image is used as an example to illustrate how other HTML elements can be used inside column shortcodes.[ /one_third_last ]

Output:


information
My Image
This image is used as an example to illustrate how other HTML elements can be used inside column shortcodes.

Other Examples

There are literally dozens of possibilities when using column shortcodes; too many to list. Just remember the two rules above: 1.) The total must always equal one. 2.) The last set of shortcodes must include the _last syntax.

Here are a few more raw examples:

[ one_fourth ][ /one_fourth ][ one_half ][ /one_half ][ one_fourth_last ][ /one_fourth_last ]
one-fourth + one-half + one-fourth = 1

[ one_sixth ][ /one_sixth ][ one_third ][ /one_third ][ one_half_last ][ /one_half_last ]
one-sixth + one-third + one-half = 1

Multiple Column Shortcodes

There is no limit as to the amount of column shortcodes used on a post/page. We can use one set of column shortcodes (totaling 1); then add any other type of content; then insert a completely new set of column shortcodes (totaling 1).

Here is an example:

Two Columns:
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin dictum ullamcorper justo. Etiam semper pretium sem, sit amet egestas nulla feugiat sed. Proin eu tincidunt lectus. Suspendisse fermentum sagittis lacus, in scelerisque risus tincidunt vestibulum. Phasellus pulvinar gravida sem imperdiet vehicula.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin dictum ullamcorper justo. Etiam semper pretium sem, sit amet egestas nulla feugiat sed. Proin eu tincidunt lectus. Suspendisse fermentum sagittis lacus, in scelerisque risus tincidunt vestibulum. Phasellus pulvinar gravida sem imperdiet vehicula.



No Columns (normal content)
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin dictum ullamcorper justo. Etiam semper pretium sem, sit amet egestas nulla feugiat sed. Proin eu tincidunt lectus. Suspendisse fermentum sagittis lacus, in scelerisque risus tincidunt vestibulum. Phasellus pulvinar gravida sem imperdiet vehicula.



Three Columns

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin dictum ullamcorper justo. Etiam semper pretium sem, sit amet egestas nulla feugiat sed. Proin eu tincidunt lectus. Suspendisse fermentum sagittis lacus, in scelerisque risus tincidunt vestibulum. Phasellus pulvinar gravida sem imperdiet vehicula.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin dictum ullamcorper justo. Etiam semper pretium sem, sit amet egestas nulla feugiat sed. Proin eu tincidunt lectus. Suspendisse fermentum sagittis lacus, in scelerisque risus tincidunt vestibulum. Phasellus pulvinar gravida sem imperdiet vehicula.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin dictum ullamcorper justo. Etiam semper pretium sem, sit amet egestas nulla feugiat sed. Proin eu tincidunt lectus. Suspendisse fermentum sagittis lacus, in scelerisque risus tincidunt vestibulum. Phasellus pulvinar gravida sem imperdiet vehicula.

Other Uses of Column Shortcodes

Have you found another usage of column shortcodes not described here? Please tell us about it in the comment section below. We would love to see your awesome designs!


Josh Lobe has written 53 articles

Josh Lobe is the sole developer of WP Edit and WP Edit Pro. A father of two; a husband to a beautiful wife; and a small home in the suburbs... he primarily enjoys coding in WordPress and designing websites.

2 thoughts on “Column Shortcodes

Leave a Reply

Your email address will not be published. Required fields are marked *

ENTER CAPTCHA MATH *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>