1. Home
  2. AccessAlly
  3. Progress Tracking & Checklists
  4. How to Show Course Progress in WordPress (Piecharts and Progress Bars)

How to Show Course Progress in WordPress (Piecharts and Progress Bars)

Use the AccessAlly Pro plugin to show course progress in WordPress for your course or membership users.

This progress can be displayed as a progress bar, progress circle, or a simple numerical percentage.
(If you’re looking for the mobile-responsive code, you can find it here.)

Why Track Course Progress in WordPress?

When you run an online course membership site in WordPress, it can be challenging to keep your students engaged and motivated.

One way to overcome that challenge is by tracking course progress in WordPress with your membership site plugin.

By tracking your students’ progress through the online course (and displaying this progress through pie charts or progress bars), you make it easier for them to see how far they’ve come – and how much work they have left to do.

It’s a great way to visually motivate them to stay focused on course content.

How Does AccessAlly’s Course Progress Tracking Work?

Each of your subscribing members are given a unique username and password. They use these credentials to login to WordPress and access the protected content on the site.

As each user works their way through your online course, AccessAlly Pro can track and display their progress.

AccessAlly Pro uses checklist to track the progress of users. When each item on the checklist is marked complete, the progress information changes accordingly.

How To Track Course Progress in WordPress (Piecharts, Progress Bars, and More!)

You can display a student’s progress in a number of ways:

  • Progress Bars
  • Pie Charts (also known as a Progress Circle)
  • Numerical percentage – this is great for including in text or creating your own design and adding the progress somewhere on your pages


1. Create Your Objective List

In the ProgressAlly settings found at the bottom of each WordPress page/post, create your objective list.

How to create an objective checklist

You can add as many objectives as you want from the following options:

  • Text – Totally customizable with basic HTML, this objective type must be manually checked off by the user once they’ve completed the objective specifications.
  • Media – This objective type works with any video that is uploaded through YouTube, Vimeo, Wistia, Amazon AWS video, locally-hosted video, and locally hosted audio. Users manually mark this objective “complete” after they’ve watched the video embedded on the page. You can also configure this objective to automatically mark itself complete after the user watches a certain portion of the video.
  • Quiz – AccessAlly Pro allows you to create quizzes, which can also be used as objectives. When the user completes the quiz, the corresponding objective is automatically checked off.
  • Page/Post – This objective type is automatically marked complete when the objective list on another designated page has been completed.
  • Notes – This objective is automatically checked off in two ways, depending on the note type. With the “homework review”, it’s completed when the admin approves the submitted “homework.” With the other note types, the objective is completed as soon as the student hits “submit” on the note.
Fun tip! You can use a little bit of code to create linked objectives.

Linked objectives allow you to put a link to something inside a text-based objective so users can click the link to get the content extra fast and quickly check it off their list.

Here are a few examples of how you might use linked objectives:

  • Share the link to join your Facebook Group
  • Giving access to workbooks, action sheets, downloads, or Protected Content files
  • Sending participants to a form or survey you’d like them to complete

Here’s what a linked objective looks like on the front end.

Example of linking checklist objectives

To create a linked objective you’ll select a text-based objective.

Add a link to an objective

Next, you’ll copy and paste the code in the box below into the Description /Additional Parameters section of the objective (shown in the image above.) Replace the # sign with the link to your Facebook Group or any link you’d like your objective to go to when clicked.

2. Add Objective List To Page With Shortcode Adder

With an objective list ready to go, it’s time to insert the corresponding shortcode to the page using the shortcode adder, found on the top toolbar:

Add an objective list to a page with a shortcode adder

Once inserted in the page, the checklist items will automatically track course progress in your WordPress site for any logged in user.

Note: some types of objectives (like the “text” option) must be manually marked complete by the course student. Others (like the “quiz” objective type) are completed automatically.

3. Add Progress Bar (or Pie Chart) to Page With the Shortcode Adder

Using the same shortcode generator, select Progress Information. Then, you can decide how you want to display the progress to your students:

  • Progress Text – A numerical percentage display
  • Progress Pie Chart
  • Progress Bar
  • Total Objective Count – this will show the number of objectives on the page
  • Completed Objective Count – this shows how many objectives have been marked complete on the page

progress information shortcode

How to adjust the width of the progress bar or progress circle

You can adjust the width and height of the progress bar when you’re inserting the shortcode on a page. This lets you customize the look and feel of your progress bar.

Screenshot of progress bar settings

If you want the width to automatically adjust for mobile devices or inside different containers, set the width to “100%” instead of selecting pixels. This way, your progress bar will resize to the width of the container it is in.

Updated on March 19, 2021

Was this article helpful?

Related Articles


If you have any questions, we're just an email away.

We take your success seriously, and you'll always get a speedy reply from a real person during business hours.


AccessAlly is the #1 WordPress Course and Membership Solution for Industry Leaders


You'll get follow-up emails about AccessAlly and new features. Opt out anytime. Full privacy policy here.