Shortcodes in WordPress are extreamly usefull for applying formatting or embeding external content in your pages or posts.
The only problem with them is the parser only does a single pass on the content, so if your shortcodes outputs a shortcode, or you have a shortcode nested within shortcodes, they wont render.

I found on the WordPress Codex that, to enable nesting shortcodes, or shortcodes within shortcodes, I would have to add return do_shortcode($content); This way it will push the result back into the parser.

That’s all very well, but what of shortcodes I didn’t make, or don’t have this added to them? So I made a little plugin that would override the default do_shortcode filter with an evaluator that would check for shortcodes and keep pushing it to do_shortcode until they are all done.

/*
Plugin Name: Shortcode Recursion
Description: Adds shortcode recursion for shortcodes that have shortcodes in shortcodes that has a shortcode in a shortcode in a shortcode with a shortcode in it, all wrapped in a shortcode within a shortcode... and so on.
Author: David Cramer
Version: 1.0
Author URI: http://digilab.co.za/
*/

/* evaluates content for shortcodes and sends it to do_shortcode() if needed and revaluates the result */
function shortcode_inception($content){
    // evaluate content for shortcodes.
    preg_match_all("/".get_shortcode_regex()."/s", $content, $matches);
    // if has shortcode, return revaluated content from  native do_shortcode
    if(isset($matches[2][0]))
        return shortcode_inception(do_shortcode($content));
    // return if nothing is found
    return $content;
}
// remove the native do_shortcode filter
remove_filter('the_content', 'do_shortcode', 11);
// replace the filter with the evaluator function
add_filter('the_content', 'shortcode_inception', 11);  

So I’ve been playing with CSS3. Particularly transitions and clipping. As a result, I made this animated ring progress bar.

There is still a few alignment bugs and haven’t tested on all browsers, but in the big 3 (Chrome, FF and Safari) it looks pretty neat.

All layout gradients and animations are CSS3 transitions. I use jQuery to set the value and to animate the counter in the center.

To build it, I used this tutorial kylejlarson.com/blog/2011/how-to-create-pie-charts-with-css3/ to make a pie chart in CSS3 as this is technically a piechart with two values and a hole in the middle.

There’s a working demo after the jump.

Read the rest of this entry »

While working on my event card, I thought it looked way better as a user profile widget, so heres the same concept as a profile  card WordPress widget

Following not having done any design work for a while. Years actually. I’ve been looking at making a few designed elements for WordPress. These are meant to be embedded onto pages, posts or sidebars and not use the style of the themes but rather how they are designed to be.

I took a now thought at the standard icon based flickr feed and adapted it to this mini gallery widget. The set of images are placed as a slider window and on click you get a lightbox viewer on the selected image. It also has Twitter and Pinterest built right in.

I haven’t done design work for a while, so thought I would start on a design that I can code into working WordPress Widget.

I’ve always wanted to do an events listing system, but Its so complicated having to implement a calendar, then events view and so on. So I came up with this neat idea. Why not just have a widget that displays a single event. No need to manage a calendar, just post a widget with the details for the event. quick and simple.

So here’s a first draft.

Social sharing always looks so generic with the little buttons and the bubble. This is my take on making them look a little more vibrant.

I have recently posted a new tutorial on dbtoolkit.co.za explaining how to build a one to many relationship interface.

It helps with building apps that have multiple entries attached a single entry. like a gallery to a listing or features to an item.

Its a long one so go slowly as you don’t want  to miss any steps.

http://dbtoolkit.co.za/one-to-many-relationship-tutorial-in-db-toolkit/