Turn Your Free Theme into a Premium Design: WordPress Columns Plugin

You know all those TV shows and magazine articles about how you can do this or do that on a budget? Design your house like a millionaire’s on a budget. Dress like a movie star on a budget. Etc.

Well, now with the  WP Easy Columns plugin, we have Turn Your Free Theme into a Premium One … For FREE! Or, of course, you might just want to add more flexibility to a premium theme.

What It Does

The WP Easy Columns plugin lets you spice up ANY theme by controlling the look of ANY post or page with columns. Split any page or post as many as five columns  across.

But there’s more. You don’t have to stop there. You can stack the sets of columns for some truly premium looking designs. For example, split the top half of the page into three columns, and then split the bottom half of the page into two columns. Whatever you like. The combinations are almost endless.

We’ll get into one simple but creative design in order to get a taste for what’s possible, but first we’ll run through how the plugin works.

Insert Shortcodes

The plugin works with shortcodes, and there are two ways to insert them – either manually or with the automatic insertion tool found on the visual editor.

If inserting your code with the automatic insertion tool, it will automatically insert some identifying words for you so you know where to put your content.

In this example, you will see “Third Column” and “Two Thirds Column” in the code.

Replace those words with your content.

You can see the result of the One-Third + Two-Thirds combination.

Styling – Get a Little Creative

Of course splitting a post or a page into some columns can liven things up, but you don’t have to stop there.

Take a look at a quick post I created in the default WordPress Twenty-Eleven theme:

I can tell you that I’m no coder, and I’m no designer, but if I say so myself, this post is almost starting to look as if it came from a premium theme.

How to Style a Page

To show you how relatively simple it is, I’ll run through what I did to get the post above looking the way it does.

  1. First I inserted a picture at the top – that’s the guitar that you see.
  2. I used to the automatic insertion button on the visual editor and chose a 3-column layout.
  3. I entered a title to go above all three of the columns and centered it.
  4. Inside of the first two columns, I inserted my text. (You will have manually split these up so that they are roughly even.)
  5. In the third column, I inserted a small image at the top and then filled out the rest of the column with text.
  6. Next I put in a few lines to even more clearly divide the top half of the page from the bottom half. There is a “divider” shortcode in the plugin, but when I used that, I didn’t see a horizontal line appear as I expected. So instead I switched to the HTML view on the post and manually inserted two horizontal lines:
<hr />
<hr />


 Bottom Half

  1. For the bottom half of the post, I went back to the automatic insertion button on the visual editor and added two 1/2 columns.
  2. I added another title and left that one aligned left.
  3. In the first column, I inserted an image (the hat) and then filled out that column with text.
  4. In the second column, I added a title and some text.
  5. In order to get the column on the right to have an orange background, I had to do a little bit of styling.
  6. One way to do some simple styling on any of the columns is to give the column a class name (such as “multicolumn” or something else).
[wpcol_1half_end id="" class="multicolumn" style=""]

7.  I then added the following to the style.css file in my Twenty-Eleven theme.

 .multicolumn {
 padding: 1.625em;

Please Note
: If you plan to style your columns with padding as I did above with “padding: 1.625em;” then you will need to use the “Custom Options” in the back end and cut each ½ column down so that the columns will fit side by side (otherwise it will put one column below the other one, not beside it).

If you add a colored background and don’t add padding, then your text will run to the very edge of the colored box and not look right. When you add padding, it gives the text some space.

In my case, I had to cut the columns down to 43% each. Your numbers may be different.



And that was it. Of course you could add a lot more styling, or be even more creative than I’ve been, but I just wanted to run through a relatively simple example.

Manually Inserting Shortcodes

If inserting your own shortcodes instead of using the automatic insertion tool on the visual editor menu, then know that the last column in you group must use the shortcodes with _end in them.

You are given two types of shortcodes for each column.  For example, for the 1/4 columns, it looks like this.

1/4 columns
 [wpcol_1quarter id="" class="" style=""][/wpcol_1quarter]
 [wpcol_1quarter_end id="" class="" style=""][/wpcol_1quarter_end]

So if you want to put four columns across, the first three columns should use the first shortcode:

[wpcol_1quarter id="" class="" style=""][/wpcol_1quarter]

For the last column, you would use the second shortcode (the one with _end)

[wpcol_1quarter_end id="" class="" style=""][/wpcol_1quarter_end]

If you are unsure about any of this, then just use the automatic insertion tool, and then look at the code it inserts.

Make Your Free Theme Premium

I know this is said about a lot of plugins, but with this plugin it’s true: You really only are limited by your imagination. Dress up any post or page and make your free theme look premium, or simply give your premium theme more flexibility.

Download It Here

Thanks to trailsanderrors for the image.