Tutorials ETC

Shortcodes have become almost a requirement in Premium Wordpress Themes and their use is on the rise.

This is the first tutorial of many in which we will explain the implementation of the shortcodes we used in our Premium Wordpress Themes inFocus and Awake.

Since there is already a wealth of documentation on the intricacies of how shortcodes work, we will be focusing primarily on their implementation. If you’d like to learn more about shortcodes in general, we recommend the following resources:

1. Wordpress Codex – Shortcode API
2. Mastering WordPress Shortcodes

The following shortcodes allow the end user to create percentage-based infinitely nestable column layouts.
Preview the end result: Awake Column Shortcodes

You can download a plugin version of this tutorial at the bottom of this post.

Step #1 – The PHP Code

Add the following php code to your theme’s functions.php file. If your theme doesn’t have a functions.php file create one and paste in the following:

function webtreats_one_third( $atts, $content = null ) {
   return '<div class="one_third">' . do_shortcode($content) . '</div>';
}
add_shortcode('one_third', 'webtreats_one_third');

function webtreats_one_third_last( $atts, $content = null ) {
   return '<div class="one_third last">' . do_shortcode($content) . '</div><div class="clearboth"></div>';
}
add_shortcode('one_third_last', 'webtreats_one_third_last');

function webtreats_two_third( $atts, $content = null ) {
   return '<div class="two_third">' . do_shortcode($content) . '</div>';
}
add_shortcode('two_third', 'webtreats_two_third');

function webtreats_two_third_last( $atts, $content = null ) {
   return '<div class="two_third last">' . do_shortcode($content) . '</div><div class="clearboth"></div>';
}
add_shortcode('two_third_last', 'webtreats_two_third_last');

function webtreats_one_half( $atts, $content = null ) {
   return '<div class="one_half">' . do_shortcode($content) . '</div>';
}
add_shortcode('one_half', 'webtreats_one_half');

function webtreats_one_half_last( $atts, $content = null ) {
   return '<div class="one_half last">' . do_shortcode($content) . '</div><div class="clearboth"></div>';
}
add_shortcode('one_half_last', 'webtreats_one_half_last');

function webtreats_one_fourth( $atts, $content = null ) {
   return '<div class="one_fourth">' . do_shortcode($content) . '</div>';
}
add_shortcode('one_fourth', 'webtreats_one_fourth');

function webtreats_one_fourth_last( $atts, $content = null ) {
   return '<div class="one_fourth last">' . do_shortcode($content) . '</div><div class="clearboth"></div>';
}
add_shortcode('one_fourth_last', 'webtreats_one_fourth_last');

function webtreats_three_fourth( $atts, $content = null ) {
   return '<div class="three_fourth">' . do_shortcode($content) . '</div>';
}
add_shortcode('three_fourth', 'webtreats_three_fourth');

function webtreats_three_fourth_last( $atts, $content = null ) {
   return '<div class="three_fourth last">' . do_shortcode($content) . '</div><div class="clearboth"></div>';
}
add_shortcode('three_fourth_last', 'webtreats_three_fourth_last');

function webtreats_one_fifth( $atts, $content = null ) {
   return '<div class="one_fifth">' . do_shortcode($content) . '</div>';
}
add_shortcode('one_fifth', 'webtreats_one_fifth');

function webtreats_one_fifth_last( $atts, $content = null ) {
   return '<div class="one_fifth last">' . do_shortcode($content) . '</div><div class="clearboth"></div>';
}
add_shortcode('one_fifth_last', 'webtreats_one_fifth_last');

function webtreats_two_fifth( $atts, $content = null ) {
   return '<div class="two_fifth">' . do_shortcode($content) . '</div>';
}
add_shortcode('two_fifth', 'webtreats_two_fifth');

function webtreats_two_fifth_last( $atts, $content = null ) {
   return '<div class="two_fifth last">' . do_shortcode($content) . '</div><div class="clearboth"></div>';
}
add_shortcode('two_fifth_last', 'webtreats_two_fifth_last');

function webtreats_three_fifth( $atts, $content = null ) {
   return '<div class="three_fifth">' . do_shortcode($content) . '</div>';
}
add_shortcode('three_fifth', 'webtreats_three_fifth');

function webtreats_three_fifth_last( $atts, $content = null ) {
   return '<div class="three_fifth last">' . do_shortcode($content) . '</div><div class="clearboth"></div>';
}
add_shortcode('three_fifth_last', 'webtreats_three_fifth_last');

function webtreats_four_fifth( $atts, $content = null ) {
   return '<div class="four_fifth">' . do_shortcode($content) . '</div>';
}
add_shortcode('four_fifth', 'webtreats_four_fifth');

function webtreats_four_fifth_last( $atts, $content = null ) {
   return '<div class="four_fifth last">' . do_shortcode($content) . '</div><div class="clearboth"></div>';
}
add_shortcode('four_fifth_last', 'webtreats_four_fifth_last');

function webtreats_one_sixth( $atts, $content = null ) {
   return '<div class="one_sixth">' . do_shortcode($content) . '</div>';
}
add_shortcode('one_sixth', 'webtreats_one_sixth');

function webtreats_one_sixth_last( $atts, $content = null ) {
   return '<div class="one_sixth last">' . do_shortcode($content) . '</div><div class="clearboth"></div>';
}
add_shortcode('one_sixth_last', 'webtreats_one_sixth_last');

function webtreats_five_sixth( $atts, $content = null ) {
   return '<div class="five_sixth">' . do_shortcode($content) . '</div>';
}
add_shortcode('five_sixth', 'webtreats_five_sixth');

function webtreats_five_sixth_last( $atts, $content = null ) {
   return '<div class="five_sixth last">' . do_shortcode($content) . '</div><div class="clearboth"></div>';
}
add_shortcode('five_sixth_last', 'webtreats_five_sixth_last');

Step #2 – The CSS Code

Fluid Columns

When you’re building a site for yourself or a client, you have the luxury of using fixed column layouts like we did in our first theme inFocus.

But, in premium theme development, users will often want to change the width of the site, the width of the sidebar, nest the column shortcodes and use them within other structures that throw the dimensions off.

For this reason, we implemented fluid columns in our second theme Awake. You can see in the examples below how much more flexible they are.

http://themes.mysitemyway.com/awake/shortcodes/column-shortcodes/
http://themes.mysitemyway.com/awake/features/layouts/column-layouts/

The CSS

Insert the following CSS in your themes style.css file.

/* ------- Fluid Columns ------- */
.one_half{ width:48%; }
.one_third{ width:30.66%; }
.two_third{ width:65.33%; }
.one_fourth{ width:22%; }
.three_fourth{ width:74%; }
.one_fifth{ width:16.8%; }
.two_fifth{ width:37.6%; }
.three_fifth{ width:58.4%; }
.four_fifth{ width:67.2%; }
.one_sixth{ width:13.33%; }
.five_sixth{ width:82.67%; }
.one_half,.one_third,.two_third,.three_fourth,.one_fourth,.one_fifth,.two_fifth,.three_fifth,.four_fifth,.one_sixth,.five_sixth{ position:relative; margin-right:4%; float:left; }
.last{ margin-right:0 !important; clear:right; }
.clearboth {clear:both;display:block;font-size:0;height:0;line-height:0;width:100%;}

Step #3 – Disabling Wordpress wpautop and wptexturize filters.

By default Wordpress’s wpautop and wptexturize filters inject p tags and br tags around the outputted column content which is a problem if you need your site to validate.

The following function created by TheBinaryPenguin for his wp-raw plugin takes care of that by disabling WordPress’s auto-formating filters so that the column shortcode is parsed without being run through them, then reapplying the content filters after the column shortcode has been parsed. The result is that all of the column shortcodes will validate.

function webtreats_formatter($content) {
	$new_content = '';

	/* Matches the contents and the open and closing tags */
	$pattern_full = '{(\[raw\].*?\[/raw\])}is';

	/* Matches just the contents */
	$pattern_contents = '{\[raw\](.*?)\[/raw\]}is';

	/* Divide content into pieces */
	$pieces = preg_split($pattern_full, $content, -1, PREG_SPLIT_DELIM_CAPTURE);

	/* Loop over pieces */
	foreach ($pieces as $piece) {
		/* Look for presence of the shortcode */
		if (preg_match($pattern_contents, $piece, $matches)) {

			/* Append to content (no formatting) */
			$new_content .= $matches[1];
		} else {

			/* Format and append to content */
			$new_content .= wptexturize(wpautop($piece));
		}
	}

	return $new_content;
}

// Remove the 2 main auto-formatters
remove_filter('the_content', 'wpautop');
remove_filter('the_content', 'wptexturize');

// Before displaying for viewing, apply this function
add_filter('the_content', 'webtreats_formatter', 99);
add_filter('widget_text', 'webtreats_formatter', 99);

Step #4 – Fixing the backtrack_limit Bug

The following takes care of the mysterious disappearing content bug that happens when too many shortcodes are used on a page.

//Long posts should require a higher limit, see http://core.trac.wordpress.org/ticket/8553
@ini_set('pcre.backtrack_limit', 500000);

Step #5 – Converting it all to a Plugin (Optional)

If you don’t want to touch your theme files, you can alternately create a plugin following the steps below.
Or download the finished plugin here: Download the Column Shortcode Plugin Here

1. Create the following folder structure:

2. Add the following to the top of webtreats-column-shortcodes/column-shortcodes.php so that Wordpress recognizes it as a plugin.

/*
Plugin Name: Fluid Column Layout Shortcodes
Plugin URI: http://tutorials.mysitemyway.com
Description: Adds percentage based infinitely nest-able column shortcodes.
Version: 1.0
Author: Webtreats
Author URI: http://mysitemyway.com
License: GPL2
*/

3. Beneath the plugin info, add all the php code from steps #1,#3,#4.
4. Also add the following additional function to load the necessary CSS styles:

function webtreats_column_stylesheet() {
    $my_style_url = WP_PLUGIN_URL . '/webtreats-column-shortcodes/styles.css';
    $my_style_file = WP_PLUGIN_DIR . '/webtreats-column-shortcodes/styles.css';

    if ( file_exists($my_style_file) ) {
        wp_register_style('column-styles', $my_style_url);
        wp_enqueue_style('column-styles');
    }
}
add_action('wp_print_styles', 'webtreats_column_stylesheet');

5. Add all the css code from step #2 to webtreats-column-shortcodes/styles.css

Step #6 – How to use the shortcodes

You can see the column shortcodes in use on our Awake Wordpress Theme demo here:

http://themes.mysitemyway.com/awake/shortcodes/column-shortcodes/

For pre-formatted starter content in different column configurations just click “Get the Code” beneath each column set and copy/paste the code into your WYSIWYG editor.

We’ve provided a few snippets below as well.

Two column layout:

[one_half]
	Your content goes here.....
[/one_half]
[one_half_last]
	Your content goes here.....
[/one_half_last]

Three column layout:

[one_third]
	Your content goes here.....
[/one_third]
[one_third]
	Your content goes here.....
[/one_third]
[one_third_last]
	Your content goes here.....
[/one_third_last]

Four column layout:

[one_fourth]
	Your content goes here.....
[/one_fourth]
[one_fourth]
	Your content goes here.....
[/one_fourth]
[one_fourth]
	Your content goes here.....
[/one_fourth]
[one_fourth_last]
	Your content goes here.....
[/one_fourth_last]

Five column layout:

[one_fifth]
	Your content goes here.....
[/one_fifth]
[one_fifth]
	Your content goes here.....
[/one_fifth]
[one_fifth]
	Your content goes here.....
[/one_fifth]
[one_fifth]
	Your content goes here.....
[/one_fifth]
[one_fifth_last]
	Your content goes here.....
[/one_fifth_last]

Six column layout:

[one_sixth]
	Your content goes here.....
[/one_sixth]
[one_sixth]
	Your content goes here.....
[/one_sixth]
[one_sixth]
	Your content goes here.....
[/one_sixth]
[one_sixth]
	Your content goes here.....
[/one_sixth]
[one_sixth]
	Your content goes here.....
[/one_sixth]
[one_sixth_last]
	Your content goes here.....
[/one_sixth_last]

  Download – Fluid Column Layout Shortcodes Plugin

Related Tutorials

Premium

Tags: shortcodes, Wordpress