Donation Thermometer Plugin

The Donation Thermometer plugin is a simple and effective way to display progress towards a fundraising target on your blog (or progress towards a set number of "behaviour rewards" etc).


Install the plugin (you need to be a Network Admin to do this) by going to Network Admin > Plugins > Add New and in the search box type "Donation Thermometer". The first result should be the correct plugin (plugin author is Harry Patton), or download the plugin from here: Install the plugin, and then Network Activate to allow all blogs to access the plugin.


This plugin needs to be configured separately on each blog that you wish to use it on. It cannot be configured globally for every blog.

On your blog dashboard, go to Settings > Thermometer. The most important settings are the first 2. The Target Value (i.e. the amount you are hoping to raise) and the Raised Value (how much you have raised so far). Change these values to those pertinent to your project. You can change colours as you like and if you are using the thermometer to display progress towards a points target you can change the Currency Value to "Points" etc.

As you make progress towards the target you will need to return to the settings page and update the Raised Value as often as required.

Displaying the Thermometer

The thermometer can be displayed in a sidebar widget, in a blog post, or on a page. To display in a widget, go to Appearance > Widgets and drag a new text widget to the appropriate sidebar. Give the widget a title if required, e.g. "School Fundraiser" and in the widget body simply type [thermometer] and save. This will then display the thermometer as configured in the plugin above. The thermometer can be displayed on a blog post or blog page by using the shortcode above.

In addition to displaying the thermometer, the values associated with your fundraising can be displayed in text within a blogpost or blog page by using specific shortcodes:

[therm_t]  =  Target Value

[therm_r]  =  Raised Value

[therm_%]  = Percentage of target value raised.

For example:

So far we have raised £[therm_r] towards our £[therm_t] target! That's[therm_%] of the total!

The values in the text and on the thermometer will reflect any updates you make to the settings as described above.

Displaying Multiple Thermometers on the same blog

There might be occasion to display multiple thermometers in a blog. e.g. housepoints  or competitive fundraising between classes or year groups etc. This can be done by modifying the shortcode in the widget. When you add target and raised value settings to the widget shortcode, this overrides any corresponding settings in the plugin's settings page.

In the example below are two shortcodes, one for a blue thermometer, one for a green thermometer displaying housepoints (displayed as hsepts). The fill parameter defines the colour. In this case the colour code for blue is #0000ff and for green, #008000

Blue House

[thermometer target=500 raised=375 fill=#0000FF currency=hsepts trailing=true]

Green House

[thermometer target=500 raised=300 fill=#008000 currency=hsepts trailing=true]

Note: trailing=true moves the currency to the end of the value, so in Green House's case it displays as 300hsepts, not hsepts300. further note: I abbreviated house points to hsepts because there is insufficient space above the thermometer for a numerical target and the word "Housepoints". If no target is set i could have currency=housepoints instead.

Displaying Multiple Groups on the same thermometer

Instead of displaying separate thermometers you may wish to display multiple groups on the same thermometer. In order to do this you need to set a "Color Ramp" in the plugin settings. In the Color Ramp box you will see a default sequence of 4 hex codes. A hex code is a 6 digit code preceded by the # symbol. This code is used by web designers to tell the browser what colour to display. For example, the hex code for blue is #0000FF (as used in the example above). So, if you had 4 groups in your class, Blue, Green, Red and Yellow, the settings in the Color Ramp box would look like: 

#0000ff; #008000; #ff0000; #ffff00

Note: a semi-colon is separating the hex codes.

You are not limited to 4 hex codes. For a list of hex codes see:

Once you have set the color ramp in the settings you can now use it to display how much each group has raised by separating each group in the "raised" parameter.

For example:

[thermometer raised=100;123;47;250]

Important note: the groups will always display in the order set in the color ramp, i.e. Blue, Green, Red and Yellow in this case. So, Blue Group have raised £100, Green group have raised £123 etc.

You can update the raised parameter for each group as often as you need.

Adding a Legend

Finally, in order to be able to interpret the different colours on your thermometer you can add a legend to the shortcode based on your color ramp settings.

For example:

[thermometer raised=100;123;47;250 legend='Blue Group; Green Group; Red Group; Yellow Group']

Note: a 'surrounds the group list' and each group is separated by a semi-colon. The group order is exactly the same as the corresponding order in the color ramp setting.

Underneath the thermometer you will see a list of group names plus the amount they have raised (again, another good use for this would be accumulative totals of house points)


This page has examples of all the shortcodes listed above in use so you can see what the finished thermometer will look like:

Have more questions? Submit a request


Please sign in to leave a comment.
Powered by Zendesk