You are reading the DebugMe blog. DebugMe supports the design, development and testing phase of web sites and web applications by enabling visual feedback. Take a screenshot and add a comment within seconds! Register now to have free access to the tool for life.

In web design, CSS grids are very common nowadays. It’s no denying the fact that they bring great intuitiveness to the table and give more power to the end users. With a CSS grid layout, one can easily create arbitrary layouts in WordPress and it gives much-needed freedom. The WordPress Plugin Repository has several column plugins to get the most of this functionality. Here are some of the shortcode grids to know how this really works.

Shortcodes 101

In general, shortcodes are literally easy to create. All we have to do is register a function which delivers the desired content with add_shortcode() function. For example:

function my_code_output( $atts, $content ) { return ‘<pre><code>’ . $content . ‘</code></pre>’; } add_shortcode(‘code’, ‘my_code_output’);

When the above written code is positioned on the functions.php file or plugin of the theme, it will allow users to add the code to their content:

[code] $array = ( ‘Thud’, ‘Night Watch’, ‘Jingo’ ); [/code]

The shortcode replaces the content with what is specified. In that case, we are going to cover some of the HTML tags over it. Here’s how to find out what’s in the range:

<pre><code>$array = ( ‘Thud’, ‘Night Watch’, ‘Jingo’ );</code></pre>

You can also modify the behavior by adding parameters to the shortcode. In that case, you may specify the type of code so the section can be formatted as well:

function my_code_output( $atts, $content ) { $atts = shortcode_atts( array( ‘type’ => ‘php’, ), $atts ); return ‘<pre class=”language-‘ . $atts[‘type’] . ‘”><code>’ . $content . ‘</code></pre>’; } add_shortcode(‘code’, ‘my_code_output’);

In this example, the shortcode function gets the shortcode attributes in first argument and content in second. The shortcode_atts() merges the default and given values to create some amazing stuff. One can specify the language that can be added as class to the outer tag.

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 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.

[code type=’javascript’] var array = [ ‘Thud’, ‘Night Watch’, ‘Jingo’ ]; [/code] <pre><code>var array = [ ‘Thud’, ‘Night Watch’, ‘Jingo’ ];</code></pre>

CSS for Base Grid

Writing CSS for grid is not actually an issue. Here, we are creating shortcode only. In addition, we are going to use the grid of Foundation framework. Here’s the HTML of the grid:

<div class=’row’> <div class=’small-12 medium-6 large-3 columns’> Column 1 </div> <div class=’small-12 medium-6 large-3 columns’> Column 2 </div> <div class=’small-12 medium-6 large-3 columns’> Column 3 </div> <div class=’small-12 medium-6 large-3 columns’> Column 4 </div> </div>

Keep in mind that each row is covered in a div with a ‘row’ class. It consists of four main classes – small-n, large-n, medium-n and columns. Column class is defined on all columns, when others rely on what you are going to do.

Since foundation is based on mobile, all you have to use small-n. All the sizes are defined in the small class if other size classes are not given. In case of medium size, small screens will use size mentioned by the medium, small class and it will be using medium class. For Foundation grid, the number of column, by default, is 12.

You are reading the DebugMe blog. We are developing a collaboration tool for web designers and developers

When it comes to create a grid, the main problem is that you have to know its start and end point. You have to make two shortcodes. We have to create columns as shortcode and a dedicated row to serve and cover all of them. Technically speaking, we can see the columns with the help of some advanced expressions.

Shortcode Plan

When it comes to deal with shortcodes, it is always wise to write the final text to use in editor as if the shortcode were in place. This way, you can add the attributes and code the functionality. For example :

[row] [column medium=”6″ large=”3″] Column 1 [/column] [column medium=”6″ large=”3″] Column 2 [/column] [column medium=”6″ large=”3″] Column 3 [/column] [column medium=”6″ large=”3″] Column 4 [/column] [/row]

Row Shortcode

The row shortcode is quite easy. It will just wrap the content.

function my_row( $atts, $content ) { return ‘<div class=”row”>’ . do_shortcode( $content ) . ‘</div>’; } add_shortcode( ‘row’, ‘my_row’ );

The do_shortcode() is the only thing which is not familiar. We have to add it to ensure that shortcodes are converted in the content. If it is not added in this function, the shortcodes won’t be running through the function.

Column Shortcode

It is a little more complex, especially because of the fallback structure.

function my_column( $atts, $content ) { $atts = shortcode_atts( array( ‘small’ => 12, ‘medium’ => null, ‘large’ => null ), $atts ); $atts[‘medium’] = ( $atts[‘medium’] == null ) ? $atts[‘small’] : $atts[‘medium’]; $atts[‘large’] = ( $atts[‘large’] == null ) ? $atts[‘medium’] : $atts[‘large’]; extract( $atts ); $sizes = ‘small-‘ . $small . ‘ medium-‘ . $medium . ‘ large-‘ . $large; return ‘<div class=”columns ‘ . $sizes . ‘”>’ . do_shortcode( $content ) . ‘</div>’; } add_shortcode( ‘column’, ‘my_column’);

The Line Break

This way, you have to put end and start column tags on same range.

[row] [column medium=”6″ large=”3″] Column 1 [/column][column medium=”6″ large=”3″] Column 2 [/column][column medium=”6″ large=”3″] Column 3 [/column][column medium=”6″ large=”3″] Column 4 [/column] [/row]

Using regular expression is the only way to go. Usually, it is scowl over by the developers but it ends justify in some cases. Before writing some regular expressions, you have to know two important things. If a line break is placed between shortcodes, WordPress places the line break. WordPress places opening para tag at the beginning and closing tag at the end.

function my_row( $atts, $content ) { $content = preg_replace( “/\[\/column\](\<br \/\>|\<\/p\>.?\<p\>).?\[column/s”, ‘[/column][column’, $content ); return ‘<div class=”row”>’ . do_shortcode( $content ) . ‘</div>’; } add_shortcode( ‘row’, ‘my_row’ );

Verdict

Shortcodes are very easy to create and they provide some neat functionality. They can be definitely improved with added support for offset columns, centered columns and block grids.

Author Bio:

Jason is a renowned web development professional who works with WordSuccor Ltd., a leading WordPress theme customization company with a global reach. He is a passionate blogger who loves to write and share everything about WordPress and new web design technologies.

The makers of DebugMe hope that you like this post and would love it if you follow us on Twitter. We are tweeting about web design, UI/UX and development related topics multiple times a day. DebugMe is an issue tracking, project management and screenshot tool for every website project. Get visual feedback right away and solve front-end problems faster. Try it now for free.