Simple Tips for Creating WordPress Columns

Have you ever wanted your website’s content to appear more compelling? Well you should, because if you wish to cast a good impression on your readers and visitors, proper content presentation is essential. One of the easiest ways to spice up your content format in WordPress is to use columns.

So how do you know if columns are right for your site — and what’s the best way to create them? Read on to find out.

Creating WordPress Columns

While it is true that some users find columns distracting, there may be situations where using columns in your posts makes more sense. Columns might be a good idea if:

  • You need to present content for comparison and analysis.
  • You are posting a report online and a column-based layout would make it easier to assess the outcomes.
  • You just want your blog post to look different, in which case, well, a column-based layout will obviously help.

So, how do you create columns for your WordPress posts? From CSS coding to using custom plugins, there are many ways to do this. It all depends on your specific needs and goals.

Using Plugins to Create Columns in WordPress

There are several plugins that can help you create columns in WordPress, but none so popular as Column Shortcodes. With over 100,000 active installations, Column Shortcodes makes it pretty easy to work with and create columns in WordPress.

WordPress columns

Column Shortcodes, as the name suggests, lets you create columns by means of shortcodes. It comes with ten predefined shortcodes, each meant for a different column width. All you need to do is pick the proper shortcode and the columns will be inserted into your posts.

Here’s how it works:

After activation, you will find a button to add columns to your posts in the post editor.

Column Shortcodes button

Simply select the text you’d like contained within a column, and click the button. Next, select the column width you prefer.

Column Shortcodes List

You can choose from different predefined column widths and also specify column padding. After that, your content will be added within the shortcodes.

Column Shortcodes editor

The final output?

Column Shortcodes Result

And just in case you need more help with the plugin, be sure to check out our guide to creating columns in WordPress.

Another such plugin is Shortcodes Ultimate. In fact, virtually any decent shortcodes plugin can create columns — all you need to do is find the one that suits your goals. If you need additional shortcodes, such as buttons, highlight, accordions, etc. then the Column Shortcodes plugin will not suffice for you. In such cases, Shortcodes Ultimate might serve you well.

Shortcodes Ultimate

There is no special reason why I have picked Shortcodes Ultimate over all the others in its league except for the fact that it is by far the most popular one with over 600,000 active installations. Furthermore, its free version comes loaded with features and most users may not even need the pro version.

Usage of Shortcodes Ultimate is also fairly simple. Since we are discussing columns here, we shall bypass all of its other features.

After activation, you will find an “Insert Shortcode” button in the post editor.

Shortcodes Ultimate button

Once you click on it, you will find the Column option in the last column of the shortcodes list.

Shortcodes Ultimate List

Note that Shortcodes Ultimate offers some added customization options in the form of custom CSS classes. This might seem a bit too complicated for some users because you need to have a working knowledge of CSS in order to use that feature. That said, you can preview your shortcode’s output live before actually inserting it and make the necessary changes therein.

Shortcodes Ultimate Editor create columns in WordPress

Once this step is completed, you can insert the shortcode in your post and columns will then be added.

Shortcodes Ultimate output

You can also choose to save the shortcode settings as a preset if you are planning to use it often.

Using CSS to Create Columns in WordPress

Relying on CSS to create columns in WordPress makes better sense if you need to use columns only sparingly. It is better to activate and use a plugin if you use columns often, but for sporadic usage, CSS should be the way to go.

Of course, you need to be familiar with CSS properties such as width, padding and float. Also, bear in mind that many WordPress themes tend to handle CSS differently — some come with predefined classes and properties and the results you get in terms of padding will vary from one theme to another. Be sure to check with your theme’s developers if you run into any CSS-related troubles.

To create a three column layout, you can use the following code:

<div style="width:30%;padding:0 10pt 0 0;float:left;">

Column 1

Column 1


<div style="width:30%;padding:0 10pt 0 0;float:center;">

Column 2

Column 2


<div style="width:30%;padding:0 10pt 0 0;float:right;">

Column 3

Column 3


The values for width, padding and float will vary depending on the nature of your theme’s layout and the number of columns that you require. You might need to refer to CSS-specific documentation for these styles: width, float and padding.

Summing it up

While the Column Shortcodes plugin is by far the easiest and simplest method to get the job done, custom CSS can be convenient if only a handful of your posts require columns.

Which is your preferred method to implement and create columns in WordPress? Share your views in the comments below!


  1. João Elton Moreto
    João Elton Moreto

    Nice! You can also choose a good theme with bootstrap support. Even better, easier and markup safe using a great page builder, like beaver builder.



  2. funckY

    Thanx, great plugin for a nerd like me…


  3. Francis

    Is it possible to make in WordPress 2 column page where the text would flow automatically from left column to the right one and also inside the text box would be possible to insert a photo?
    Please see an example on the bottom picture right page.


    1. Goy Julien
      Goy Julien

      Technically, CSS {columns:2;} can achieve it. If the image is using a responsive class, embedded in a with a display set as inline-break, it would flow.
      But to set it up in WP… long effort.

  4. Guy-{aul Mitchell-Dwelly
    Guy-{aul Mitchell-Dwelly

    It doesn’t seem to work with ‘pages’ only posts