wordpress – how to write responsive posts-part 2

30. Dezember 2014 - wordpress

Responsive posts/ YAML framework with WP shortcodes

In this follow-up to the first part we will write a plugin to create responsive posts. The plugin provides the following shortcodes:

‚cap‘ for caption right to or under an image
‚img_f‘ for caption under image, both floating left
‚2c_l‘ for column right
‚2c_r‘ for column left

In diesem Beitrag wollen wir ein Plugin schreiben, um responsive Posts zu erzeugen . Es unterstützt folgende shortcodes:

‚cap‘ Bildtext rechts oder darunter
‚img_f‘ Bildtext unter einem Bild, beide floaten links
‚2c_l‘ rechte Spalte
‚2c_r‘ linke Spalte

The code:

Plugin Name: nf_post_styler
Plugin URI: http://www.it-in-a-box.com/
Description: some simple styles for posts
Author: Norbert Felgendreher
Version: 1.0
Author URI: http://www.it-in-a-box.com/ 

if ( !function_exists('add_action') ) {
	header('Status: 403 Forbidden');
	header('HTTP/1.1 403 Forbidden');
if ( !class_exists('simple_styles_for_posts') ) { 
	class simple_styles_for_posts {

	function __construct() {
		add_shortcode('cap', array(&$this, 'caption_right_or_below'));
		add_shortcode('img_f', array(&$this, 'image_floats_in_text'));
		add_shortcode('2c_l', array(&$this, 'two_columns_left'));
		add_shortcode('2c_r', array(&$this, 'two_columns_right'));

	function caption_right_or_below( $atts, $content = null) {
		return '<div class="ym-contain-dt">' . $content . '</div>';
	function image_floats_in_text( $atts, $content = null) {
		return '<div class="float-left">' . $content . '</div>';
	function two_columns_left( $atts, $content = null) {
		return '<section class="ym-grid linearize-level-2">'.
		'<article class="ym-g50 ym-gl"><div class="ym-gbox">' . $content . '</div></article>';
	function two_columns_right( $atts, $content = null) {
		return '<article class="ym-g50 ym-gr">'.
			'<div class="ym-gbox">'. $content . '</div></article></section>';
	} // End Class
	$simple_styles_for_posts = new simple_styles_for_posts();

Please use shortcodes whithout whitespace inside square brackets

Caption left or under image:
[ cap ]
your image.jpg
your caption
[ /cap ]
Image with caption, both floating left:
[ img_f ]
your image.jpg
your caption
[ /img_f ]
lorem ipsum ...
two columns:
[ 2c_l ]
column left content
[ /2c_l ]
[ 2c_r ]
column right content
[ /2c_r ]

Both, 2c_l and 2c_r shortcodes must be present, otherwise a markup error will happen.

Download of plugin here