As many of you know, I’ve been working on a [column] shortcode plugin over the past few weeks to address a problem in the WordPress theme community. Today, I’ve finally pushed this plugin live to the WordPress plugin repository.
You can download the plugin from its official page on Theme Hybrid or from WordPress.org.
What does the Grid Columns plugin do?
Grid Columns creates a single [column] shortcode for use in your post content (or other shortcode-ready areas) to allow you to create columnized content. It serves nothing more than that single function.
Full instructions are in the plugin’s readme.html file with several usage examples, but the following is a small sampling of how to create columns (three-column example).
[column grid="3" span="1"]Some example content.[/column]
[column grid="3" span="1"]Some example content.[/column]
[column grid="3" span="1"]Some example content.[/column]That will give you a look like this:
Some example content.
Some example content.
Some example content.
That’s pretty simple, right?
Why was the plugin created?
The goal of the plugin is to get theme developers to stop adding column shortcodes to their themes. There’s a few reasons this theme development practice is wrong:
- It locks users into using their current theme forever.
- It creates 20+ shortcodes for what is possible for one. This makes it look like themes have more “features.”
- It typically removes core WordPress filters that other plugins rely on.
- The code is just poorly developed altogether (most likely because it’s all copied from the same, bad tutorial).
If you’re a theme developer, please stop doing this. Encourage your users to install this plugin. If your users are having a hard time figuring out how to install a plugin, that’s a lame excuse for keeping the functionality in your theme. Educate them. Heck, send them to me; I’ll teach them.
If you’re a user, even if your theme has column shortcodes, I encourage you to install and use this plugin instead. It’ll save you some major headaches down the road when you want to switch themes.
Download the plugin
You can get the plugin from any of the three following places.
I hope you enjoy the plugin. Please ask any and all support questions on the Theme Hybrid support forums. Feel free to leave feedback in the comments.
I’m all for getting unnecessary shortcodes out of themes, but I’m not sure a one-size-fits-all approach is going to work.
The CSS generated by your plugin ( ‘column column-span-1 column-push-0 column-last’ ) is, IMO, a little verbose and at first glance not going to work with the most common/popular frameworks ( Skeleton, Bootstrap, Foundation ).
From memory, the three I’ve mentioned all use fairly similar class names ( row -> four columns ), perhaps this may be a better convention to follow?
A one-size-fits-all approach works very well for the WordPress
[gallery]shortcode. This plugin is really just based off that simple idea.All class names as well as the CSS itself can be modified. The plugin has hooks to cover all scenarios where potential conflicts may arise. So, if a theme developer wants to roll in support for this plugin based on whatever framework they choose or if they run into a conflict, it’s extremely simple to change things.
The plugin has been tested with well over 100 different themes from the WordPress repository as well as many other themes outside of the repository. It’s received weeks of testing from myself as well as many others. Thus far, everything has worked without a hitch.
If you come to me with a real problem where the plugin doesn’t work, I’ll see about fixing it.
Good to hear. I had no doubt the plugin would be meticulously coded.
Are there docs available regarding the hooks? I could only find links to themehybrid, which required membership.
The hooks are documented inline. It’s pretty straightforward stuff for any WordPress developer. I’m sure I’ll be writing more in-depth tutorials on the plugin and its features for Theme Hybrid members though.
Pretty cool. Will work well on full-width pages.
Good to hear about this plugin which can be used by using shortcodes in pages and also posts where the short code will get works.
Thank you for creating such cool plugin.
In the past I use to buy many themes from themeforest and I would wonder why there were so many short codes just to handle columns, why not just one? So this to me is just good smart business. From now on just use this one plugin, simple. I fully support this great idea.
Thanks Justin, this is going to be really useful.
Do you mind if I ask you’ve encountered the Magazine Columns plugin I’m already using? I’m wondering if it’s code is clean or I should switch. I’m in the process of revamping my website, thus all this hanging out around your site for tips and it’s been just a big, jumbling mess of what stays, what goes, and how do I get the customization I want without coding for forever.
Speaking of, one OT from this thread question: Is it possible or okay to include a theme page for use in a custom content type plugin? For example: I have the Organize Series plugin and I’d like to create a taxonomy-series.php, but it makes more sense to me to attach that to the plugin and the functionality it belongs to rather than the theme which may change.
(still trying to puzzle out how child themes work)
I’d need to see the Magazine Columns plugin code to know anything more.
As far as your theme question goes, the template should go within your theme. It’s related to the presentation of content.
Thanks for both answers. I figured it might be too much to hope you’d ever tried it out.
really great, its really great idea to help humanity to solve their problems. but i can’t understand that where it will create column? in post or in theme index page?
Thanks for another great addition to WordPress. You bring up a good point about how hard it would be change themes when you have created columns etc. with short codes within the theme.
I will definitely be thinking more about if a good plugin can do the job, rather than hard code in a child theme in the future.
Hi Justin, I really like this idea. However, I tried adding this plug to a very basic twitter bootstrap theme and I suspect there is some conflicting css. I do not get columns with bootstrap enabled. When disabling bootstrap css it works just fine.
I don’t have time to investigate it myself at the moment. I hope it’s just some mistake on my part but I wanted to let you know. Thanks for the cool plugin!
You’d have to let me know the theme for me to actually investigate any conflicts. Otherwise, the information is not much use to me.
If you’re having trouble using the plugin though, you should stop by the plugin’s support forums.
Sorry. It was a tidythemes BlankSlate 2.2 with twitter bootstrap added but it’s on my local testing environment. I’ll get back to you when I get a chance to investigate and/or demo it. Plugin works like a charm in my other themes (without bootstrap). Thanks a bunch.
Try out the 0.1 branch on GitHub of the plugin. I believe that should correct any issues.
Good stuff, Justin, look forward to giving it a try.
I have a similar issue with geotagging/geocoding plugins, which all do different things. Change plugin, and you have to re-code all your posts. I’m all in favour of different people doing different things to get different *effects* but I think the *cause* should be plugin- and theme-independent.
Gary
That’s surprising. Geodata plugins should be the one area that you shouldn’t run into this type of thing. WordPress has clearly-defined standards for handling Geodata. That sounds like some plugins doing things wrong.
Nice post.
I will download it when necessary but I like it.
I would like to suggest that you should post few screenshots here.
Strongly agree with you Manus some screenshots will help to understand this post more easily.
You really shouldn’t need screenshots when I provided a live demo of the functionality above.
Nice work on the plugin.
Let me say, briefly, that I am of the opinion that the vast majority of shortcodes have no business being included within a theme but rather should be created as plugins just for accessibility and portability reasons if nothing else. That being said, their are so many poorly written themes/plugins out there that this approach does lead to inevitable CSS conflicts.
I am curious as to your thoughts on this aspect of the issue, and in particular, is there a point for you personally where you essentially are willing to state something to the effect of “the theme/plugin you are using is responsible for the problem, and unfortunately the solution is out of my control or the scopre of my plugin.”
I know we have reached this point on some occasions in house…
I state “the theme/plugin you are using is responsible for the problem…” on a regular basis. If I can, I try to correct the issue for the user and have him pass the correction along to the appropriate developer. But, it all comes down to a case-by-case basis.
As far as CSS conflicts go, they’re inevitable. I actually ran into one with this plugin and issued an update a few hours ago. The problem was on my end and the theme’s end. My plugin should’ve been more specific with some CSS, which was what I corrected. The theme shouldn’t have been styling all classes with the text
spanwithin it (e.g.,span1,span-1,lifespan, etc.). It should have also been more specific. In this case, I was at least able to overwrite the craziness in the theme by being more specific with my CSS.Thank you, I’ve been looking for a solution like that for a while now. I’m gonna give it a try as soon as I’m home from work.
Nice work on the plugin.
I will absulotly give a try as soon as possible
thanks man
Thank you for topic
Great post, I have downloaded and I agree.
But, I tell you what would be a great columns plugin – a dynamic plugin that automatically adjusts text to equally fit across a number of columns e.g.
[columns = x]
This text would automatically be divided across x columns without the user having to manually work out where to split it, now that would be cool!
[/columns]
Just a thought, maybe a plugin exists somewhere already?
Jim
You don’t need a plugin for that. You only need CSS. See this reference.
The Magazine Columns one I referred to does that.
http://wordpress.org/extend/plugins/magazine-columns/
Geez, it works – thanks for that Justin!
Heard first time about Grid columns wordpress plugin. Surely I’ll try this plugin on my blog. Thanks for sharing.
This is an absolute marvelous plugin Justin.
Here’s an example which now enables me to reduce some css http://www.f1ezine.com/historic-f1/legends/.
Very nice and very easy to use plugin – and I can’t see why it shouldn’t work as a one size fits all.
I followed the process since your first beta release. I`m totally with you that functionality needs to go into a plugin instead of the theme’s functions.php
Cheers and thanks for the grid plugin.
Only problem so far: I`m missing css rules for mobile usage.
I normally set columns to float: none; for mobile versions.
What are your ideas about this?
and btw: +1 for one-size-fits-all
I don’t do “mobile” versions of stuff. The plugin should work in any screen size, regardless of the device.
If your theme uses media queries or has a mobile-only version, that’d be something that needs to be handled on a theme-by-theme or site-by-site basis, assuming that you want the design of the columns to change based on some arbitrary values. That’s something that’s custom and is outside the scope of the plugin.
So, it’s up to you.
Wow, looks like a great plugin. Columns can be annoying sometimes >_>
Thanks!
This is an absolute marvelous looks like a great plugin Justin.Very nice and very easy to use plugin thank you….
Really liked the plugin…..
Can I ask you if you were formally educated or self-taught to attain your programming skills? If self-taught, do you recommend any resources for someone “less comfortable” in his programming skills but “highly motivated” to learn? I have found if I really want to understand something and I never give up trying,I eventually get pretty darn good at something. I admire your skills and your sincere desire to help people, btw. Admirable, and it’s why you deserve every single bit of success you can get. Truly, it’s people like you that are why I don’t totally give up online (or on people in general).
I had about 3 or 4 semesters in software engineering at Auburn University before I switched over to English. Those classes gave me a good foundation for programming, but I honestly didn’t learn much in them. I was bored out of my mind. I picked up HTML and CSS on my own. But, it wasn’t until I got involved with the WordPress community that I truly started learning PHP.
The entire WordPress community itself is a resource. Look at themes, plugins, and even the core WordPress code. For me (and I’m sure it’s like this for many others), coding is just a trial-and-error process. It’s also a day-to-day learning process. The best way to learn is to find a theme/plugin you like (themes are easier) and start tinkering around with it. Break something and try to figure out why it broke.
I don’t have many specific resources in mind though. Follow my blog, of course.
Check out some of the folks I follow on Twitter. That’s how I find many cool tutorials and other WordPress-related things.
It’s nice that we live in a world where people still provide things without charging. Wordpress was a godsend and now with all of the plugins, the sky is the limit!
I wa s exploring all the platforms but always coming back for wordpress.3 years using joomla buttt hm wp is better for me personaly.
Very good idea, i will definitely have to update some sites
The only thing i “miss” is a way to easily add the shortcode in the visual editor. For example just a button which puts the shortcode before and after a selected text/image.
Some say it’s a good idea to use a plugin, some say that too many plugins will slow your site and you should use built-in functionality.
I guess you need to find a balance.
Whoever says that many plugins will slow down your site is absolutely wrong. Code running from a theme file is no slower or faster than running from a plugin file, so that avenue of argument is irrelevant. The number of plugins is a trivial factor in such things. The complexity and/or the quality of the code is what matters.
I guess it’s one of those myths then.
Very cool Justin. Thanks for the new plugin. Also from your previous comment, now that I know that adding plugins will not slow down your site, I will now start adding more.
This very good plugin download what I already think it is well worth download it.
To me much good because I have a blog where I have to create columns and this plugin I drop like a glove.
Truly thank you very much for creating this plugin.
Greetings and a very strong hug from Spain!
Nice
i like it very much
You had me at “There’s a few reasons this theme development practice is wrong: It locks users into using their current theme forever.” Cheers!!
I do prefer your plugin to my old columns plugin because yours gives me more granular control. Question: can you do two instances on a single page. Example:
3 columns for the main content
1 column underneath for a signature/bio area
Thanks for the plugin but i want to customize my footer..i want to give all comments and blogs at footer do you know how to change it code???
This is probably the wrong place to ask about your footer. You need to get in touch with your theme author about editing it.
I am listening first time about this plugin. But it will be better for wordpress webmasters.
Thanks for making this plugin; it’s easy, straightforward and not bloated with a bunch of other stuff.
Question/comment though – when I start my page content (in a column) with a heading rather than a normal paragraph, I’m getting an extra empty p tag above the content, which is creating some white space at the top of the page. See http://myrvlinks.com to check out the effect. Thanks!
I definitely enjoying every little bit of it and I have you bookmarked to check out
new stuff you post.”
Thio plugin is great Justin, I did few tests with it.
To be honest, I like shortcodes, but for my customers and in my tutorials for them it is problem to explain to be simple for them. Shortcode here, shortcode there.
Whole visual post text area is full of codes, and visual editor now looks like HTML view editor.
You know, U put shortcode for columns then put in columns other shortcodes…
, and when U need to edit post you need few seconds to focus really hard.
Thanks again Justin, I like your newsletters also, I am waiting to see what is gonna be with admin themes, bye, till next time.
Mark