Create Columns in the WordPress Post Editor With a Custom Shortcode

One of the issues with the built-in TinyMCE editor in WordPress is that it is hard for clients to create more complex layouts in it. Even if you as a designer set up the page correctly it is easy for someone without HTML knowledge to break it. Until the editor supports column creation natively, you are best of creating a series of shortcodes for percentage based columns using the WordPress Shortcode API. In this tutorial, I’m going to show you how.

First we are going to set up the shortcode code in the theme and finish off by adding some CSS styles for it to work well on the site. Remember that this is a good asset for you to have across different projects as well.

Crash Course in WordPress Shortcodes

Before getting into the code for this specific shortcode I want to tell you about the WordPress Shortcode API and how it functions. If you already know it, please scroll down to the next section.

You have probably seen plugins use shortcodes all the time. Inserted into posts they look like code but is just normal text which doesn’t mess with the formatting in the editor. Example of such a shortcode is [photo_gallery] or [photo_gallery id="1"].

There are some special attributes required to create shortcodes with options that is not necessary in this tutorial, instead we are going to move right to shortcodes that look like this: [column]My text[/column].

Codes like the last one are called enclosing shortcodes, compared to the self-enclosing codes in the first example. They are used to apply some type of formatting to a block of text or images in-between.

What We Are Going To Create

In order to make some columns that can be used in any area on the site served by the post editor, we are going to turn to making a series of divs that each apply a class to a piece of text. This class is going to be controlled by some CSS to turn the layout into columns.

To allow for different widths, we will create the following fractions: halves, thirds, fourths, fifths and sixths. There is no point in continuing to sevenths as this will be a very small area (just under 15% wide).

Here is where you need to watch out and put your mathematical thinking cap on. We are talking about fractions here, which means you can save yourself some trouble. Instead of creating: one half, two halves; one third, two thirds, three thirds; one fourth, two fourths, three fourths, four fourths; you simply realize that a lot of these fractions are the same thing.

For example: two halves, three thirds and four fourths are all one whole, which defeats the point of a columns as it is. Secondly, two fourths is the same as one half, eliminating the need for that shortcode.

As a result of this, here are the codes that we will need to create: one half, one third, one fourth, one fifth, one sixth, two thirds, three fourths, two fifths, three fifths, four fifths, five sixths.

The Shortcode Code

With the thinking all done (almost), we are ready to get into the actual PHP code. Open up your functions.php file and get ready to create a function.

function theme_shortcode_column($atts, $content = null, $code) {
	return '<div class="'.$code.'">' . do_shortcode(trim($content)) . '</div>';
}

What you have above is a normal WordPress function that is slightly smart. First of all, we create a function that has three variables going into it. These are all standard variables in the Shortcode API which are going to get populated when we define the shortcode.

The Function Itself

First we have $atts which represents arguments going into the shortcode.

Secondly, we have $content = null. This bit pulls in the content of the shortcode and is used for the enclosing shortcodes to define where to place the content between the shortcode opening and closing tags. By setting it to equal null, we set the default value for the content variable, should nothing be sent from the post editor.

Normally, these two are all that would be required to create a simple enclosing shortcode. However, doing it the simple way would force us to create one function for each of the columns. Instead, we are going to introduce a final variable: $code.

The $code variable simply contains the name of the shortcode we write in the post editor, when it equals the name of the shortcode as defined in the functions file. Simplified you could just say it echos the name of the shortcode. We use this to our advantage here to save space, only having to create one function for all our column shortcodes.

Returning The Result

The next line in the function returns the result. Simplifying this and removing all PHP code would turn this into a standard div, with the class of for example: one_third.

Here is where we call the $code variable to print the shortcode variable. This means that the name of the shortcode is going to end up being the name of the class that we use to position our columns.

Instead of just echoing the $content variable by itself, we use another neat WordPress function to make sure that we can use other shortcodes within this shortcode. This function is called do_shortcode and ensures that WordPress recognizes its shortcodes inside of the content being echoed in $content.

Registering the Shortcode

With this smart function created, we just need to make WordPress recognize a new shortcode and use this function as a template for outputting it.

add_shortcode('one_half', 'theme_shortcode_column');

This short snippet tells WordPress to add a shortcode by the name of one_half (making this the shortcode we use) and have it use the function theme_shortcode_column to control how the content appears.

This snippet needs to be repeated for each of the shortcodes we want to add but with just one function.

A Function Variation And Double The Fun

I haven’t been quite honest saying that we only need one function. In fact, we need two. To be able to control the styling and clear the floats used for positioning, a series of “last” shortcodes need to be created. The syntax stays the same, with the addition of just a little div clearing and another function name:

function theme_shortcode_column_last($atts, $content = null, $code) {
	return '<div class="'.str_replace('_last','',$code).' last">' . do_shortcode(trim($content)) . '</div><div class="clearboth"></div>';
}

Also adding the _last appended shortcodes as a new series:

add_shortcode('one_half_last', 'theme_shortcode_column_last');

The Final Code

For your reference, I am pasting the full PHP code here as well as the CSS code required for styling below.

PHP Shortcodes Code

function theme_shortcode_column($atts, $content = null, $code) {
	return '<div class="'.$code.'">' . do_shortcode(trim($content)) . '</div>';
}
function theme_shortcode_column_last($atts, $content = null, $code) {
	return '<div class="'.str_replace('_last','',$code).' last">' . do_shortcode(trim($content)) . '</div><div class="clearboth"></div>';
}

add_shortcode('one_half', 'theme_shortcode_column');
add_shortcode('one_third', 'theme_shortcode_column');
add_shortcode('one_fourth', 'theme_shortcode_column');
add_shortcode('one_fifth', 'theme_shortcode_column');
add_shortcode('one_sixth', 'theme_shortcode_column');

add_shortcode('two_third', 'theme_shortcode_column');
add_shortcode('three_fourth', 'theme_shortcode_column');
add_shortcode('two_fifth', 'theme_shortcode_column');
add_shortcode('three_fifth', 'theme_shortcode_column');
add_shortcode('four_fifth', 'theme_shortcode_column');
add_shortcode('five_sixth', 'theme_shortcode_column');

add_shortcode('one_half_last', 'theme_shortcode_column_last');
add_shortcode('one_third_last', 'theme_shortcode_column_last');
add_shortcode('one_fourth_last', 'theme_shortcode_column_last');
add_shortcode('one_fifth_last', 'theme_shortcode_column_last');
add_shortcode('one_sixth_last', 'theme_shortcode_column_last');

add_shortcode('two_third_last', 'theme_shortcode_column_last');
add_shortcode('three_fourth_last', 'theme_shortcode_column_last');
add_shortcode('two_fifth_last', 'theme_shortcode_column_last');
add_shortcode('three_fifth_last', 'theme_shortcode_column_last');
add_shortcode('four_fifth_last', 'theme_shortcode_column_last');
add_shortcode('five_sixth_last', 'theme_shortcode_column_last');

CSS For Styling The Columns

For speed and ease of use in a project, I have compressed the code to single-line format.

.one_half,.one_third,.two_third,.three_fourth,.one_fourth,.one_fifth,.two_fifth,.three_fifth,.four_fifth,.one_sixth,.five_sixth { position:relative; margin-right:4%; float:left; min-height:1px; height:auto!important; height:1px; }
.one_half { width:48%; }
.one_third { width:30.6666%; }
.two_third { width:65.3332%; }
.one_fourth { width:22%; }
.two_fourth { width:48%; }
.three_fourth { width:74%; }
.one_fifth { width:16.8%; }
.two_fifth { width:37.6%; }
.three_fifth { width:58.4%; }
.four_fifth { width:79.2%; }
.one_sixth { width:13.3333%; }
.two_sixth { width:30.6666%; }
.three_sixth { width:47.9998%; }
.four_sixth { width:65.3332%; }
.five_sixth { width:82.6665%; }
.last { margin-right:0!important; clear:right; }
.one_half .one_half { margin-right:8.3333%; width:45.8333%; }
.one_half .one_third { margin-right:8.3333%; width:27.7778%; }
.one_half .two_third { margin-right:8.3333%; width:63.8889%; }
.two_third .one_third { margin-right:6.1224%; width:29.2517%; }
.two_third .two_third { margin-right:6.1224%; width:64.6258%; }
.two_third .one_fourth { margin-right:6.1224%; width:20.4082%; }

Conclusion

Using shortcodes is very powerful and especially for creating columns in WordPress, this is a user-friendly way and much more foolproof than entering and preparing divs in the HTML editor.

Have you used shortcodes before? Is this useful for you? If you have any ideas on how to make the columns shortcode better or improve upon this, or have a good example of how you used this shortcode, please share it with us.

  • http://JasonLoucks.net Jason Loucks

    Excellent tutorial. I hope you post more about shortcodes. I see them all the time, but never really got how to make them or use them. Thanks Erik,

  • Bercana

    Using shortcode to create columns would make 99% of clients heads explode.

  • andy

    amazing tutorial…………….. very less coding,,,,

  • Lpldesign

    how do you add the code? 

    • Lpldesign

      I mean how do you add the shortcode?

  • John K

    Thanks for providing so much detail. This is very handy.

  • dinesh

    too many functions use on the gird system it’s bad habits, i wanted just a one function and solve all gird system.

  • Ascii King

    Nice tutorial, but you are missing the part that shows us how to use it. Perhaps a few examples would be helpful.

  • fredric

    Great tutorial. Just what I wanted. I see that some of you ask how you add the short code. If you mean in the editor you go like this. [one_half]My text[/one_half][one_half]My text[/one_half]

    • Mbfis

      The use of it is [one_half]My text[/one_half][one_half]My text[/one_half_last]

      • Mbfis

        [one_half]My text[/one_half][one_half_last]My text[/one_half_last]
        This way you can specify the last column

  • Mike Hancock

    old post.. but for anyone wanting their columns to go back to just one column when on mobile.. add this..

    @media (max-width: 767px){
    .one_half,.one_third,.two_third,.three_fourth,.one_fourth,.one_fifth,.two_fifth,.three_fifth,.four_fifth,.one_sixth,.five_sixth {
    display: block;
    float: none;
    width: 100%;
    margin-left: 0;
    margin-bottom: 20px;};
    }