ThemeShaper Forums » Thematic

[closed]

Shortcode php for columns

(14 posts)
  • Started 7 years ago by ScottNix
  • Latest reply from helgatheviking
  • This topic is resolved
  1. Originally I stumbled upon this article on how to create columns with shortcodes, which is simple.

    
    [one_half][/one_half]
    [one_half_last][/one_half_last]
    

    The shortcode just inserts a div on one_half and 2 div's on one_half_last(one is a blank clear:both), works great.

    The same site has a tutorial on buttons, loved the tutorial, wasn't crazy about the buttons, so I modified them to be a little more flexible for me. I then moved on to content boxes.

    After playing with the content boxes for a while, I realized the columns and boxes could be merged into one basically making columns obsolete because boxes can handle that too. ;)

    
    [box type="one_half"][/box]
    [box type="one_half_last"][/box]
    

    Now, the problem I am having... stripped down to original working.

    
    function snix_shortcode_boxes( $atts, $content = null ) {
        extract(shortcode_atts(array(
    	'size' => 'full',
    	'color' => '',
    	'type' => '',
            'text' => '',
    	'align'	=> '',
    	'float'	=> '',
        ), $atts));
    
    	$size = ($size) ? ''.$size : '';
    	$color = ($color) ? ' '.$color : '';
    	$type = ($type) ? ' '.$type : '';
    	$text = ($text) ? ' text'.$text : '';
    	$align = ($align) ? ' align'.$align : '';
    	$float = ($float) ? ' float'.$float : '';
    
    	$out = '<div class="' .$size.$color.$type.$align.$float.$text. ' awesome-box"><span class="box-icon"></span><span class="box-content">' .do_shortcode($content). '</span></div>';
    
        return $out;
    }
    add_shortcode('box', 'snix_shortcode_boxes');
    

    Anyone have an idea on what is the best way to to get php to distinguish the type="whateverSize_last", if "_last" is present, then add a class of "last" and also add a clearing div at the bottom?

    This is probably ridiculously simple, I was getting to the point where I was tempted to add another value to the array instead. So this is the back to the basic stripped down working version of the shortcode before I went crazy on it, curious on what you suggest, ideas, etc. :)

    Posted 7 years ago #
  2. Also, scottnix.com/test2/about/shortcode-examples-columns-fullpage/ has examples of mixed columns and boxes, 2 grey boxes on the right are examples of needing a class of "last", and a clear both empty div.

    Posted 7 years ago #
  3. i like this. i have been working on some shortcodes and have seen that article. you could test for the presence of last in the $type variable with strpos:

    http://php.net/manual/en/function.strpos.php

    see their first example. basically if strpos returns a value then you found "last" in $type then you know it is the last one.

    if (strpos($type, "last") === false) {
        $last = " last ";
    } else {
        $last = " ";
    }

    now you should be able to tack $last into your string of concatenated classes. untested so ymmv.

    Posted 7 years ago #
  4. middlesister
    Member

    Yeah this looks really handy. Bookmarked the article for reference. It reminds me a bit of object oriented css (http://oocss.org/grids_docs.html). If thematic had the hooks/filters to enable setting classes on all the main structural divs - like on thematic_open_id_content - then you could go crazy with dynamic layouts.

    Posted 7 years ago #
  5. So glad you understood exactly what I was looking for. So I have it working correctly now, but it may be bloated. I will now start condensing the CSS which I will also post shortly so people can actually use this easily.

    Working with plenty of css styling hooks and even a empty span "box-icon" for absolute positioning on icons/images so hanging stuff outside the box/content is a breeze. ;)

    
    function snix_shortcode_boxes( $atts, $content = null ) {
        extract(shortcode_atts(array(
    	'size'=> 'full', // full width box is default
    	'color' => '',
            'type' => '',
    	'align'	=> '',
    	'float'	=> '',
    	'text'	=> '',
    
        ), $atts));
    
    	$size = ($size) ? ''.$size : '';
    	$color = ($color) ? ' '.$color : '';
    	$type = ($type) ? ' '.$type : '';
    	$text = ($text) ? ' text'.$text : '';
    	$align = ($align) ? ' align'.$align : '';
    	$float = ($float) ? ' float'.$float : '';
    
    	if (strpos($size, "last") === false) {
    	$out = '<div class="' .$size.$color.$type.$align.$float.$text. ' awesome-box"><span class="box-icon"></span><span class="box-content">' .do_shortcode($content). '</span></div>';
    	return $out;
    }
    	else {
    	$last = ($last) ? ' '.$last : '';
    	$clearing = '<div class="' .$size.$color.$type.$align.$float.$text.$last. ' awesome-box"><span class="box-icon"></span><span class="box-content">' .do_shortcode($content). '</span></div><div class="clearboth"></div>';
    	return $clearing;
    }
    }
    add_shortcode('box', 'snix_shortcode_boxes');
    

    Shortcodes:

    
    [box] Content [/box] : displays full width (styling with class awesome-box)
    [box size="one_half"] Content [/box] : displays half width
    [box size="one_half_last"] Content [/box] : displays half width, clears previous.
    [box size="one_half" color="grey"] Content [/box] : displays half width, color gray.
    [box type="alert"] Content [/box] : displays full width w/ alert class for further styling.
    etc...
    

    Originally I mixed up type="" with size="" in my question, but they were the same structure so it worked out. I intended for type="" to actually be just another hook intended for styling the boxes further. Thanks for your help Kathy, if this is bloated or not the right way, let me know too. ;x

    Either way, I think this blows the column example away. Only thing I worry about is getting a little too crazy with shortcodes for every element. I ran across a guy who was using them for H1's, it was painful to see and made my brain hurt.

    Posted 7 years ago #
  6. And the CSS, I left a few css classes as templates, but this should get anyone started.

    /*
    	box sizing - size=""
    	default is full width 100%
    ----------------------------------------------------*/
    .one_half, .one_half_last { width:48%; }
    .one_third, .one_third_last { width:30.66%; }
    .two_third, .two_third_last { width:65.33%; }
    .one_fourth, .one_fourth_last { width:22%; }
    .three_fourth, .three_fourth_last { width:74%; }
    .one_fifth, .one_fifth_last { width:16.8%; }
    .two_fifth, .two_fifth_last { width:37.6%; }
    .three_fifth, .three_fifth_last { width:58.4%; }
    .four_fifth, .four_fifth_last { width:67.2%; }
    .one_sixth, .one_sixth_last { width:13.33%; }
    .five_sixth, .five_sixth_last { 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; }
    .one_half_last, .one_third_last, .two_third_last, .three_fourth_last, .one_fourth_last, .one_fifth_last, .two_fifth_last, .three_fifth_last, .four_fifth_last, .one_sixth_last, .five_sixth_last { position: relative; margin-right:0 !important; float: left; clear: right; }
    .full.awesome-box { clear: both; }
    .clearboth { clear: both; display: block; font-size: 0; height: 0; line-height: 0; width:100%; }
    /*
    	awesome-box defaults
    ----------------------------------------------------*/
    .awesome-box { border: inset 1px solid #fff; margin-bottom: 20px; background: #f4f4f4; position: relative; -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5); -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5); border-radius: 5px; }
    .awesome-box span.box-content { padding: 10px; display: block; }
    /*
    	box type - type=""
    ----------------------------------------------------*/
    .alert.awesome-box span.box-icon { position: absolute; bottom: -5px; left: -10px; height: 46px; width: 48px; background: url(functions/images/icon.png) no-repeat 0 -46px; }
    .alert.awesome-box { padding-left: 40px; }
    
    /*
    	box colors - color=""
    ----------------------------------------------------*/
    .blue.awesome-box { background: #2daebf; }
    .green.awesome-box { background: #2fc950; }
    .grey.awesome-box { background: #a7a8a7; }
    .red.awesome-box { background: #e33100; }
    .magenta.awesome-box { background: #a9014b; }
    .orange.awesome-box { background: #ff5c00; }
    .yellow.awesome-box { background: #ffb515; }
    /*
    	box float - float=""
    ----------------------------------------------------*/
    .floatright.awesome-box { float: right; margin-left: 20px; margin-right: 0; clear: none; }
    .floatleft.awesome-box { float: left; margin-right: 20px; clear: none; }
    /*
    	box text - text=""
    ----------------------------------------------------*/
    .textright.awesome-box { text-align: right; }
    .textleft.awesome-box { text-align: left; }

    It is a pain to think about this stuff, there are so many ways to set it up. I probably will set it up as a download shortly, this is more for the people that like to tinker. ;)

    Posted 7 years ago #
  7. Oh, and a light example page on my sandbox site of boxes with column sizes, http://scottnix.com/test/shortcodes/columns/

    Any suggestions, ideas, or corrections would be appreciated.

    Posted 7 years ago #
  8. Well.... I would suggest giving me another day for the download setup for a cleaner visual, especially since I forgot you will need to add a little more to your functions.php which is referenced in the original article http://tutorials.mysitemyway.com/adding-column-layout-shortcodes-to-a-wordpress-theme/

    Fair warning, looks intimidating, but it will control all the shortcodes, so you will only need it once for all shortcodes.

    /********************************************************
    
     Admin - Applies to All Shortcodes
    
    *********************************************************/
    
    // enable shortcodes in sidebar
    
    add_filter('widget_text', 'do_shortcode');
    
    // disable wptop and wptexture
    
    function snix_shortcode_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', 'snix_shortcode_formatter', 99);
    add_filter('widget_text', 'snix_shortcode_formatter', 99);
    
    //Long posts should require a higher limit, see http://core.trac.wordpress.org/ticket/8553
    @ini_set('pcre.backtrack_limit', 500000);
    Posted 7 years ago #
  9. also, i am pretty sure i read somewhere that it is actually a bad idea to remove the wpautop and wptexturize filters and just replace them w/ direct calls to the functions, b/c that could interfere w/ plugins that attempt to interact w/ those filters.

    Posted 7 years ago #
  10. interesting ideas :)

    but recently read a post by Justin Tadlock and it brings up a valid point regarding shortcodes.
    Especially in the case of releasing themes...
    http://justintadlock.com/archives/2011/05/02/dealing-with-shortcode-madness

    Posted 7 years ago #
  11. very good point. was thinking it would be cool to see a plugin offer all those shortcodes and tinyMCE buttons. you know, in my spare time.

    Posted 7 years ago #
  12. what spare time is that, the 8th day you requested?
    i suppose a plugin may help the situation

    Posted 7 years ago #
  13. Yeah, I actually saw that article posted by Justin Tadlock and he is 100% correct. I actually ran across his article when I went searching around after I saw someone using a shortcode for h1, h2, etc... This threw up red flags in my head and I couldn't even believe someone would think it was a good idea.

    He is correct that for a lot of tags, shortcodes should not be used to replace standard html elements. For these boxes, I think it is fine. My reasoning is that these are mostly stylistic elements and at the worst if you needed them pulled out it wouldn't be hard to create a script to strip out the shortcodes. When you did strip them out, you wouldn't really be breaking anything (well structurally) it would only be breaking the styling.

    Also for a blockquote, it would be a bad idea to use a similar box setup since I would be messing with actual markup (blockquote and cite), I wouldn't do a shortcode for that either. I had pondered this one for a bit...

    The "alert" box class I used may kind of fall into a grey area because of the term I used, but really I just picked that as a example to show that any class can be thrown in there for style.

    However I want people to criticize and contribute to these to make them stronger, so set me straight if I am not thinking correctly. ;)

    Posted 7 years ago #
  14. sooo... i'm sold on not using shortcodes for html elements, but does anyone know how to have a tinyMCE button add html classes?

    Posted 7 years ago #

RSS feed for this topic

Topic Closed

This topic has been closed to new replies.