By

How to Create Columns the Easy Way! (With Shortcodes)

Ever wondered how to create beautiful column layouts on your pages, without any custom coding? If you are using a Press Coders theme, you can use shortcodes to do just that!

Shortcodes are small snippets you can copy/paste into your pages and posts that create cool stuff like columns. In this article, we will use our new theme Façade to create some simple columns on our theme pages.

Let’s look at an example. Say you have a “Staff Directory” page that lists your four staff members and gives a short bio about them. Normally, you would start with something like this, below.

Screen shot 2013-04-30 at 10.06.05 AM

Now, this certainly contains the information you need. However, it would be nice to be able to do something interesting with it. You could use four blocks to display this information, using two columns and two rows. This makes the page more visually interesting. But how to do that?

Answer: shortcodes.

Façade comes loaded with shortcodes to help you out with these kinds of problems. Shortcodes, as a definition, are little pieces of “code” that you can use inside WordPress. Usually they do something useful that you can’t do normally in the text editor alone. They are always inside “[" and "]” brackets so you know what they are.

Once you have your content, you can wrap them with shortcodes. For our example, we’d want to use the “[one_half] [/one_half]” shortcode. If you wrap the content you want in the left half with “[one_half] [/one_half]” and the content on the right half with “[one_half_last] [/one_half_last]”, your content will be split in two columns on the page.

Use the shortcodes like this in the editor.

Screen shot 2013-04-30 at 10.37.18 AM

Your content should display like this.

Screen shot 2013-04-30 at 10.40.12 AM


Here’s the code you can copy:

[one_half]
First of 2 columns
[/one_half]

[one_half_last]
Second of 2 columns
[/one_half_last]

You can create most any table with our shortcodes. In Façade, we have shortcodes for halves, thirds, and fourths. So, you can mix and match, as long as the total adds up to one. For example, a one-half column with two more one-fourth columns ( 1/2 + 1/4 + 1/4 = 1). We also have a two-thirds column, so you can do a one-third column and a two-thirds column. Just make sure the last column uses the _last version of your shortcode.

Here’s an example of the code for a three-column layout:

[one_third]
Column One...
[/one_third]

[one_third]
Column Two...
[/one_third]

[one_half_last]
Column Three...
[/one_half_last]

Here are a few more examples:

Three-Column Layout

three-columns

 

Half-Quarter-Quarter Layout

column-example


This doesn’t just apply to text either. You can put images, text, video, or whatever you can put in WordPress content in these sections. In fact, the two pictures above are inside [one_half] [/one_half] shortcodes. This versatility means that you can get creative with your layout on pages and posts.

You can see all of the shortcodes on the setup page for each theme. Be creative and have fun with it!

Also, if you have any interesting shortcode usage on your site, let us know in the comments!

3 Responses to How to Create Columns the Easy Way! (With Shortcodes)

  1. Pingback: How to Create Columns the Easy Way! (With Shortcodes) -

  2. Anthony says:

    Any idea how to get my column headers to line up? Can’t seem to get it formatted right on this page: http://www.consciousconnectionmagazine.com/about-us/ Thank you.

Leave a Reply

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

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=""> <strike> <strong>