justintadlock/grid-columns

For the love of all that is Holy, stop putting 22 column shortcodes in a theme for what's possible with one. A plugin.

Grid Columns

A [column] shortcode for creating columnized content.

This plugin has one function and one function only — to make columns. You use it by inputting content between [column] and [/column] within your post content editor (or anywhere shortcodes are allowed).

Grid Columns was created to fix the problem in which many theme developers were adding 20+ column shortcodes to their themes for something that should be extremely simple and done with only a single shortcode.

Why the plugin was created

Many theme developers add several column shortcodes to their themes (note: this isn't allowed on WordPress.org). Essentially, the theme developers are doing a few things wrong:

• They lock users into using 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.
• The code is just poorly developed altogether (most likely because they all copied from the same, bad source).

This plugin allows you to switch between any theme (no lock-in to your current theme). It was also developed with WordPress standards and usability in mind.

Uage

You can find more detailed instructions in the plugin's docs/readme.html file.

Everything is based on a grid. By default, this grid is "4". So, you can set up four columns like so:

[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]

You'll notice that each "span" is equal to the number of columns in the grid. So, if the span is "1", it's equal to one column. If the span is "2", it's equal to two columns. You can only have as many spans/columns as the grid allows. Therefore, grid="4" means you can only have four columns.

Changelog

Version 0.2.0

• Added CSS style rules to override some issues with WordPress' wpautop(), which sometimes adds empty <p> and extra <br /> tags.
• Added support for right-to-left languages.
• No more anonymous objects created by the plugin class.
• No need for & when adding an action/filter.

Version 0.1.1

• Add more specific prefixes in the CSS.
• Add some better margin handling in case other CSS code is overwriting things willy-nilly.
• Add the gc_column_content filter hook and use it to apply formatting.

Version 0.1.0

• Plugin released. Everything is new!

Professional Support

If you need professional plugin support from me, the plugin author, you can access the support forums at Theme Hybrid, which is a professional WordPress help/support site where I handle support for all my plugins and themes for a community of 40,000+ users (and growing).

Copyright and License

This project is licensed under the GNU GPL, version 2 or later.

2012 – 2013 © Justin Tadlock.

grid-columns's Issues

Remove `<br>` between columns?

I prefer to use text-align: justify+display: inline-block based columns, so I have some style overrides in place. However, if you have spacing between the column declarations, Wordpress inserts a <br /> tag inbetween.

In the content editor:

[column grid="5" span="5"]One Whole[/column]
[column grid="5" span="4"]4/5[/column]
[column grid="5" span="1"]1/5[/column]

Thanks to Wordpress's autoparagraph, becomes:

<p><div class="column-grid column-grid-5"><div class="column column-span-5 column-push-0 column-first column-last"><p>One Whole</p>
</div></div><br />
<div class="column-grid column-grid-5"><div class="column column-span-4 column-push-0 column-first"><p>4/5</p>
</div><br />
<div class="column column-span-1 column-push-0 column-last"><p>1/5</p>
</div></div></p>

Any conceivable way to remove those <br /> tags after a column declaration?

update compatible up to on repo

@justintadlock any chance of getting a quick meta bump on the repo for this plugin?

Responsive defaults?

Hi,
what about adding this to the columns.css:

@media screen and (max-width: 800px) { .column-grid .column { float:none; margin-left:0; margin-right:0; width:auto; } }

What it does, it eliminates all columns below a certain Browser width.

Of course, you could argue, everybody can do his responsive stuff by his own.

But this one could be very convenient if you have no idea about it, and if you do now ... well, you're going to investigate the .css anyway :-)

Implement grid integrity checks for post editor screen?

Today I ran into a situation where a large content page with a total of 23 column shortcodes was unbalanaced, throwing off the whole page. I'm guessing sometimes the effects can be less obvious, i.e. something is broken but the browser hides it and without validation you wouldn't even know.

So I'm wondering would it make sense to have the plugin scan the content on post edit screen and queue a warning when it finds the column calculations don't add up in any way?

Using has_shortcode

Have you thought only loading css when shortcode is in use?

https://codex.wordpress.org/Function_Reference/has_shortcode

http://halgatewood.com/wordpress-3-6-using-has_shortcode-in-wp_head/

That might be handy.

Support for Twitter Bootstrap gryd system

Hi,

I just forked your great plugin and added Twitter Bootstrap classes to row and columns.

https://github.com/giofilo/grid-columns [no longer available]

I'm developing a wp theme based on Bootstrap, and I want to use your plugin too, that's why I made this version of your plugin.
I don't know if you are interested in a pull request of these changes.
Altough you are not, can you please give a look on what I've done with your code? I'm not an expert developer and I would know if I made mistakes.

Thank you very much!

Nested columns support?

From what I can see the plugin currently chokes on nesting or am I missing something?

Nested columns?

Hi,

Thanks for great plugin.

I've just noticed a problem with nested columns. When we make nested columns, the do_shortcode function will be called, and then the column shortcode runs again.

The problem is we're using singleton pattern, which means the object variables is_first_column, is_last_column, etc. keep their values between calls. While it's cool non-nested columns, it would be incorrect in nested-columns situation (these variables should be reset at that time).

Hope you can fix it, because it's quite important and needed.

Thanks.

Check if there's content within wrapper

The column shortcode uses the last span value to determine whether the next column should be a first, middle or last column, and that's very smart.

But a problem would arise if someone for example uses it like this:

[column span=8]Content[/content]

Some content that doesn't belong here

[column span=4]content[/column][column span=8]Content[/column]

wpautop() fix in 0.2

I've been testing the plugin today, and like it a lot, especially how it checks for first/last column in a row, great idea.

I know you are aware of the issues with wpautop() overdoing things, as I've seen you've added :empty css selector in 0.2, but the problem is that IE8 and lower does not recognize that one, plus ofcourse the empty "p's" are still there, messing with my mild OCD.

Why I find it important to address:

• user selects the content inside the shortcode that he/she wishes to alter: http://img152.imageshack.us/img152/1033/48212c2cb8a44b91aca9c1c.png
• user selects formatting, hoping to alter just the selected piece: http://img267.imageshack.us/img267/7207/9a4509715c8543efa012ced.png
• wordpress formats whole line: http://img715.imageshack.us/img715/3222/ea8d1c10eca544078e106dd.png
• user is confused, so he/she breaks the shortcode into lines: http://i.imgur.com/r0hZDpS.png
• result - wpautop() kicks in, and throws in empty p tags all over the place

Question:

• would adding sniplet like this:

if ( '</p>' == substr( $content, 0, 4 )
and '<p>' == substr( $content, strlen( $content ) - 3 ) )
$content = substr( $content, 4, strlen( $content ) - 7 );

inside the do_shortcode function, be advised? It solves the problem, but is it the right thing to do?

cheers!

default/fallback grid not in allowed_grids

In case you filter gc_allowed_grids does not contain 4 the code still falls back to 4 anyway if the selected grid is not allowed, for example when using 4

I see two ways to solve this:

1. Do not directly use $this->allowed_grids but instead use $defaults['grid']
2. Add a new filter gc_fallback_grid or alike.

I can create a PR, I just wanted to ask beforehand what you're preferred approach would be on this.