Beginner's Guide for WordPress - Start your WordPress Blog in minutes.
Choosing the Best
WordPress Hosting
How to Easily
Install WordPress
Recommended
WordPress Plugins
View all Guides

How to Create Grid Column Content in WordPress the “Right” Way

Last updated on by
Elegant Themes
How to Create Grid Column Content in WordPress the “Right” Way

Have you ever found a need to create grid column content in your posts or pages? Up until now, this feature was reserved to theme developers. Many theme authors were adding 20+ column shortcodes in their themes to keep up with competition in the industry. The biggest problem was that they were complicating the issue more than it needed to be. By adding their shortcodes, you would be locked into that specific theme forever because another theme used their own branded version of the shortcode. That’s just not right. In this article, we will show you how to create grid column content in WordPress posts and pages the “Right” way.

First thing you need to do is install and activate Justin Tadlock’s Grid Columns plugin. Upon activation, you are now ready to use it. Because this plugin has one function and one function only, to make columns, there are no complicated settings option.

You can start using the column shortcode in your post or pages like in the example below:

[column grid="4" span="1"]Some content[/column]

[column grid="4" span="1"]Some content[/column]

[column grid="4" span="1"]Some content[/column]

[column grid="4" span="1"]Some content[/column]

As you can see everything is based on grids. By default there are 4 grids. Each span is equal to the number of columns in the grid. For example, if you add 2 span, then you will only have two columns. See the screenshot below for a visual example:

Grid Columns Preview

You are probably wondering why was this plugin created and why you should use it?

Well, many theme developers add several column shortcodes to their themes (this isn’t allowed on WordPress.org, but there are other marketplaces for themes). Adding all these shortcodes are not the best solution and here is why:

  • They lock the users, you, into their themes forever.
  • They create 20+ shortcodes for what is possible for one. This makes it look like their themes have more features.
  • They remove core WordPress filters that other plugins rely on, thus breaking your themes when trying to add other plugins.
  • The code is mostly poor written because it is most likely copied from the same bad source.

This plugin gives you a way to use columns while being able to switch between theme to theme while following all the WordPress coding standards and usability methods.


Editorial Staff at WPBeginner is a team of WordPress lovers led by Syed Balkhi. Page maintained by Syed Balkhi.

WPBeginner's Video Icon
Our HD-Quality tutorial videos for WordPress Beginners will teach you how to use WordPress to create and manage your own website in about an hour. Get started now »

Comments

  1. Mark Shirley says:

    GREAT PLUGIN

    Hi ive been using this plugin for a while with a bit of code to make it act responsively. Is there any CSS for narrowing the gaps.

    PS many thanks to Justin for this plugin

  2. TOM says:

    Dear All,

    How can I automatically post a category into a specific column, e.g. category A posts should go into column 1, B into 2 etc. ?

    Can I use this plugin and what code do I have to add/change and where exactly (style.css ?).

    The reason: other plugins such as WP-o-Matic should then automatically post category postings into columns…

  3. Justin Tadlock says:

    I agree with the others that using divs is better than shortcodes, and I’m the plugin author! However, it’s not the easiest option for many. I’m even using the plugin for a few things.

    The great thing about the shortcode method that I built is that it can be extended in many ways. For example, I could easily write some PHP to change all 3-column sets in the future if I wanted to without having to go in and update every post that I used it in.

    Another thing I could do is easily change the markup in the future. For example, HTML6 might have something better suited than divs for this sort of thing. That’d be an easy change with the plugin.

    There’s also the issue of designing for divs between different themes. Sure, I could create some CSS to port from theme to theme every time I change my site’s design. But, it’s easier for me to simply use the plugin.

    The purpose of plugins is to extend WordPress in some way, generally making users’ lives easier. For many, this plugin won’t make sense. But, there’s a whole slew of users who will find it useful. Considering the feedback I’ve gotten so far, it seems that many want this functionality, even some users who do know their way around HTML and CSS.

    More than anything, it’s an effort to get theme authors to stop adding this sort of thing to their themes. I tried to build the plugin in a way that it would work with just about any theme.

    • Editorial Staff says:

      Thanks for dropping by Justin and explaining it clearly :)

    • Troy says:

      I’m Glad you clarified this. some of us are well with word press but still not editors of it.
      I think things will change with word press and the core might get a little more complex in upcoming years but things are changing we never know what will happen with all these platforms in the future.
      thank Both you guys for the tutorial and the extra knowledge.
      Troy.

  4. Richard Hamel says:

    I think the argument of learning to use the CSS method is a sound one, since short codes can get a bit wonky. After a search, I found this tutorial that works quite well:
    http://www.billerickson.net/using-column-classes/
    the example style sheet is here: http://www.studiopress.com/tutorials/content-column-classes.

    For those of us who understand CSS, this certainly must be the better alternative.

    • Editorial Staff says:

      We never said that the div method doesn’t work. Genesis by StudioPress comes with it by default now. However, it is not an ideal solution for very beginners. Yes, if you understand CSS, and you think divs is the best way to go for you, then by all means go for it.

  5. Brad Dalton says:

    Why wouldn’t you use the Genesis columns?

    Your second columns content here

    If you’re not using Genesis, I don’t see why you’d install one plugin which simply enables you to add columns when you could use a plugin which offers all the other features you might need like buttons, content boxes etc.

    Are you saying these plugins aren’t good quality?

  6. Bo Kauffmann says:

    Very helpful….. I’ve often wondered why the wordpress visual editor did NOT include tabs, so you could create a list by just tabbing across the space. But this plugin will definitely help…thank you…

  7. zimbrul says:

    I know Genesis Framework has got something like that built in…

  8. Mark says:

    Give a man a fish, you feed him for a day. Teach a man to fish, you feed him for life.

    Wouldn’t teaching a beginner how to do this with CSS be a better solution? Locking a beginner into a plugin isn’t much better than locking them into a theme. I opened this article because I thought you were offering up a better/cleaner method of creating grids with CSS than I currently use. I have to agree with Tim Hyde on this one.

    Teaching beginners to rely forever on plugins will keep beginners as beginners. I would rather see information that helps them stop being beginners, and move up to experts!

    • Editorial Staff says:

      Its easier said than done. You would be surprised at the level of beginners there are. There are folks who don’t know how to add a link in WordPress even when the button is present in the visual editor. Then there are folks who can get around with the WordPress interface, but are scared crazy of touching any code (yes CSS is not code, but for them it is). Then there are those beginners who are savvy, but just new to WordPress who explore things. The last group of folks will do their research and learn the web markups (HTML / CSS).

      There is nothing wrong with plugins specially ones like these. Because they will work with just about every theme. Think of it as a functionality extension of WordPress (that’s what plugins are to begin with). This is not any different than using WordPress SEO by Yoast to handle your on-page SEO. Themes are NOT suppose to be functionality extensions of WordPress. You should be able to switch the way how your site look without worrying about losing a certain functionality.

      This is the same reason why custom post types should NOT be registered in a theme (this goes for all Portfolio themes out there). Neither should SEO.

      The notion that only beginners rely on plugins is completely WRONG! Plugins are not made for just beginners. They are made to ease the life of EVERY WordPress user. This is why you and everyone else who uses WordPress use plugins. Using your logic, we should teach everyone how to do advanced page caching or leverage memcaching rather than just turning on W3 Total Cache. Or teach everyone how to build their own advanced SPAM protection tools instead of using Akismet. Yes those are ALL plugins, and they are made to make everyone’s life easier.

  9. Tim Hyde says:

    Not sure shortcodes are the best way to handle this. In a way this plugin makes the same mistake a lot of themes make – adding lots of unnecessary shortcodes to your content, when you could achieve the same thing with some simple html/css.

    Having shortcodes in a plugin, I agree is better than them being your theme since you can change your theme and your content should still layout correctly.

    But why not just add class=”one-half” to a div or p tag? Much more transportable and just as easy as [column grid="2" span="1"]Some content[/column]. And by doing it users learn some useful code along the way!

    All my themes (themeloom.com) do this with class not shortcodes and with some visual editor buttons to insert the html/css for you in case you are a wpbeginner and need a head start.

    But if Justin made the plugin then at least you know it will work if you decide that is how you want to work.

    • Editorial Staff says:

      Tim, using divs is not an option for beginners because they don’t know enough. You can add visual editor buttons like you suggested which is another way of doing so. I have to see how you are handling multiple columns though. Using a shortcode like this makes it easy for others to understand and use it.

      -Syed

    • Drew Smith says:

      Sorry Tim, useful to whom?

      Part of my job is adding content to our WordPress site. At some point our needs will outstrip my time and capabilities, at which point I will hire someone with the required skillset. In the meantime, I have no inclination to become a WordPress expert. It is simply a tool I use to accomplish a task.

      I perform similar heretics with word processing using Microsoft Word rather than LaTex.

  10. David says:

    Just what I was wondering. The last two themes I have used both had shortcodes like [column_half] Content [/colum_half]
    [column_half_last] Content [/column_half_last]

    Never knew there was a plugin that does it for you. Thanks. :)

Add a Comment

We're glad you have chosen to leave a comment. Please keep in mind that all comments are moderated according to our comment policy, and all links are nofollow. Do NOT use keywords in the name field. Let's have a personal and meaningful conversation.