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 checklists 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

Setup

1. Create Your Objective List

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

Tracking course progress with offering type objective in progressally.
offering type objective

To automatically track the users completion of an entire course, simply add an offering objective. On the frontend of your site, users will see a checklist of all of the course content pages.

offering objective frontend
How the offering type objective look

 

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.
  • Download Protected Content – This type of objective tracks if user downloaded the specified material. It also conveniently shows up as a link to the designated content.
  • Download Certificate – This type of objective automatically marked complete when user download a certificate on a page. Check out ProgressAlly Interactions for more details.
  • Offering – This type of objective automatically tracks all pages under an offering. It will show up as a list of all the pages with objectives. Each page objective can only be checked off when that page is completed.

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.

Linked objective front end view

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

Text objective with links

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:

Objective List 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 Pie Chart Shortcode Adder

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.

Adjusting progress bar heighth and width

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 October 18, 2021

Was this article helpful?

Related Articles

NO QUESTION GOES UNANSWERED

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.

Opt-In-Laptop.png

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

WATCH THE DEMO

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