Below, you’ll find a detailed guide on how to add the Donation Thermometer Shortcodes to your WordPress website, including their parameters, examples, and PHP function code. Additionally, we’ll assist you with common issues that might cause the Donation Thermometer Plugin shortcodes not to show or not to work correctly.
Before starting, here is an overview of the Donation Thermometer Plugin and the shortcodes it provides:
"Donation Thermometer is a highly customizable WordPress plugin that visually tracks and displays fundraising progress. It encourages donations by showing how close you are to your goal."
- [thermometer]
- [therm_raised]
- [therm_t]
- [therm_%]
Donation Thermometer [thermometer] Shortcode
The Donation Thermometer shortcode is a dynamic tool to track and display fundraising progress. It generates a customizable thermometer graphic based on the attributes provided. The attributes control the thermometer’s appearance, such as width, height, alignment, target amount, raised amount, and currency. It also allows the customization of color, orientation, decimal separator, and more. The shortcode fetches defaults from the plugin’s settings if no attribute is provided. The graphic can be easily embedded into posts or pages, providing a visual representation of fundraising progress.
Shortcode: [thermometer]
Parameters
Here is a list of all possible thermometer shortcode parameters and attributes:
width
– Determines the width of the thermometer graphic.height
– Sets the height of the thermometer graphic.align
– Specifies the alignment of the thermometer on the page.target
– Specifies the goal amount for the fundraising.raised
– Represents the amount raised so far.alt
– Sets the alternate text for the thermometer image.currency
– Defines the currency symbol for the amounts.sep
– Sets the thousand separator for the amounts.decsep
– Determines the decimal separator for the amounts.decimals
– Specifies the number of decimals places for the amounts.trailing
– Defines if the currency symbol should be placed after the amount.fill
– Sets the fill color for the thermometer graphic.filltype
– Defines the fill type for the thermometer (solid or gradient).fill2
– Sets the secondary color for the gradient fill.colorramp
– Specifies a color ramp for the thermometer fill.legend
– Sets the legend text for the thermometer graphic.ticks
– Determines the alignment of the ticks on the thermometer.targetlabels
– Turns on/off labels for the target amounts.percentcolor
– Sets the color for the percentage amounts.targetcolor
– Defines the color for the target amounts.raisedcolor
– Sets the color for the raised amounts.subtargetcolor
– Defines the color for the sub-target amounts.shadow
– Turns on/off the shadow effect for the thermometer.orientation
– Defines the orientation of the thermometer (vertical or horizontal).showpercent
– Turns on/off the display of percentage raised.showtarget
– Turns on/off the display of target amount.showraised
– Turns on/off the display of raised amount.swapvalues
– Swaps the places of target and raised values.
Examples and Usage
Basic example – A simple usage of the thermometer shortcode to display a donation thermometer on your site. This example uses the default values for all parameters.
[thermometer]
Advanced examples
Using the shortcode to display a donation thermometer with specific width, height, and target. The thermometer will be displayed with a width of 300px, a height of 500px, and a target donation amount of $1000.
[thermometer width="300" height="500" target="1000"]
Using the shortcode to display a donation thermometer with specific currency, decimal separator, and thousands separator. The thermometer will be displayed with the currency symbol set to Euros, the decimal separator set to comma, and the thousands separator set to period.
[thermometer currency="€" decsep="," sep="."]
Using the shortcode to display a donation thermometer with a specific fill color and gradient. The thermometer will be displayed with a fill color of blue and a gradient color of green.
[thermometer fill="#0000FF" filltype="gradient" fill2="#008000"]
Using the shortcode to display a donation thermometer with specific alignment and orientation. The thermometer will be displayed in a horizontal orientation and will be aligned to the center of the page.
[thermometer orientation="horizontal" align="center"]
PHP Function Code
In case you have difficulties debugging what causing issues with [thermometer]
shortcode, check below the related PHP functions code.
Shortcode line:
add_shortcode( 'thermometer','thermometer_graphic');
Shortcode PHP function:
function thermometer_graphic($atts){
$atts = (shortcode_atts(
array(
'width' => '',
'height' => '',
'align' => '',
'target' => '',
'raised' => '',
'alt' => '',
'currency' => '',
'sep' => '',
'decsep' => '',
'decimals' => '',
'trailing' =>'',
'fill' => '',
'filltype' => '',
'fill2' => '',
'colorramp' => '',
'legend' => '',
'ticks' => '',
'targetlabels' => '',
'percentcolor' => '',
'targetcolor' => '',
'raisedcolor' => '',
'subtargetcolor' => '',
'shadow' => '',
'orientation' => '',
'showpercent' => '',
'showtarget' => '',
'showraised' => '',
'swapvalues' => ''
), $atts));
global $thermDefaults;
$options = wp_parse_args( get_option('thermometer_options',$thermDefaults), $thermDefaults);
$thermProperties = array();
//thermometer alignment (vertical/horizontal)
if(!empty($atts['orientation'])){
$thermProperties['orientation'] = $atts['orientation'];
}
else{
$thermProperties['orientation'] = $options['therm_orientation'];
}
//width
//width value
if($atts['width'] != '' && $atts['height'] != ''){
return '<p style="color:red;">Use only width OR height parameter values.</p>';
}
if (!empty($atts['width'])){
$thermProperties['width'] = $atts['width'];
$thermProperties['height'] = '';
}
else{
$thermProperties['width'] = ($thermProperties['orientation'] == 'portrait') ? "200" : "501.5";
$thermProperties['height'] = '';
}
//height
if (!empty($atts['height'])){
$thermProperties['height'] = $atts['height'];
$thermProperties['width'] = '';
}
elseif(empty($atts['height']) && !empty($atts['width'])){
$thermProperties['width'] = $atts['width'];
$thermProperties['height'] = '';
}
else{
$thermProperties['height'] = ($thermProperties['orientation'] == 'portrait') ? "533" : "148";
$thermProperties['width'] = '';
}
//currency value to use
if (empty($atts['currency'])){
$thermProperties['currency'] = $options['currency'];
}
elseif(strtolower($atts['currency']) == 'null'){ //get user to enter null for no value
$thermProperties['currency'] = '';
}
else{
$thermProperties['currency'] = $atts['currency']; //set currency to default or shortcode value
}
//decimal separator
if(!empty($atts['decsep'])){
$thermProperties['decsep'] = $atts['decsep'];
}
else{
$thermProperties['decsep'] = ($options['decsep'] == ', (comma)') ? ',' : '.';
}
$sep = $thermProperties['decsep'];
//target value
if ($atts['target'] == '' && !empty($options['target_string'])){
$thermProperties['target'] = $options['target_string'];
}
elseif($atts['target'] == 'off'){
$thermProperties['target'] = $options['target_string'].';'.strval($atts['target']);
}
else{
$thermProperties['target'] = preg_replace('/[^A-Za-z0-9\-\\'.$sep.'\;]/', '',strval($atts['target']));
}
//sub target labels
if (!empty($atts['targetlabels'])){
$thermProperties['targetlabels'] = ($atts['targetlabels'] == 'off') ? 0 : 1;
}
else{
$thermProperties['targetlabels'] = ($options['targetlabels'] == 'true') ? 1 : 0;
}
//thermometer shadow
if (!empty($atts['shadow'])){
$thermProperties['shadow'] = (strtolower($atts['shadow']) == 'false') ? 0 : 1;
}
else{
$thermProperties['shadow'] = ($options['therm_shadow'] == 'true') ? 1 : 0;
}
//raised value
if ($atts['raised'] == '' && !empty($options['raised_string'])){
$thermProperties['raised'] = $options['raised_string'];
}
else{
// if shortcode present
if (!is_numeric(str_replace(",", ".", $atts['raised'])) && (strpos($atts['raised'], ';') === false) && !is_numeric(str_replace(',','',$atts['raised']))) {
$shortcode = "[".strval($atts['raised'])."]";
$atts['raised'] = do_shortcode( $shortcode);
}
$thermProperties['raised'] = preg_replace('/[^A-Za-z0-9\-\\'.$sep.'\;]/', '',strval($atts['raised']));
}
//align position
if (strtolower($atts['align']) == 'center' || strtolower($atts['align']) == 'centre'){
$thermProperties['align'] = 'display:block; margin-left:auto; margin-right:auto;';
}
elseif (strtolower($atts['align']) == 'left'){
$thermProperties['align'] = 'display:block; float:left;';
}
elseif (!empty($atts['align'])){
$thermProperties['align'] = 'display:block; float:'.strtolower($atts['align']).';';
}
else{
$thermProperties['align'] = 'display:block; float:left;';
}
//thousands separator
if(!empty($atts['sep'])){
$thermProperties['sep'] = $atts['sep'];
}
else{
if($options['thousands'] == ' (space)'){
$thermProperties['sep'] = ' ';
}
elseif($options['thousands'] == '(none)'){
$thermProperties['sep'] = '';
}
else{
$thermProperties['sep'] = substr($options['thousands'],0,1);
}
}
//decimal places
if(is_numeric($atts['decimals'])){
$thermProperties['decimals'] = $atts['decimals'];
}
else{
$thermProperties['decimals'] = $options['decimals'];
}
// fill colour and gradient
if(empty($atts['fill'])){
$thermProperties['fill'] = $options['colour_picker1'];
}
else{
$thermProperties['fill'] = $atts['fill'];
}
// create a gradient
if(!empty($atts['filltype'])){
if ($atts['filltype'] == 'gradient'){
if(empty($atts['fill2'])){
$thermProperties['fill2'] = $options['colour_picker6'];
}
else{
$thermProperties['fill2'] = $atts['fill2'];
}
}
else{
$thermProperties['fill2'] = $thermProperties['fill'];
}
}
else{
if ($options['therm_filltype'] == 'gradient'){
if(empty($atts['fill2'])){
$thermProperties['fill2'] = $options['colour_picker6'];
}
else{
$thermProperties['fill2'] = $atts['fill2'];
}
}
else{
$thermProperties['fill2'] = $thermProperties['fill'];
}
}
// currency before or after number
if(strtolower($atts['trailing']) == 'true'){
$thermProperties['trailing'] = 'true';
}
elseif(strtolower($atts['trailing']) == 'false'){
$thermProperties['trailing'] = 'false';
}
elseif(isset($options['trailing']) && ($options['trailing'] == "on" or $options['trailing'] == "true")){
$thermProperties['trailing'] = 'true';
}
else{
$thermProperties['trailing'] = 'false';
}
//title text
if (!empty($atts['alt'])){
$thermProperties['title'] = $atts['alt'];
}
else{
$thermProperties['title'] = '';
}
//legend
if(!empty($atts['legend'])){
$thermProperties['legend'] = $atts['legend'];
}
else{
$thermProperties['legend'] = '';
}
//tick alignment
if(!empty($atts['ticks'])){
$thermProperties['ticks'] = $atts['ticks'];
}
else{
$thermProperties['ticks'] = $options['tick_align'];
}
// color ramp
if(!empty($atts['colorramp'])){
$thermProperties['colorList'] = $atts['colorramp'];
}
else{
$thermProperties['colorList'] = $options['color_ramp'];
}
// show percentage
if(!empty($atts['showpercent'])){
$thermProperties['showPercent'] = ($atts['showpercent'] == 0 or strtolower($atts['showpercent']) == 'false') ? 0 : 1;
}
else{
$thermProperties['showPercent'] = ($options['chkbox1'] == 1 or $options['chkbox1'] == 'true') ? 1 : 0;
}
// show target value
if(!empty($atts['showtarget'])){
$thermProperties['showTarget'] = ($atts['showtarget'] == 0 or strtolower($atts['showtarget']) == 'false') ? 0 : 1;
}
else{
$thermProperties['showTarget'] = ($options['chkbox2'] == 1 or $options['chkbox2'] == 'true') ? 1 : 0;
}
// show raised value
if(!empty($atts['showraised'])){
$thermProperties['showRaised'] = ($atts['showraised'] == 0 or strtolower($atts['showraised']) == 'false') ? 0 : 1;
}
else{
$thermProperties['showRaised'] = ($options['chkbox3'] == 1 or $options['chkbox3'] == 'true') ? 1 : 0;
}
// swap raised/target values
if(!empty($atts['swapvalues'])){
$thermProperties['swapValues'] = ($atts['swapvalues'] == 1 or strtolower($atts['swapvalues']) == 'true') ? 1 : 0;
}
else{
$thermProperties['swapValues'] = ($options['swapValues'] == 1 or $options['swapValues'] == 'true') ? 1 : 0;
}
$thermProperties['percentageColor'] = (empty($atts['percentcolor'])) ? $options['colour_picker2'] : $atts['percentcolor'];
$thermProperties['targetColor'] = (empty($atts['targetcolor'])) ? $options['colour_picker3'] : $atts['targetcolor'];
$thermProperties['raisedColor'] = (empty($atts['raisedcolor'])) ? $options['colour_picker4'] : $atts['raisedcolor'];
$thermProperties['subtargetColor'] = (empty($atts['subtargetcolor'])) ? $options['colour_picker5'] : $atts['subtargetcolor'];
//print_r($thermProperties);
//print_r($atts);
// create a custom thermometer from shortcode parameters
return thermhtml($thermProperties);
}
Code file location:
donation-thermometer/donation-thermometer/includes/therm_shortcode.php
Donation Thermometer [therm_raised] Shortcode
The Donation Thermometer shortcode ‘therm_raised’ is designed to calculate and display the total amount raised in donations. It parses the ‘raised_string’ option, sums the values, and formats the output according to the settings. If no value is found, it returns a missing value message.
Shortcode: [therm_raised]
Examples and Usage
Basic example – Displaying the total amount raised using the ‘therm_raised’ shortcode. This shortcode will show the total amount raised as per the settings configured in the donation thermometer plugin options.
[therm_r /]
Advanced examples
Displaying the total amount raised with a custom thousands separator. This shortcode will show the total amount raised, with a custom thousands separator configured through the ‘thousands’ attribute.
[therm_r thousands="," /]
Displaying the total amount raised with a custom decimal separator and decimal places. This shortcode will show the total amount raised, with a custom decimal separator and decimal places configured through the ‘decsep’ and ‘decimals’ attributes respectively.
[therm_r decsep="." decimals="2" /]
Please note that the shortcode will only work if the donation thermometer plugin is correctly installed and the settings are properly configured. If the raised value is not available, it will return a message stating ‘Value missing on settings page’.
PHP Function Code
In case you have difficulties debugging what causing issues with [therm_raised]
shortcode, check below the related PHP functions code.
Shortcode line:
add_shortcode( 'therm_r','therm_raised');
Shortcode PHP function:
function therm_raised(){
global $thermDefaults;
$options = wp_parse_args( get_option('thermometer_options',$thermDefaults), $thermDefaults);
$raisedA = explode(';',$options['raised_string']);
if($options['thousands'] == ' (space)'){
$sep = ' ';
}
elseif($options['thousands'] == '(none)'){
$sep = '';
}
else{
$sep = substr($options['thousands'],0,1);
}
$decsep = ($options['decsep'] == ', (comma)') ? ',' : '.';
$decimals = $options['decimals'];
if (end($raisedA) == 'off'){
array_splice($raisedA,-1);
}
if ($decsep == ','){
foreach($raisedA as &$item) {
$item = floatval(str_replace(',', '.', str_replace('.', '', strval($item))));
}
}
else{
foreach($raisedA as &$item) {
$item = floatval(str_replace(',', '', strval($item)));
}
}
$raised = array_sum($raisedA);
if ($raised != ''){
return number_format($raised, $decimals,$decsep,$sep);
}
else{
return '<b>['.__('Value missing on settings page','donation-thermometer').']</b>';
}
}
Code file location:
donation-thermometer/donation-thermometer/includes/therm_shortcode.php
Donation Thermometer [therm_t] Shortcode
The Donation Thermometer shortcode is a tool that displays the targeted donation amount on your website. This shortcode fetches the target donation value set in the plugin settings. If the target value is missing, it will display a warning message. The output is formatted based on the configuration settings, such as thousands and decimal separators.
Shortcode: [therm_t]
Examples and Usage
Basic example – Displaying the target amount of a donation thermometer using the ‘therm_t’ shortcode.
[therm_t /]
Advanced examples
Displaying the target amount with a specific number of decimals. Here, the ‘decimals’ parameter is used to define the number of decimal places. For instance, if you want to display the target amount with 2 decimal places, you would use the shortcode as follows:
[therm_t decimals=2 /]
Displaying the target amount with a specific thousands separator. The ‘thousands’ parameter is used to define the separator. For example, to use a space as the thousands separator, you would use the shortcode as follows:
[therm_t thousands=' ' /]
Displaying the target amount with a specific decimal separator. The ‘decsep’ parameter is used to define the separator. For instance, to use a comma as the decimal separator, you would use the shortcode as follows:
[therm_t decsep=', ' /]
Please note that the actual shortcode usage might vary depending on the plugin settings and the parameters available.
PHP Function Code
In case you have difficulties debugging what causing issues with [therm_t]
shortcode, check below the related PHP functions code.
Shortcode line:
add_shortcode( 'therm_t','therm_target');
Shortcode PHP function:
function therm_target(){
global $thermDefaults;
$options = wp_parse_args( get_option('thermometer_options',$thermDefaults), $thermDefaults);
$target = $options['target_string'];
if($options['thousands'] == ' (space)'){
$sep = ' ';
}
elseif($options['thousands'] == '(none)'){
$sep = '';
}
else{
$sep = substr($options['thousands'],0,1);
}
$decsep = ($options['decsep'] == ', (comma)') ? ',' : '.';
$decimals = $options['decimals'];
if ($target != ''){
$targetA = explode(';',$target);
if (end($targetA) == 'off'){
array_splice($targetA,-1);
}
if ($decsep == ','){
$target = floatval(str_replace(',', '.', str_replace('.', '', strval(end($targetA)))));
}
else{
$target = floatval(str_replace(',', '', strval(end($targetA))));
}
#$target = end($targetA);
return number_format($target, $decimals,$decsep,$sep);
}
else{
return '<b>['.__('Value missing on settings page','donation-thermometer').']</b>';
}
}
Code file location:
donation-thermometer/donation-thermometer/includes/therm_shortcode.php
Donation Thermometer [therm_%] Shortcode
The Donation Thermometer shortcode is a tool that calculates the percentage of donations received towards a target. It uses the ‘therm_percent’ function to divide the amount raised by the target, creating a ratio. This ratio is then multiplied by 100 and formatted to a decimal place defined by the user, providing a clear visual representation of the fundraising progress. If no target is set, it returns ‘unknown %’.
Shortcode: [therm_%]
Examples and Usage
Basic example – The basic usage of the shortcode will display the percentage of the donation goal that has been achieved.
[therm_%]
PHP Function Code
In case you have difficulties debugging what causing issues with [therm_%]
shortcode, check below the related PHP functions code.
Shortcode line:
add_shortcode( 'therm_%','therm_percent');
Shortcode PHP function:
function therm_percent(){
global $thermDefaults;
$target = therm_target();
$raised = therm_raised();
$options = wp_parse_args( get_option('thermometer_options',$thermDefaults), $thermDefaults);
$decimals = $options['decimals'];
$div = (float) str_replace(',', '', $raised) / (float) str_replace(',', '', $target);
return ($target > 0) ? number_format(($div * 100),$decimals).'%' : __('unknown %','donation-thermometer');
}
Code file location:
donation-thermometer/donation-thermometer/includes/therm_shortcode.php
Conclusion
Now that you’ve learned how to embed the Donation Thermometer Plugin shortcodes, understood the parameters, and seen code examples, it’s easy to use and debug any issue that might cause it to ‘not work’. If you still have difficulties with it, don’t hesitate to leave a comment below.
Leave a Reply