Tackling

Did your client just come up with a brilliant idea to display some fancy widget on his WordPress site? Something like a wall building itself up from bricks representing donors maybe? Do not despair - writing WordPress plugins isn't hard at all. Let me guide you through this.

Learn

Keep reading for an explanation on how to go on about it.

Keep reading

The button will take you to a step by step guide through the process.
Continue

Watch

Take a look at what this is all about and see the feature in action.

Go there

The button will take you to a project were we implemented this feature.
WMSMSM

Download

Get the files from GitHub immediately and for free.

From GitHub

The button will take you to GitHub were the files you need are available.
GitHub

First thing first: data source! A realtime procedure would be perfect. The donor donates and shows up on the "Wall of Gratitude" immediately. This would require an interface to the clients donation transactions. This interface would need to deliver perfectly processed data in realtime. Well, let's upload a CSV file once a week instead, shall we? One row would look like this:

city | name | amount

We want our plugin to process the uploaded file and build a brickwall, each brick representing a donation. The donors name and city should be shown via popover. Aaand responsive please.

The client has an Avada child theme active, so using their popover would tie neatly into the theme. A backup option would be nice if the client ever decides to go without Avada in the future.

The best option would be utilizing the WordPress shortcode-API. The shortcode needs to know where the CSV-file is located, and if Avada popovers should be used. Let's throw in the option to configure the popover title and the currency sign in there for good measure.

[wog avada-popover="1" popover-title="Thanks to" currency="€"]/2016/04/wog.csv[/wog]

The shortcode (wog) will activate the plugin PHP file, which will locate the CSV-file, process it, and display the bricks according to the rows. PHP, running on the server, has no idea about client-browser-container-dimensions. This is why we want the wall assembled and styled in the client browser with JavaScript and CSS. So PHP will build hidden span-elements that will be arranged and unveiled with a delay in the clients browser with JavaScript to achieve a nice build-up-animation.

If our shortcode is configured to use Avada popovers (avada-popover="1"), we will wrap our span-elements with the Avada shortcode ([popover]), and run the whole thing through WordPress' do_shortcode() function. If not, we will bind our own popovers to the spans later in the client browser.

We don't want to encumber every page with the necessary CSS and JS files for our plugin. We only want the client browser load (wp_enqueue) them if the shortcode is found in a post.

if( is_a( $post, 'WP_Post' ) && has_shortcode( $post->post_content, 'wog') ) {
//wp_enqueue_...
}

And there we have our solid concept. The rest boils down to some google-fu and writing a few lines of code. Not that scary now, is it?

Leave a Comment

Your email address will not be published. Required fields are marked *