Resources     Blog  

  1. Home
  2. WordPress Tutorials
  3. How to Easily Show a Progress Meter in WordPress

How to Easily Show a Progress Meter in WordPress

A progress meter can be used to indicate the growth or development of any project. They’re commonly used for fundraisers, but you could use one to show the progress of pretty much anything that can be represented by numbers. For example, chapters written for a book project, days until a product launch (or your baby chicks hatch).

You can also start the meter at 100% and reduce the value every day to serve as a countdown. Use it to show any milestone on a WordPress website. If you can count it, you can visualize it with a progress meter. And to aid us in that visualization, let’s install the Ultimeter plugin.

Ultimeter is free to install, and there is a paid version that unlocks a few features. We’ll cover the basics of setting up a progress meter using the free version.

Installing the Ultimeter Plugin

Log in to your WordPress admin panel.

In the left column navigation, mouse over the “Plugins” link and click the “Add New” link.

mouse over the "Plugins" link and click the "Add New" link

In the “Search plugins…” box, enter “Ultimeter.”

search for the WordPress Ultimeter plugin

Once you have located the plugin, click the “Install Now” button.

click to install the WordPress Ultimeter plugin

Click the “Activate” button.

click to activate the WordPress Ultimeter plugin

Setting Up a Fundraiser Progress Meter With Ultimeter

For our example here, we’ll set up a fundraiser to buy Jim a boat. I don’t know anyone named Jim, but if I did, I imagine he’d appreciate a free boat.

When the plugin installation is complete, you’ll be taken to an intro page for the plugin. Click the “Create Ultimeter” button to get started.

click the "Create Ultimeter" button

If you left that intro page after installation, mouse over the “Ultimeter” link and click the “Add New Ultimeter” link.

click the "Add New Ultimeter" link

The plugin opens on the “Meter Type” tab.

First, give the meter a title (the title entry field is visible on all of the tabs).

enter a title for the meter

The free version of the plugin lets you choose between a horizontal goal progress bar or a vertical thermometer-type meter. For Jim’s boat campaign, I’ll select the horizontal indicator by clicking the image.

click the meter you'd like to use

Now click the “Goal Options” tab.

The “Select a Goal Format” options are “Amount Raised” or “Percentage Raised.”

select the goal format

Choose the language and currency for your meter from the “Select a Language” and “Select a Currency” drop-downs.

language and currency settings

The “Goal Amount” is the amount we’re trying to raise for Jim’s boat. The “Raised Amount” is how much we have so far.

goal amount and raised amount settings

You can change the meter color using the color picker on the “Styling Options” tab.

color picker

We won’t go into the “Milestones” tab since that feature isn’t available in the free version of the plugin.

Click the “Publish” button to save the meter.

click the "Publish" button

Inserting the Meter in a Page or Post

Now that our meter is ready to go, we have to add it to a post or page. You can edit an existing post or page, or create a new one.

I’m going to create a new page for this tutorial. But before we create the page, we have to copy the meter shortcode.

In the left column navigation, mouse over the “Ultimeter” link and click the “All Ultimeters” link.

Click the “Edit” link for your meter.

click the "Edit" link

Click the “Copy Shortcode” button.

click the "Copy Shortcode" button

Now we can create a new page and add the shortcode to the page where we want the meter to appear.

add shortcode to the post or page

Now when we save the page, our meter is there.

meter on page

Updating the Progress Toward Your Goal

Whenever you have an updated value for your meter, enter it in the “Raised Amount” field.

To do this, go back to “All Ultimeters” in the WordPress admin navigation and click the “Edit” link for your meter.

Click the “Goal Options” tab, and in the “Raised Amount” section, enter the new value.

updating the raised amount value

Click the “Update” button for the meter, and the new value will show up in the meter.

updated meter on page

You can also edit the other meter settings, even changing from the horizontal bar to the goal thermometer image.

What Happens if You Uninstall the Ultimeter Plugin

If you uninstall the plugin, pages and posts that used the plugin will be affected:

  • Meters created by the plugin will be deleted.
  • The plugin shortcodes will stop working, so the shortcodes themselves will be displayed anywhere they were used.

Using Visuals May Stimulate Contributions

We learn and process a lot of information visually, so it only stands to reason that a fundraiser progress meter could spark people to contribute. By doing so, they can actually “move the meter” themselves.

If you’re using a meter to show the progress of something other than contributions, the visual element will increase interest and keep people coming back to check for changes. Now that you’ve seen how easy it is to add a progress meter to any WordPress site, hopefully, you’ll find a good reason to use one.

Have you ever tracked the progress of a project on your website? Are there methods you like to use other than what we’ve shown here? Let me know in the comments!

Author: Michael Phillips

Michael Phillips is a web hosting industry veteran, helping people make the most of their web presence since 1995.

Was this article helpful?

Related Articles

Leave a Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.