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
Watch
Download
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.
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?
