Example loan calculator made with Caldera Forms

An example of a loan calculator using sliders and two calculation fields. No coding required.

24 Months



This is just an example. Fill in the form and hit submit to receive a copy of how the email result looks.

(Don’t worry, your details are safe, its purely as an example.)

Nesting Shortcodes in WordPress (shortcodes in shortcodes)

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
        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);  

CSS3 + Jquery Ring Progress bar

Animated ring progress bar in CSS3 and JQuery previewSo 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 »

DB-Toolkit Toggle Buttons sample

Been working on V1 of my WordPress plugin DB-Toolkit for a few months now.

Some background, its a WordPress plugin that enables you to build interfaces into database tables, both existing and custom. Its currently in beta version but after working it so long, I decided that V1 required a rebuild using the knowledge I gained. I decided to go custom interface for this rather than adapt it into WordPress UI. Mu thinking on this subject is that you need to retain some elements, mainly navigation style and colors, but a plugin should have its own feel. Sure a plugin needs to be part of WordPress but that doesn’t mean it should look like it.

Anyway, these are a sample of the toggle buttons for setting up a DB-Toolkit interface. the green highlight indicates its checked while the extended button with the “required” text expands on hover to reveal the text.

My Cart Summary widget

I have started toying with the idea of building a unique cart system for WordPress. Most that I have come across have custom post types for products, massive amounts of configurations and requires some coding integration. What I’m planning on doing is making it completely shortcode based. To you create a product by simple defining a shortcode in a post or page. that shortcode then becomes an add to cart button with all the info like sku, price etc embedded.

Theres probably a lot of thinking still, but I think its a good start to something fun. The snap here is of the widget cart summary. It will be a live widget that registers add to cart clicks. and adjusts as needed.

Also i want the design to be set. so its not wrapped in the themes styles. there will be color choices though.

Uploader Widget

I have seen some designs of uploaders before. Having never really thought about why anyone would want one i passed them off as just a useless app. But then when I start working for myself, I realized that there is a need to be able to upload files to a server that will be useable for clients or just simple storage of selected files. Dropbox filled this gap nicely.

But since I have my own server with my own website. it would be nice to be able to send files to my site so that my clients have access to their work. And out came my own uploader. its very simple just a window to drop files in and presto it uploaded to my server. I can then use the files on the site as needed.

Profile Card widget

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

Mini Gallery 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.

Events Badge

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 Badges

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.

Contact Me