Adding a Set of Responsive Grid Shortcodes to Your WordPress Site

Today we'll be taking a basic custom grid created with CSS and integrating it into WordPress via shortcodes. I presume all you readers have a basic understanding of CSS so I won't be covering any of that here, I'll also presume that you have a WordPress theme setup already and we'll just add bits in. Enough said, lets get stuck in!

Step 1: Our CSS Grid

Before we start, we'll go ahead and create a css folder and then a file inside called grid.css. Because of the amount of mobile and tablet usage now days we'll go ahead and add the responsive part for our grid too. I've gone ahead and commented this to help make it less confusing for anyone not already familiar with it.


/* ---------------------------------------------------------------------- */
/*  Custom Grid
/* ---------------------------------------------------------------------- */

.container {
	margin:0 auto;
	width:940px;
	position:relative;
}

.container .one-half,
.container .one-third,
.container .one-fourth,
.container .two-thirds,
.container .three-fourths {
	float:left;
	margin-right:20px;
}

.container .one-half.last,
.container .one-third.last,
.container .one-fourth.last,
.container .two-thirds.last,
.container .three-fourths.last {
	margin-right:0;
}

.container .one-half       { width:460px; }
.container .one-third      { width:300px; }
.container .one-fourth     { width:220px; }
.container .two-thirds     { width:620px; }
.container .three-fourths  { width:700px; }

/* ------------------------------------------- */
/*  Responsive Grid - 
/*		1. Tablet
/*		2. Mobile Portrait
/*		3. Mobile Landscape
/* ------------------------------------------- */

@media only screen and (min-width: 768px) and (max-width: 959px) {
	.container                 { width:748px; }
	.container .one-half       { width:364px; }
	.container .one-third      { width:236px; }
	.container .one-fourth     { width:172px; }
	.container .two-thirds     { width:492px; }
	.container .three-fourths  { width:508px; }
}

@media only screen and (max-width: 767px) {
	.container       { width:300px; }
	.container .one-half,
	.container .one-third,
	.container .one-fourth,
	.container .two-thirds,
	.container .three-fourths { width:300px; margin-right:0; }
}

@media only screen and (min-width: 480px) and (max-width: 767px) {
	.container       { width:420px; }
	.container .one-half,
	.container .one-third,
	.container .one-fourth,
	.container .two-thirds,
	.container .three-fourths { width:420px; margin-right:0; }
}

Step 2: Registering Our CSS Within WordPress

Before we can jump into making any shortcodes we'll need to register the CSS file we just created. We'll do this by using wp_register_style and wp_enqueue_style. Be sure to place this within your functions.php or another file which is linked to via the functions.php file. I've also gone ahead and wrapped this within a function but this isn't necessary. Once we've called and registered our CSS file we'll need to hook it using the add_action function.


if ( !function_exists('register_css') ) {

	function register_css() {

		wp_register_style('custom-grid', get_template_directory_uri() . '/css/grid.css');
		wp_enqueue_style('custom-grid');

	}

	add_action('wp_enqueue_scripts', 'register_css');
}

Step 3: Starting to Create Our Shortcodes

To keep everything clean we will create a new file called shortcodes.php to keep our shortcodes separate from any other functions, we'll also need to link to this within our functions.php file.

1
2	// Include shortcodes
3	include 'shortcodes.php';

Step 4: The Shortcode API

The Shortcode API is brilliant, it allows users to create endless things with it. You can pass attributes and values through it. If you'd like to read up more on the Shortcode API, visit the Shortcode API page in the WordPress Codex. To see what shortcodes can do, we will show two paths for this.

Step 5: Shortcode Route 1

Because this is a grid, it will have columns (obviously) but when it gets to the last column we'll need to define it being the last column because of how the custom grid has been coded. For example, if we had a main area of two-thirds and a sidebar of one-third. The sidebar will need defining as the last one in the row so we will add a class of last to it.

Now we'll start creating our shortcode, we'll start off with a basic one-half column shortcode. We start off with creating a function with a name of the shortcode. We'll then pass two arguments of $atts and $content. The way shortcodes work is very simple, if you're creating a shortcode like this all we need to do is return something. All we'll return is a div with the class of one-half along with the content inside it. The last thing to do is to enable the shortcode for use within your WordPress themes. This is done via the add_shortcode function. This function accepts two parameters, the name used to access the shortcode and the function name of the shortcode. We have used 'one_half' for the name to access the shortcode so we can use this within the editor by typing [one_half].


function one_half( $atts, $content = null ) {

	return '<div class="one-half">' . do_shortcode( $content ) . '</div>';

}

add_shortcode('one_half', 'one_half');

Now, if we look back we spoke about defining the last column. For this route we'll simply created another shortcode but instead of [one_half], we'll use [one_half_last] while changing the class name from <div class="one-half"> to <div class="one-half last">.


function one_half_last( $atts, $content = null ) {

	return '<div class="one-half last">' . do_shortcode( $content ) . '</div>';

}

add_shortcode('one_half_last', 'one_half_last');

Step 6: Shortcode Route 2

Okay, if you would prefer to not have to create two shortcodes for each column - one for the normal and one for the last column there is an alternative. Instead of creating two we could pass an attribute through our shortcode, for example [one_half last="yes"]. If no attribute is passed, this will not be used as a 'last' column.

A majority of this will look similar, with the exception of some new stuff. We'll need to extract the shortcode_atts (attributes) first. Next because we defined 'last' as an attribute we'll need to use an if statement to check whether this is a last column. We'll do this by checking if $last equals yes, $position equals last. If not, $position equals nothing. Then we can return the same thing but adding the $position variable for the last column option. Now we can access this shortcode still with [one_half] but adding the 'last' attribute and a value of yes - [one_half last="yes"].


function one_half( $atts, $content = null ) {

	extract( shortcode_atts( array(
			'last'   => ''
		), $atts ) );

	if ( $last == 'yes') {
		$position = 'last';
	}
	else {
		$position = '';
	}

	return '<div class="one-half ' . $position . '">' . do_shortcode( $content ) . '</div>';

}

add_shortcode('one_half', 'one_half');

Conclusion

Well guys, that was my first tutorial here at Wptuts+, I hope you learnt something today! Feel free to use the CSS grid or shortcodes in your projects! Until next time, let me know your thoughts in the comments!