and like us on FB

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

Sign our petition on Change: #SackSalimMehajer Auburn Deputy Mayor Salim Mehajer has treated the community, law & council with great…

Currently 12,607 of 15,000 signatures (84%)

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:

Currently 173,436 of 200,000 signatures (86.7%)

Display Other Types of Data

To show a count only, use [changedata]. The result: 12,607. The same shortcode can be used to return other array values via an attribute. For example, [changedata type="percent"] returns 84%, and [changedata type="created_at"] returns 16th August 2015.

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.

Show a Change.org Progress Bar with WordPress Shortcode

If plugin is installed, update the API key from Tools menu.

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

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.

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.

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

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). Try and keep it the same as the first function to avoid caching two responses of the same data.

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 with WordPress Shortcode
Description: Show a Change.org Progress Bar with WordPress Shortcode or PHP.
Download: Shortcode (V0.2) | WP Plugin (V0.2) | PHP Code (V0.2)

Shortt URL for this post: http://shor.tt/36Kv