Blog, PHP, WordPress, WordPress Plugins, WordPress Shortcode

Show a Change.org Progress Bar with WordPress Shortcode

The WordPress shortcode (and PHP function) on this page will render a Change.org petition progress bar onto your WordPress post or page. As the count petition incrementally increases the color of the graph will change until it has reached its goal (100%) - at which time the graph will change to green.

Before the shortcode function will work, you must first register for an API Key here .

The Result

Using the sample petition here , the following will be rendered into your WordPress page or post (we have no affiliation with the campaign whatsoever... and yes, he was sacked).

Petition is now closed.

While the HTML generated in our example is quite minimal, quite a lot of information is returned by the API and stored locally in your own WordPress database (as a time-limited transient). Alter the reference to $num_words to return more text, and alter the actual HTML with the data referenced in the code.

Shortcode used was as follows: [change url="https://www.change.org/p/sack-salim-mehajer-and-auburn-council"].

An example of a campaign without text is as follows:

Petition is now closed.

Display Other Types of Data

To show a count only, use [changedata]. The result: 0. The same shortcode can be used to return other array values via an attribute. For example, [changedata type="percent"] returns NAN%, and [changedata type="created_at"] returns 1st January 1970.

The Shortcode

Copy and paste the WordPress function into your theme's functions.php file or, if you sensibly have one installed, your custom functions plugin. You may optionally download and install our plugin from the bottom of of the page.

If you download the plugin, you'll find an option to update your API key in the Tools menu.

The first function retrieves the change data and stores it as a WordPress transient.

<?php

Show a Change.org Progress Bar with WordPress Shortcode

http://www.beliefmedia.com/change-graph-wordpress

function beliefmedia_change_data($url, $apikey, $cache) {

/* Get transient data */

$transient = 'bmch_' . md5(serialize(func_get_args()));

$response = get_transient($transient);

if ($response !== false) {

return (array) $response;

} else {

/* Query params */

$parameters = array(

'api_key' => $apikey,

'petition_url' => $url

);

/* Query URL */

$query_string = http_build_query($parameters);

$requesturl = 'https://api.change.org/v1/petitions/get_id' . '?' . $query_string;

/* Get data */

$response = @file_get_contents($requesturl);

/* Save response */

if ($response !== false) {

$json_response = json_decode($response, true);

$petition_id = $json_response['petition_id'];

/* Get signature count & other data */

$parameters = array(

'api_key' => $apikey,

'petition_ids' => $petition_id

);

/* Build query for Change data */

$query_string = http_build_query($parameters);

$requesturl = 'https://api.change.org/v1/petitions' . '?' . $query_string;

/* Get data */

$response = @file_get_contents($requesturl);

if ($response !== false) {

$response = json_decode($response, true);

if ($response !== false) {

/* Petition data from array */

$petition = $response['petitions'][0];

/* Save transient */

set_transient($transient, $petition, $cache);

}

/* Returns data array or false */

return ($response !== false) ? (array) $petition : false;

}

One you have the data, you can render it any manner of your choosing. The following will take the cached data and return a progress bar.

<?php

Show a Change.org Progress Bar with WordPress Shortcode

http://www.beliefmedia.com/change-graph-wordpress

function beliefmedia_change_graph($atts) {

$atts = shortcode_atts(array(

'apikey' => 'xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx',

'url' => 'https://api.change.org/p/auburn-city-council-the-hon-paul-toole-mp-local-government-minister-sacksalimmehajer',

'width' => '450',

'height' => '30',

'data' => 1,

'font' => 'font: normal 12px verdana', /* Text in progress bar */

'cache' => 3600 * 12,

'num_words' => '15',

), $atts);

/* Get response array */

$response = beliefmedia_change_data($atts['url'], $atts['apikey'], $atts['cache']);

if ($response['title'] != '') $title = $result['title'];

$percent = ($response['signature_count'] / $response['goal']) * 100;

$target = ($percent >= 100) ? '100' : round($percent, 0);

$url = $response['url'];

/* Letter body */

$letter_body = $response['letter_body'];

$letter_body = wp_strip_all_tags($letter_body);

$letter_body = wp_trim_words($letter_body, $num_words = $atts['num_words'], $more = null);

$count = $petition['signature_count'];

/* Progress bar colors (until target) */

switch ($percent) {

case ($percent <= 50):

$bgcolor = '#CCCCCC';

break;

case ( ($percent > 50) && ($percent <= 80) ):

$bgcolor = '#D12C2C';

break;

case ( ($percent > 80) && ($percent < 100) ):

$bgcolor = '#FF9F40';

break;

case ($percent >= 100):

$bgcolor = '#006A35';

break;

}

/* Build prorgess bar */

if ($atts['data']) $result .= '<div style="max-width: ' . $atts['width'] . 'px; margin: auto; text-align: left;"><a href="' . $url . '" target="_blank" rel="noopener noreferrer"><strong>Sign our petition on Change</a></strong>: ' . $letter_body . '</div>';

$result .= '<div style="border: 1px solid black; max-width: ' . $atts['width'] . 'px; height: ' . $atts['height'] . 'px; background: #cccccc; ' . $atts['font'] . '; position: relative; margin: auto; margin: 10px auto;">

<div style="width: ' . $percent . '%; background: ' . $bgcolor . '; color: #ffffff; text-align: left; height: ' . $atts['height'] . 'px; vertical-align: middle; line-height:' . $atts['height'] . 'px;"><span style="display: inline-block; position: absolute; width: 100%; left: 0; margin-left: 12px;">Currently ' . number_format($response['signature_count']) . ' of ' . number_format($response['goal']) . ' signatures (' . round($percent, 1) . '%)</span></div>

</div>';

return $result;

}

add_shortcode('change', 'beliefmedia_change_graph');

If you require shortcode to work in a sidebar widget, you'll have to enable the functionality with a filter. If you're using our custom functions plugin, you'll have that feature enabled by default.

Shortcode Attributes

The following attributes apply to the first function.

apikey

Before the shortcode function will work, you must first register for an API Key here

. It should be added to the shortcode function.

url

The URL is the URL of the petition page you with to reference. In our case, we've used this page

for our example.

width

The width of the percentage graph.

height

The height of the percentage graph.

data

By default a short description will show (with a link). To disable, use data="0".

font

The full font style you wish to use for text in the percentage graph. Default: font: normal 12px verdana.

cache

Cache determines the amount of time the result will be stored locally in your WordPress database. If it's a slow-moving petition, perhaps consider updating the result only a couple of times a day to minimise the number of requests make to the Change API (cache="3600 * 12).

num_words

The number of words to return in the description text.

Return Data Types

The second function returns specific data from the array returned by the Change API.

<?php

Return specific Change.org data

Show a Change.org Progress Bar with WordPress Shortcode

http://www.beliefmedia.com/change-graph-wordpress

petition_id, title, status, url, overview, targets, letter_body, signature_count, image_url, category, goal, created_at, end_at, creator_name, creator_url, organization_name, organization_url.

function beliefmedia_change_datas($atts) {

$atts = shortcode_atts(array(

'apikey' => 'xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx',

'url' => 'https://api.change.org/p/auburn-city-council-the-hon-paul-toole-mp-local-government-minister-sacksalimmehajer',

'type' => 'signature_count',

'cache' => 3600 * 12,

'num_words' => '15',

'format' => 'jS F Y' /* Time */

), $atts);

/* Get response array */

$response = beliefmedia_change_data($atts['url'], $atts['apikey'], $atts['cache']);

/* Apply number format to the following */

$count_array = array('signature_count', 'goal');

$data_array = array('petition_id', 'title', 'status', 'url', 'overview', 'targets', 'letter_body', 'signature_count', 'image_url', 'category', 'goal', 'created_at', 'end_at', 'creator_name', 'creator_url', 'organization_name', 'organization_url', 'percent');

$date_array = array('created_at', 'end_at');

if ( ($response !== false) && (in_array($atts['type'], $data_array)) ) {

switch ($atts['type']) {

case 'percent':

$percent = round(($response['signature_count'] / $response['goal']) * 100);

return $percent;

break;

case 'letter_body':

/* Letter body */

$letter_body = $response['letter_body'];

$letter_body = wp_strip_all_tags($letter_body);

$letter_body = wp_trim_words($letter_body, $num_words = $atts['num_words'], $more = null);

return $letter_body;

break;

case (in_array($atts['type'], $count_array)):

$key = $atts['type'];

return number_format( (float) $response["$key"], 0);

break;

case (in_array($atts['type'], $date_array)):

$key = $atts['type'];

return date($atts['format'], strtotime($response["$key"]));

break;

default:

$key = $atts['type'];

return $response["$key"];

}

} else {

return '<strong>Invalid</strong>';

}

add_shortcode('changedata', 'beliefmedia_change_datas');

Date Type Attributes

apikey

Before the shortcode function will work, you must first register for an API Key here

. It should be added to the shortcode function.

url

The URL is the URL of the petition page you with to reference. In our case, we've used this page

for our example.

type

The type is any of the following: petition_id, title, status, url, overview, targets, letter_body, signature_count, image_url, category, goal, created_at, end_at, creator_name, creator_url, organization_name, organization_url, or percent. Numbers are returned in a number format, and dates are formatted according to the format attribute below.

cache

num_words

If a letter_body attribute is used, it will be truncate to num_words.

format

If a created_at or end_at attribute is used, it will be formatted with the PHP date()

function. Default is jS F Y.

PHP Function

A PHP function to be used outside of WordPress is included below. Usage requires Simple Cache.

Considerations

While we've used a fairly crude CSS div for rendering the percentage graph, it's often more effective to use Google charts or any of the other open source graphing applications written for PHP applications.
The incremental colors used in the progress bar can be altered by altering the $bgcolor variable. Additionally, the percentage at which the bar changes color can be altered in the same block of code.

Download

Title: Show a Change.org Progress Bar in WordPress (Plugin)
Description: Show a Change.org Progress Bar with WordPress Shortcode or PHP.
Download • Version 0.2, 4.2K, zip, Category: WordPress Plugins (General)
WordPress Shortcodes, (2.2K) PHP Code & Snippets, (2.3K)

Download our 650-page guide on Finance Marketing. We'll show you exactly how we generate Billions in volume for our clients.