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)

With AccessAlly Pro, you can display a user’s progress on any post or page. Here’s how to show course progress: whether you want to use a progress bar, progress circle, or just a percentage.

(If you’re looking for the mobile-responsive code, you can find it here.)

Why Track Course Progress in WordPress?

If you’re unfamiliar with using shortcodes, please see our guide here: [Guide] Using AccessAlly Shortcodes.

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’s progress tracking feature uses checklists (created by you!) to determine what the progress information should display on any given page or post. 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)
  • Just a percentage – this is great for including in text or creating your own design and adding the progress somewhere on your pages

Step 1: Install AccessAlly Pro Plugins

Install the AccessAlly Pro plugin suite (AccessAlly + ProgressAlly) on your site, then integrate with your CRM.

Step 2: Create Your Objective List

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

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.
  • Video – This objective type works with any video that is uploaded through YouTube, Vimeo, or Wistia. 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.

How to Track Course Progress in WordPress

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.

Step 3: 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 toolbar.

how to track course progress in wordpress

Select “Objective List” from the dropdown, then click the yellow “Insert Shortcode” button.

how to track course progress in wordpress

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.

Step 4: Add Progress Bar (or Pie Chart) to Page With the Shortcode Adder

Using the same shortcode adder, select “Progress Information” from the Dropdown. 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

how to track course progress in wordpress

Hit “insert shortcode” and preview your changes.

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 January 3, 2020

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.