The Easy Way To Create Content Grids in WordPress

CSS grids in design are very popular these days. While some people will argue semantics when it comes to grids, there’s no denying the ease-of-use they bring to the table. Even more so when you give this power to end users.

By using a grid shortcode, users can create arbitrary layouts in WordPress – a freedom that would have been much-envied 5-6 years ago. There are many column plugins in the WordPress Plugin Repository, which will allow you to take advantage of this functionality right now.

In this Weekend WordPress Project, we’ll build our own shortcode grid to cement our understanding, and to get a grasp of how it all works.

Shortcodes 101

Shortcodes in general are pretty easy to create. All we need to do is register a function that outputs the intended content using the add_shortcode() function. Let’s a look at a basic example:

When the code above is placed into a theme’s functions.php file or a plugin, it will enable users to add preformatted code to their content like this:

The shortcode looks for occurrences of the shortcode and then replaces its content with what we specify. In this case we are simply wrapping some HTML tags around it.

The final output will look like the following snippet. Bonus points for figuring out what’s in the array!

By adding parameters to our shortcode, we can let users modify the behavior. In this case we may want to allow users to specify the code type so we can format the section accordingly:

This more-or-less complete example shows that the shortcode function receives the shortcode attributes as the first argument and the content as the second. By using the shortcode_atts() function to merge the given and the default values we can create some powerful stuff.

The user can now specify a language – it will be added as a class to the outermost tag.

Our Base Grid

Writing the CSS for a grid is not really our problem – we will be focusing on creating the shortcode only. Due to this, we will be using the popular Foundation framework’s grid. To get started we need to know the HTML of a grid:

Notice that each row of columns is wrapped in a div with the class of row. Next, there are four classes used: small-n, medium-n, large-n and columns. The columns class is used on all columns, while the others depend on what you are doing.

Foundation is mobile-first, so small-n is the only required class. If no other size classes are given the small class defines all sizes. If a medium size is given as well then small screens will use the size defined by the small class, medium and up will use the medium class. The default column count for a Foundation grid is 12. This means that the column count within a row should add up to 12.

One complication of creating a grid is that we need to know where it starts and ends. The easiest way to do this is to create two shortcodes. We will create the columns as a column shortcode and we will create a dedicated row shortcode which will serve to wrap them all up.

Technically, we could detect the columns using some advanced regular expressions, but this would not be a WordPress-standard way of doing things and it would be much more prone to error.

The Shortcode Plan

When dealing with shortcodes it’s best to write out the final text you would use in the editor as if the shortcode were already in place. This will help guide us in adding the attributes and coding the functionality. Based on our example above:

There are two things to note here: I haven’t specified the small version because this will usually be 12 in any case. While it isn’t obvious here, I also want to make sure that you only have to specify the bare minimum.

If you have a column which is 12 width on small devices and 6 on medium and large, you should only need to specify the medium size. The small size will default to 12 and the large size will default to the medium size.

The Row Shortcode

This one is pretty simple. The row shortcode will simply wrap the content within it in a div which has the row class.

The only unfamiliar thing here should be do_shortcode(). We need to add this to make sure that shortcodes in the content are converted. If we don’t add this function our column shortcodes wouldn’t be run through our function, they would show up as-is, square brackets and all.

The Column Shortcode

This one is a bit more difficult, mainly due to the the fallback structure. In a nutshell: each screen size falls back on the previous one and small defaults to 12.

I’ve also added the do_shortcode() function here. Users may want to add galleries, or other plugin functionality to their columns so it makes sense to allow for it.

The Line Break Issue

I cheated a bit in the previous screenshot. If you followed along until now, your shortcode will not work as advertised. If you copy-pasted everything, chances are that your columns will be all under one another.

The reason is that that we have placed a line break between shortcodes which WordPress outputs as a literal line break. If you take a look at the HTML there is nothing wrong with what we did, WordPress just pokes it’s nose into it.

The easiest solution is to put start and end column tags on the same line. While this works it can hardly be called elegant or user friendly.

The only way around this is to use a regular expression. This is usually frowned upon by the WordPress community but in some cases the ends justify the means. Also, if we’ve careful we can make sure nothing else is affected, only our own shortcode.

There are two things we need to know before we write some regular expressions. If there is one line break between our shortcodes WordPress will place a line break at the end of the line. If there are two or more line break, WordPress will place an opening paragraph tag at the beginning of the line and a closing paragraph tag at the end. Let’s modify the row shortcode to take care of this issue.

Testing Our Grid

Our grid shortcode now works perfectly but there’s no CSS to back it up, so let’s change that. Head on over to the Foundation download page and deselect all components except the grid.

Download the resulting package and unzip it. Go into the CSS folder within Foundation and copy foundation.min.css to your website’s theme’s folder. Note that if you are working with a third party theme you should use a child theme instead.

Once your file is in place you should enqueue it from within your theme’s or child theme’s functions file:

This is great for testing, but in production we could make this a bit leaner. First of all, if your theme uses Foundation anyway, there is really no need for this step. If your theme does not use Foundation you are only using the grid when a user creates columns. So why enqueue it on every page?

The solution is to register it in the functions file but enqueue it in shortcode call.

What Else?

Shortcodes are pretty easy to create and allow for some neat shortcuts and functionality. Our shortcode could be improved by adding support for centered columns, offset columns and even block grids.

If you have a better way of creating columns in WordPress we’d love to hear about it, let us know in the comments!

Image credit: Ed Dunens.