Olimometer for WordPress

March 4th, 2011 by
Olimometer 2.52

Olimometer is my very first WordPress plugin. It’s a fully customisable fundraising thermometer with PayPal integration and custom skin support. You can download the plugin from the WordPress plugin repository, or by visiting the official page on the WordPress web site.

Multiple thermometers can be configured and displayed separately on different pages or posts. Each thermometer supports individual customisation, targets, currencies and progress tracking.

Thermometers can be placed in sidebar widgets with custom headers, footers and CSS classes.

Choose from a number of pre-installed thermometer skins, or create your own and share it.

This plugin requires that the GD libraries are available within PHP.

If you wish the thermometer to have a transparent background then I suggest you still choose a background colour close to the actual background on which the thermometer will appear. This will ensure that the image blends in perfectly.

If you have *any* problems installing or using this plugin, or if it doesn’t quite meet your needs then please let me know. Visit http://www.olivershingler.co.uk/oliblog/olimometer and leave a comment, or via Twitter @OliverShingler


== Installation ==

Either install using the automatic WordPress plugin installation method, or do it manually:

1. Upload all files to to the /wp-content/plugins/olimometer directory (create it if it doesn’t exist) within your WordPress Installation

2. Activate the plugin through the ‘Plugins’ menu in WordPress

3. Configure the settings to your personal requirements

4. Place <?php echo show_olimometer(olimometer_id,olimometer_css);?> in your templates or [olimometer id=olimometer_id css_class=olimometer_css] in a post, where olimometer_id = the Olimometer’s id found on the settings page and olimometer_css = an optional string containing the name of the CSS class to apply to the image.

== Frequently Asked Questions ==

= The thermometer image won’t show (or shows up as a red cross) =

You may not have the GD libraries installed as part of PHP, you’ll need to speak to your web server administrator

= Can I apply my own CSS to the Olimometer image? =

Yes! When you call the Olimometer, simply pass in the name of the CSS class you wish to use as a parameter.

For example, to use a class called align_right, use the following code:

<?php echo show_olimometer(1,'align_right');?> in your templates or [olimometer id=1 css_class="align_right"] in a post replacing 1 with the actual id of your Olimometer.

= I’ve found a bug / have a suggestion =

You can contact me via Twitter @OliverShingler or you can leave a comment on the plugin’s official page http://www.olivershingler.co.uk/oliblog/olimometer. I can’t make any promises but I will do my best.

= How do I change the thermometer image? =

See: How do I create my own skin?

= How do I create my own skin? =

To create your own skins, follow these steps. Please note these steps have changed recently:

* Create a folder within your WordPress structure /wp-content/uploads/olimometer
* Create a folder within your WordPress structure /wp-content/uploads/olimometer/skins
* Copy this file to /wp-content/uploads/olimometer/skins.xml
* Edit the new skins.xml file and remove all but one of the ‘skin’ objects
* Change the skin object’s skin_slug to something unique for your new custom skin
* Create a folder at /wp-content/uploads/olimometer/skins/YOUR_NEW_SKIN_SLUG replacing YOUR_NEW_SKIN_SLUG with the actual skin_slug value in new skins.xml
* Create yourself three new PNG image files, naming them according to that specified in the XML file. One image should contain the bottom of the thermometer (the bulb), the second should be the thermometer’s bar which should be drawn empty of mercury and the third is the top of the thermometer.
* Save the three image files in the skin_slug folder you just created

Skins.xml file contains the skin definitions for all available Olimometer skins. The easiest way to create your own skin is to copy and paste an existing one changing the values as appropriate. You need to create an entire ‘skin’ object within the XML structure. Each sub-object within the skin object is explained below:

* skin_name: The name of the skin as displayed in the drop-down list on the settings page
* skin_slug: The name of a subfolder within the plugin’s skin folder in which you will store the thermometer images associated with this skin. Do not use spaces in the name.
* bulb_file: The name of the PNG image file of the thermometer ‘bulb’ (bottom image)
* bar_file: The name of the PNG image file of the thermometer ‘bar’. This should be empty of mercury.
* top_file: The name of the PNG image file of the top of the thermometer.
* bar_colour: A six character RGB hex value (e.g. white = ffffff) colour of the mercury bar
* bar_pos: The number of pixels from the left (or top if horizontal) of the image at which the mercury bar will be drawn.
* bar_width: The width of the mercury bar in pixels.
* bar_end: The number of pixels from the top (or right if horizontal) of the image where the mercury bar will stop at 100%
* text_pos: The number of pixels from the left of the image at which the text values are placed. Not used for horizontal skins but required so set to 0.
* orientation: Can be either vertical (standard) or horizontal

For best results follow these tips:

* Each image file should be of equal width (or height for horizontal skins).
* The background of each image should be an identical solid colour to enable seamless placement and transparency.
* Use a droplet tool or other suitable colour identifier to identify a suitable bar_colour value using the mercury colour in your bulb_file image.
* Make sure the top_file image includes a copy of the bar_file underneath it, but cleaned of any marks or bars – see the built in skins for an example. This is to avoid a gap being left between the top image and the bar image at certain image heights.
* All built-in skins have a slug-name starting with “oli-” so avoid using this prefix to prevent name conflicts.
* Share your skins with me – contact me using the WordPress forums, tweet me @OliverShingler, or leave a comment on the Olimometer page: http://www.olivershingler.co.uk/oliblog/olimometer


132 thoughts on “Olimometer for WordPress

  1. ASD says:

    Immediately cause an error on activation:
    Constructor method for WP_Widget is deprecated since version 4.3.0!

    Is there a fix for this?

  2. Frank King says:

    Can percentages be used instead of dollars?

  3. Bart says:

    After a crash of my WP environment now the Olimometer does not show up, it is just displaying the name and version.
    I’ve tried removing and reinstalling but no change there …


  4. Adrian Marmy says:

    The primary short code
    [olimometer id=olimometer_id css_class=olimometer_css]
    doesn’t seem to work with my theme ( http://themeforest.net/item/help-ngo-wordpress-theme/5459291 )
    Changing skin doesn’t affect appearance at all it keeps showing default settings. Same to the Current Amount Raised and “Target Amount”: it keeps showing 0 no matter what I type in. Same with colour and all the other settings.
    And before you ask: yes I have typed in the correct id number 😉

    weird tough: the short codes [olimometer_progress id=1]
    [olimometer_target id=1]
    [olimometer_remaining id=1]

    any suggestion? Or am I stuck with a conflict between the theme and your plugin?

    thanks for your help in advance

    1. Adrian Marmy says:

      oh yeah, I forgot: The preview accurately confirms that there’s no changes going on 😉

  5. Michael J Dean says:

    This is a great plugin, but there is one small (really small) cosmetic issue I need help with… I’m using the horizontal orientation and my target amount is $2,900,000. The problem is that the last zero has about 1/4 of it clipped off. Seems like a padding or margin issue, but I can’t figure out how/where to make an adjustment… There doesn’t appear to be a css file, so it’s somewhere in the code. Can you tell me where to look?

  6. Laura Landmark says:

    Hi, I love the plugin… I have chosen to manually update the amounts, but have included a donate button for paypal. The weird thing is that when this donate button is clicked I get Norwegian or other languages showing which is confusing as although I am based in Norway, most of my readers are English. I have checked my paypal account settings and as far as I can see it is all set to English.. any tips on how I can force English to show here?

  7. Kimberly says:

    Are you able to manually enter donations that are received from an offline source?

  8. Diarmuid says:

    It would be great to be able to use custom fields to update the progress of the thermometer. We’re using WooCommerce and if we could enter the custom field in the progress field, it would update automatically. Any idea how this could be done?

  9. Sharon Sutherlin says:

    I really like your plugin.

    I have a couple of recommendations.

    Add a description field that will allow the information to be automatically filled in the Purpose Field when you click on the PayPal button.

    The option to change the size of the PayPal button and to add the Visa Logo.

    Again thank you for an awesome plugin.

  10. Daniel says:

    Great plugin!

    Be great if one could se Global settings to override or select thermometers to override with a Global setting.

    When you have more than 20; changing them all is time-consuming.


  11. kate says:

    Hi! Love your plugin! Just had a weird thing happen though – it reset to zero (It was at about $40K – target is $50K). Any idea why? I’ve asked the PayPal account holder if they cleared the account… but that shouldn’t reset the meter should it? Peeps still want to know the total. Any way to set it back to what it was manually? Thanks!

  12. Janelle says:

    Can the device be adjusted to dollar amounts?

  13. Janelle says:

    Can it be adjusted in dollar amounts?

  14. Marcos says:

    My Olimometer is not connecting to Paypal and therefore is not showing donations on the thermometer. Please help. Thanks!

    PayPal Integration: NOT WORKING

  15. Maria van dyke says:

    All of a sudden I cannot update my progress manually. I do not use pay pal with my olimometer so I usually sign in and change amount manually each week. For some reason it is not updating today. I updated my WP to the current version last week as well as changed my theme to CatchBox. Any thoughts?

  16. Jpl says:

    I am looking for someone to help me sort out a donation paypal with ranking based on user donated value. Are you available for work?

  17. Ed Booth says:

    Thanks. This is a nice plugin. I just noticed one thing though. If you use the shortcode rather than widget to put the olimometer in a page and you want to allow an Editor to manually update the progress, you can’t. You have the progress update in with the settings under the WordPress settings tab. This tab is not available to an Editor. I could use another plugin such as role manager to make it available but I would also have to make everything else under that tab available. I would suggest moving your olimometer to it’s own menu item and allowing it to be set for specific roles.

    Nice job though.

  18. Troy says:

    Using PayPal, how can I have ONLY the donations made on that page (using donate button) counted?

    I have MANY different income sources in PayPal and they don’t all apply to this specific fundraiser.


    1. Oliver says:

      Sorry, that’s not how my plugin works. It displays the total balance of a single PayPal account.

    2. Rick says:


      Will integration with a Classy project resolve this issue?

      …. Rick

    3. Oliver says:

      I’m not sure – Again it tracks the Classy balance so if the Classy project keeps a ‘total donated’ balance as opposed to just an account balance, then yes it would solve the problem.

  19. Jeremy says:

    How can i make the donation button appear on a page ? Shortcode? It is not for me but for a client, can i try it without put my paypal account ?

    1. Oliver says:

      You need a different plugin. My plugin only shows the PayPal button in the widget on a sidebar.

  20. Stephanie says:

    I have this same questions. Is there a way to do this?

    Kevin Taylor says:
    November 11, 2013 at 1:09 am
    I need to have ten separate donation streams on the same site (on ten separate pages). It is okay if they all point to the same PayPal account but we must be able to account for how much came from which stream. Any suggestions?


Leave a Reply

Your email address will not be published. Required fields are marked *