myCred Progress Bar - WordPress Plugin

How to Set Up myCred Progress Bar for Rank and Badge Progress

myCred Progress Bar is not for building a new points system. Its job is to display already configured myCred progress clearly on WordPress pages. This guide explains how to prepare ranks, badges, and earning rules, where to place the shortcodes, which settings to enable for different use cases, and how to verify that each user sees their own path to the next achievement.

This guide is best read after you already have a basic understanding of myCred. It does not repeat the standard product-page description of the plugin. Instead, it focuses on the practical chain of "points - rank or badge - visual indicator - outcome check." That approach is especially useful for learning sites, private communities, WooCommerce loyalty programs, forums, member dashboards, and any project where users need to see that their actions are moving them toward a clear goal.

The key thing to understand about myCred Progress Bar is that it depends on existing myCred mechanics: balances, point types, ranks, badges, badge levels, and log entries. If those pieces are configured poorly, the progress bar will accurately display an empty, confusing, or incorrect state. That is why this guide starts with preparation first and only then moves on to shortcodes, appearance, practical examples, troubleshooting, and similar alternatives.

What the Progress Bar Solves in a myCred Setup

In myCred, users earn or lose points for actions on the site: registration, login, visits, comments, purchases, viewing content, working through learning courses, or events added by other integrations. Points themselves are useful, but for many projects a single number is not enough. A user may see "78 points" without understanding whether that is close to the next level, how far they are from a badge, or why it is worth continuing.

myCred Progress Bar fills exactly that gap. It turns the accumulated myCred data into a visual indicator. For ranks, it shows the path from the current minimum requirement to the next threshold. For badges, it shows progress toward the requirements of a specific achievement or the user's current badge. As a result, the visitor gets more than just a balance. They get clear feedback on what has already been done, what is left, and what status they can expect after the next action.

It is important not to confuse the progress bar with the reward setup itself. The plugin does not assign points for comments, create purchase rules, decide when to award a badge, or replace the Ranks or Badges module. It displays the output of those systems on the public-facing side of the site. If ranks are not published, ranges overlap, a badge is not tied to a working reference, or a hook is not writing to the log, the progress bar simply has nothing to show.

Where the Progress Bar Is Most Useful

On a learning site, rank progress helps a student understand how much activity is left before reaching a status like "Advanced" or "Mentor." In a community, it supports engagement because members can see that after a few more comments, visits, or useful actions, they will unlock a new level. In a WooCommerce store, the same block can appear in the customer account area as part of a loyalty program, but only if points are already being awarded correctly through myCred or a relevant add-on.

For content-based projects, the progress bar acts as a gentle motivational guide. Instead of a flat "your balance" message, it answers the question "why should I keep going?" It is not a magic retention tool. It is an interface cue. But if the rewards are tied to real value, such as access to a section, profile status, or internal perks, progress becomes a meaningful part of the user experience.

When Not to Start with It

If the site does not yet have point-awarding rules, ranks, or well-defined badges, installing myCred Progress Bar is premature. First, you need to decide which actions actually deserve points, which thresholds keep rewards meaningful, and how users will understand the value of each level. Otherwise, the indicator may show an attractive bar without helping anyone understand the site's reward system.

The plugin may also be unnecessary for simple sites where points are only used internally by administrators in the dashboard. If users do not need to see the path to their next status, standard balance shortcodes, badge lists, or internal reports may be enough. The progress bar becomes valuable when visual feedback affects user behavior.

What to Check Before Installation

Preparation matters more than the installation itself. According to the official documentation, the ProgressBar Add-on works on top of myCred and displays rank and badge progress through shortcodes. That means the administrator needs to verify not just the ZIP file, but the state of the entire rewards system in advance.

The myCred Core Plugin and WordPress Environment

Start by making sure the main myCred plugin is installed and active. For the current myCred core plugin, WordPress.org lists the required WordPress and PHP versions, while the codex page for the ProgressBar Add-on separately lists minimum requirements for myCred, PHP, and MySQL. Do not rely on random version numbers from third-party archives. Before installation, always confirm compatibility on the official page, in the documentation, and on WordPress.org.

If the site runs on an older PHP version, uses aggressive page caching for logged-in users, or relies on an unusual page builder, test the progress bar on a staging copy first. This is especially important for account areas where the content depends on the current user. A cache that serves the same HTML to multiple logged-in users can display the wrong progress.

Ranks and Point Ranges

For rank progress, the Ranks add-on must be enabled. In myCred, ranks have minimum and maximum balance requirements. The documentation explicitly warns that ranges must not overlap. If two ranks cover the same range, users may receive a different rank than the administrator intended. That is critical for the progress bar because it calculates the path relative to the current or specified rank.

Also check how the ranks are based on balance. In myCred, ranks can depend either on the current balance or on the total accumulated balance. With current balance, users can be demoted if they spend or lose points. With total balance, they usually keep the level they have reached unless the administrator manually changes the balance with a corresponding log entry. This directly shapes how progress feels to the user: one model behaves like a spendable wallet, while the other works more like cumulative reputation.

Badges, Levels, and Reference Events

For badge progress, the Badges add-on must be enabled. In myCred, badges are not awarded simply for having a balance. They are awarded based on requirements tied to points history and reference events. For example, a badge can be linked to site logins, content views, coupon usage, or other actions that are recorded in the myCred log. If the reference hook is not active, the event will never reach the log, and badge progress may appear empty or stuck.

Check badge levels separately as well. A myCred badge can have multiple levels, and users need to see progress toward the next level, not just the fact that they once earned the badge. For this kind of setup, it helps to create a test user in advance, perform the required actions several times, and confirm that the log changes accordingly. Before you place the shortcode on a live page, the log should already confirm that points are being awarded.

Pages Where the Indicator Will Appear

The progress bar is usually not placed on a random page. It belongs where the user already expects personal data: an account page, profile, member page, course page, loyalty program page, or a sidebar widget. If the block is displayed publicly, make sure it behaves properly for guests. Progress shortcodes calculate values for the current user, so for a visitor who is not logged in, the output may be empty or not useful.

The safest option for the first rollout is a private test page. Place the balance, current rank, badge list, and one progress bar there together. That setup makes it much easier to see whether the problem is in the balance, rank, badge, or visual output.

Installation and an Initial Check Without Unnecessary Risk

Installing myCred Progress Bar follows the standard WordPress plugin flow: upload the ZIP file through Plugins, go to Add New, upload the file, and activate it. If you are uploading it manually to the server, place the plugin folder inside wp-content/plugins/ and then activate it from the admin area. At this stage, there is no need to modify the WordPress core, theme files, or myCred code.

After activation, do not jump straight into design work. First confirm that the main data chain is working. The required myCred add-ons should be enabled, ranks or badges should be published, hooks should be active, and your test user should already have a balance or event log entries that actually produce progress.

Minimal Test After Activation

1. Open the WordPress admin area while logged in as an administrator.
2. Make sure the main myCred plugin is active and the required Ranks or Badges modules are enabled.
3. Create or verify a test rank with a non-overlapping point range.
4. Create a test page and insert the basic rank progress shortcode.
5. Open the page as a logged-in test user who has a balance.
6. Compare the visible progress with the user's balance, current rank, and rank range.

[mycred_my_ranks_progress]

If the basic shortcode does not display the expected block, do not immediately add a dozen parameters. First check whether the shortcode itself is recognized, whether the ProgressBar Add-on is active, whether the Ranks add-on is enabled, and whether the user actually has a rank. A simple check saves more time than trying to fix the issue with color, animation, or CSS.

Checking Badge Progress

For badges, the initial test is similar, but the checkpoint is different. Here, what matters is not just the balance, but whether the badge requirements are truly tied to myCred events. If a badge is awarded for logging in, viewing content, or some other action, perform that action as a test user and verify that a log entry appears. Then insert the basic badge progress shortcode.

[mycred_badges_progress]

If the badge has multiple levels, test more than just the first level. Check an in-between state as well. A good test covers three states: the user has not started yet, the user has partial progress, and the user has reached the requirement. That way, you can see in advance how the progress bar behaves at zero, in the middle, and at full completion.

Practical rule: first get a correct result on a clean test page with a single shortcode. Only then move the block into a page builder, account area, theme widget, or more complex template.

Rank Progress: How the Shortcode Works and Which Parameters Matter

For ranks, the main ProgressBar Add-on shortcode is [mycred_my_ranks_progress]. It displays the current user's progress for their current rank or for a specific rank if you pass the corresponding parameter. Unlike a full rank list, this block does not explain the entire hierarchy. Its job is to show the user's current personal path.

The official documentation states that it requires the Ranks add-on and the premium myCred Progress Bar addon. That is an important distinction from simply displaying a rank. You can show the current rank with another shortcode, but progress between thresholds specifically requires the ProgressBar Add-on.

Basic Calculation Model

In myCred, a rank is tied to a point range. If a user has 140 points and the current rank covers the range from 101 to 200, the progress bar should visually show movement within that range. That is why overlapping ranges or gaps between thresholds create a confusing experience. Users may see a rank that does not match what the administrator expected, or progress that does not make the next step clear.

If the site uses multiple point types, such as Points and Coins, the ctype parameter becomes especially important. The documentation explicitly notes that you do not need it when only one point type exists. But with multiple types, leaving out ctype can easily display progress for the wrong loyalty currency. To the user, this looks like a bug: they earned Coins, but the bar is not moving because it is showing Points.

Parameters to Check First

Safe Shortcode Examples

For the first rollout, use the minimal version. It confirms that the plugin works and does not hide problems behind extra parameters:

[mycred_my_ranks_progress]

If the site has multiple point types, add the specific type. The value must match the configured point type in myCred:

[mycred_my_ranks_progress ctype="mycred_default" show_labels="1"]

If the rank logo takes up too much space in the account design, you can hide it and keep only the rank title and progress:

[mycred_my_ranks_progress show_logo="0" show_rank_title="1" show_labels="1"]

The radial type works best when the progress bar sits inside a profile card or a small widget. On a longer page that explains the rewards system, a regular horizontal bar is often easier to read because it is simpler to pair with thresholds and labels.

When to Use rank_id

The rank_id parameter is useful when you want to show progress toward a specific rank instead of only the user's current range. This works well on a page such as "How to Earn Mentor Status," where the entire block is focused on a single goal. But this kind of output needs careful testing. If the user has already reached or exceeded the specified rank, the visual meaning may become less obvious. In that case, it is better to add a short explanation next to the block or display the rank list separately.

Badge Progress: Levels, Requirements, and Visual Format

For badges, the shortcode is [mycred_badges_progress]. Its purpose is different from rank progress. A rank usually depends on balance, while a badge depends on requirements tied to a history of actions. A user can have a high balance and still make no progress toward a badge if that badge is awarded for a different reference. For example, an "Active Member" badge may depend on site logins rather than the total balance.

The documentation states that the Badge add-on must be enabled for this shortcode. The extended ProgressBar Add-on page also says you can display progress for the current user's badges, choose colors, animation, a bar or radial type, and manually specify a badge with show_badge.

Why Badge Progress Is Often Harder Than Rank Progress

A rank has a range: minimum, maximum, current balance. A badge may have one or several requirements: a specific action, a number of repetitions, losing or gaining points for a specific reference, or a combination of conditions. That is why badge troubleshooting always starts with one question: "Which event is supposed to move the progress?" If the answer is unclear, users will see an indicator without understanding how to affect it.

Official myCred demo pages show badge examples tied to site visits, logins, video views, coupon usage, and other actions. That is a strong design reference point. Each badge should have a name, a clear reason for being awarded, and a verifiable action behind it. When that is in place, the progress bar becomes instructional instead of decorative.

Shortcode Parameters for Badges

The width and height parameters control the badge image size. Use them only if the default dimensions do not fit your layout. For a typical account page, it is usually better not to make the badge oversized. What matters more is that the user can clearly see the title, progress, and next step.

The show_badge parameter helps focus the block on a single badge. This is useful for pages built around one goal, such as "earn a badge for completing the introductory course" or "unlock a badge for community activity." If you leave the output open to all relevant badges, the block can become too long and difficult to manage.

The type parameter accepts the bar and radial formats. A regular bar works better for sequential tasks and achievement lists. Radial progress fits compact cards where you want to show completion at a glance. The Stripe parameter controls the striped progress layer. You can leave it enabled for extra visibility or turn it off if the site's theme already uses a calm, minimalist look.

[mycred_badges_progress type="bar" Stripe="1"]

[mycred_badges_progress show_badge="123" type="radial" animate="1"]

How to Explain the Next Step to the User

The progress bar alone does not always make the required action clear. That is why it helps to add a short line nearby, such as "Leave 2 more helpful comments," "Complete the next lesson," or "Visit the site one more day." Do not promise an action unless it is confirmed by the hook settings and badge requirements. A safer message is something like: "Progress updates after the event is recorded in the myCred log."

Outcome check: if the user completed the action but the badge progress did not change, start by checking the myCred log. If there is no entry, the issue is not in Progress Bar but in the hook, reference, or badge requirement.

How to Choose the Progress Target: Current Rank, Specific Rank, or Specific Badge

One of the most common mistakes when rolling out a progress bar is showing users everything at once. The administrator sees lots of possibilities: current rank, next rank, a specific high rank, overall badge progress, a single badge, radial view, horizontal view, labels, logos. But users should not have to decode the technical map of myCred. They need one clear goal in one specific part of the page.

Choosing that goal starts with a simple question: what kind of motivation are you trying to reinforce? If the site is built around long-term member reputation, the main block is usually current rank progress. If you are running a temporary campaign, challenge, or onboarding flow, it is better to show one specific badge. If the page explains the entire level system, you can pair the progress bar with a rank list, but the indicator itself should still answer just one question: "Where am I right now?"

Current Rank for Ongoing Reputation

The current rank works well on sites where points accumulate through regular activity: logins, posts, comments, lesson completion, or valuable community actions. In that case, users keep returning to their account area and can see the status change over time. For this use case, there is no need to hardcode rank_id. Let the shortcode work with the current user and current rank, and show the balance or a short tip alongside it.

It is also important to think through how wide the ranges should be. If the first rank ends too far away, new users will stare at an almost empty bar for too long and quickly stop noticing it. If thresholds are too frequent, the ranks lose meaning. A good setup gives users an early first success, then gradually increases the distance between levels. That is not a Progress Bar setting, but it determines whether Progress Bar feels genuinely useful.

A Specific Rank for a Goal Page

The rank_id parameter makes sense when a page is dedicated to one specific target. For example, you may be explaining the "Mentor" status and showing the user how far away it is. That kind of block should not compete with the current rank display in the profile. It works as a goal-focused meter inside a dedicated program context.

Before publishing, test two edge cases. First, the user is still far from the selected rank. Second, the user has already reached or exceeded it. If the goal still looks unfinished after completion, add conditional messaging through the theme or a membership plugin. For users who have already reached it, show a congratulations message or a link to the next step. The shortcode itself should not be expected to handle the full communication layer.

One Badge for a Campaign or Onboarding

For badges, it is usually best to avoid a general block without context when the site has many achievements. Users may see several meters and have no idea which one matters right now. The show_badge parameter helps you choose a single badge and place it inside a specific use case: completing the intro course, leaving a first helpful comment, logging in several days in a row, or passing a verification task.

A badge should always have a clear "next step." If the condition is complex, explain it in plain language next to the visual block. For example: "This badge updates after actions recorded in the myCred log: login, lesson view, and comment." You do not need to expose every technical reference key to users, but the administrator should know them and verify them in the log.

Multiple Point Types and the Risk of the Wrong Currency

Sites with multiple point types often use one currency for reputation, another for purchases, and a third for game-like actions. That is a normal myCred setup, but the progress bar has to match the intended type explicitly. If a rank is built on Coins but the shortcode is showing mycred_default, the user will see the wrong path. For a multi-currency setup, it helps to keep a simple internal table of which point type controls which rank, which badge, and which page.

You do not need to show that full table to users in the article. It is enough to make the interface self-explanatory with labels like "Community Rank," "Store Rewards," and "Learning Achievements." But in the shortcode settings, ctype must be exact. After every point type change, verify not only the display but also that a new award updates the correct meter.

Quick takeaway: one progress bar should support one user goal. Current rank is best for ongoing reputation, rank_id for a dedicated goal page, and show_badge for a specific badge or campaign.

Where to Place the Shortcodes: Editor, Widgets, Profiles, and Builders

myCred Progress Bar is displayed through shortcodes, so you can place it in a Shortcode block in the WordPress editor, in a text widget, in an account template, or inside a page builder if that builder correctly processes WordPress shortcodes. But placement affects both how users understand the progress and how quickly you will spot problems.

Account Area and Profile

The clearest placement is the user's account area. That is where people already expect personal data: balance, history, current rank, badges, and available rewards. Place rank progress next to the current rank, and badge progress next to the description of the specific achievement. Do not pile up ten indicators without explanation. Users should immediately understand what each bar refers to.

If the site uses BuddyPress, BuddyBoss, or another profile layer, first check where that layer safely accepts WordPress shortcodes. Do not insert PHP into theme files unless it is truly necessary. If you need template-based output, it is better to use a child theme and a minimal template, but only after verifying the shortcode on a normal page first.

Course Pages and Activity Programs

On learning pages, the progress bar can be useful not only in the profile, but also next to a task itself. For example, at the end of a module you can show progress toward a rank that unlocks advanced content. In that setup, it is critical that the hook responsible for lesson completion actually writes an entry into myCred. If the course or LMS integration does not create the correct reference, the visual block cannot infer the progress on its own.

Page Builders and the Older WPBakery Use Case

The source material also includes the older shortcode [mycred_rank_progress], which is tied to myCred for Visual Composer or WPBakery Page Builder. You should not automatically replace it with the main ProgressBar Add-on shortcode. It has its own dependency chain: the Ranks add-on, myCRED for Visual Composer, and Visual Composer. The documentation warns that some themes with built-in Visual Composer may override or remove the progress bar feature, which can prevent that shortcode from rendering a real progress bar.

For this guide, the main path is still [mycred_my_ranks_progress] and [mycred_badges_progress]. The older Visual Composer shortcode only makes sense if the site is already built around that stack and you understand exactly why you are using it.

Pages for Guests

Because progress is calculated for the current user, any guest-facing page should have a fallback. That can be a simple message inviting the visitor to log in, or a block shown only to authenticated users through the theme, membership plugin, or builder. Showing an empty progress block to a guest without explanation just looks like a broken interface.

Detailed Setup After Installation

Once the initial check is done, the most important part begins: choosing the right parameters so the progress bar actually helps the user instead of merely taking up space. The setup has three layers: myCred rules, shortcode parameters, and the visual presentation inside the theme.

Start with the Reward Model, Then Style It

Do not start with color. First answer four questions: which point type is being used, which rank or badge should be displayed, which action moves the progress, and where the user will see the outcome. Once those answers are clear, the shortcode usually stays short and readable. If they are not, the parameters end up compensating for a weak reward model.

For ranks, verify the ranges and their order. For badges, verify the badge requirements and active hooks. With multiple point types, always confirm ctype. For a specific goal, use rank_id or show_badge, but do not turn the page into a catalog of every possible meter.

Shortcode Recipes for Common Placements

Compact Rank Block in a Profile

[mycred_my_ranks_progress show_logo="1" show_rank_title="1" show_labels="0" type="bar"]

This version works well in a profile card where the balance or a short rank description already appears nearby. You can hide the min/max labels to keep the block from feeling crowded. After inserting it, check the mobile width and make sure the rank logo is not pushing the bar out of place.

Detailed Rank Block on a Program Page

[mycred_my_ranks_progress show_logo="1" show_rank_title="1" show_labels="1" prefix_min="From" prefix_max="To"]

This version works better on a page where you explain the level system. The labels help users understand the thresholds. If the site is multilingual, check how the values in prefix_min and prefix_max look in the selected theme and make sure they do not clash with the rest of the text.

Focus on One Badge

[mycred_badges_progress show_badge="123" type="bar" animate="1" Stripe="1"]

Replace 123 with the ID of a real badge. This block fits naturally inside a lesson, challenge, or activity section where all of the surrounding content is leading toward one achievement. After testing it, you can add a short paragraph explaining which actions move the progress.

Color, Animation, and Readability

The progress bar color should support the interface, not compete with it. The documentation mentions bgcolor and the ability to use color values. On a site with multiple point types, you can use different colors for different loyalty currencies, but do not turn the whole interface into a rainbow. Users should understand the state without effort: empty, partially complete, almost done, complete.

Animation can help draw attention when the block first appears, but it may be unnecessary in a dense account dashboard. If users open the profile page frequently, constant animation quickly becomes irritating. The documentation also notes that animation may be disabled at 100% completion. That is not a bug. It is expected behavior.

Safe CSS Tweaks for Appearance

If the theme displays the progress bar too tightly, you can add a small CSS adjustment through Appearance - Customize - Additional CSS or through your theme's safe CSS module. Do not edit the plugin files. Below is an example that gently limits the block width and adds spacing around the title wrapper mentioned in the documentation for rank progress.

.mycred-rank-progress-title {
  margin-bottom: 8px;
  font-weight: 600;
}

.mycred-rank-progress-title + div,
.mycred-rank-progress-title + p {
  max-width: 680px;
}

.entry-content .mycred-rank-progress-title {
  line-height: 1.35;
}

The check is simple: open the page on desktop and mobile, compare the block before and after, then temporarily remove the CSS and make sure only your own adjustment disappears. If the appearance breaks, roll back the CSS entirely. Do not add selectors that globally change every progress bar element in the theme until you understand the HTML markup of the specific page.

Practical Example: Account Page with Progress Toward the Next Rank

Let us look at a realistic use case for a learning community. On this site, myCred awards points for logging in, viewing lessons, and leaving helpful comments. The user starts at a basic rank and then needs to earn enough points to reach the next level. The administrator wants to show the current rank, a progress meter, and a clear hint about what to do next inside the account area.

Goal

The goal is to create a block where a logged-in user can see their current rank and progress toward the next range. It should be understandable without reading the documentation: rank title, visual bar, min/max labels if needed, and a short explanation on the page.

Preparation

• The main myCred plugin is installed and active.
• The Ranks add-on is enabled.
• Non-overlapping ranks have been created for the selected point type.
• Hooks award points for the intended actions and write clear log templates.
• You have a test user with a mid-range balance, not just an administrator with an empty history.

Steps

1. Open the test account page or create a temporary private page.
2. Add a Shortcode block and insert the basic rank output: [mycred_my_ranks_progress show_labels="1"].
3. If multiple point types are used, add ctype with the correct identifier.
4. Place a short line next to it: "Complete tasks and helpful actions on the site to move closer to the next rank."
5. Open the page as the test user and compare the bar with that user's balance.
6. Perform an action that awards points, then refresh the page and verify that the progress changes.

Verification

A good result looks like this: the user is logged in, the current rank is correctly identified, the bar is not empty without reason, the min/max labels match the rank range, and the progress changes after a new point award. If the progress does not change, check the myCred log. If the entry exists but the meter does not update, look at caching, point type, and shortcode parameters. If there is no entry, go back to the hook.

A Special Note for Spendable Points

If points are used like a wallet and users can spend them, ranks based on current balance will drop as the balance is spent. That may be the right model for a store, but it can be questionable for reputation. For reputation-based levels, it is often more sensible to build ranks on total balance so users do not lose status just because they spent bonuses. The right choice depends on the site's model, so it needs to be decided before the progress bar goes live.

Practical Example: Progress Toward an Activity Badge

Now consider a different use case: the site wants to award a badge for a repeatable action, such as regular logins, helpful comments, or watching training videos. Visually, this is better shown through progress toward one specific badge rather than a general rank. The user sees not "how many points do I have," but "what is left before I unlock this achievement."

Goal

The goal is to show progress toward one selected badge on a challenge page or inside the account area. The block should be tied to a clear action, not just display a list of all badges. For that, use show_badge with the ID of the target badge.

Preparation

Create the badge in myCred, set up its levels and requirements, then enable the reference hooks that should write the actions into the log. If the badge depends on site login, test a login with a test user. If it depends on comments, publish a test comment and make sure it reaches the status tracked by the hook. If it depends on video views, use the specific myCred mechanism that records a view event.

Steps

1. Find the badge ID in the WordPress admin area.
2. On a test page, insert [mycred_badges_progress show_badge="123" type="bar"].
3. Add a short plain-text explanation of the badge condition next to it.
4. Perform the action as a test user.
5. Check the myCred log and the progress bar update.
6. Move the test user all the way to the requirement and confirm the completed state.

Verification and Expected Behavior

If the badge has not been started yet, progress may remain at zero. If the user has completed part of the requirements, the meter should show an in-between state. If the requirement has been reached, the user should receive the badge or badge level, and the indicator should show completion or stop leading toward a goal that is already closed. Not all themes style these states the same way, so check not only whether the badge is awarded, but also how the block looks.

Verifying the Outcome, Performance, and UX After Publishing

Once the progress bar has been placed on the page, do not just check whether "the block appears." It is far more important to verify whether it works correctly for different users, whether it breaks on mobile devices, and whether cached data is being displayed.

Testing with Different Users

Create at least three test states: a new user with no progress, a user in the middle of the range, and a user who has reached the threshold. For ranks, this shows zero, partial fill, and the transition to the next level. For badges, it shows whether the initial, intermediate, and completed states are handled correctly.

Do not test only as an administrator. Administrators often have special permissions, different hooks, manual balance changes, and exceptions. A normal subscriber or store customer gives you a more honest picture.

Cache and Personal Data

Personal progress should not be cached as the same page for everyone. If the site uses page cache, a CDN, builder cache, or HTML optimization, exclude the account area and any page with user-specific progress from full-page caching. If exclusion is not possible, verify whether the cache can separate content for logged-in users. Otherwise, one user may see another person's percentage or an outdated state.

WooCommerce account pages, membership pages, and LMS profiles usually already have cache exclusions, but they still need to be checked. The progress bar should update after a balance change or a new log entry, not several hours later after a cache purge.

Accessibility and Readability

Do not rely on color alone. If a green bar indicates success, add a text label next to the block or enable show_labels when that helps. A user with color-vision limitations should be able to understand the state through text and numbers. On mobile, a radial format may look neat, but the labels around it can become too small. A horizontal bar with a short explanation is often more practical.

Testing After Rule Changes

Every time you change rank ranges, badge requirements, hooks, or point types, rerun your tests. In myCred, ranks can be assigned automatically when the balance changes, when a new user is created, or when a new rank is added. The documentation also describes manual assignment through the settings when you need to recalculate users after changing the rules. Do not publish new thresholds until you have tested several real states.

Common Problems and Troubleshooting

Most issues with myCred Progress Bar are not caused by the bar itself, but by the data chain feeding it. Below is a breakdown of symptoms, causes, and safe checks. Go from top to bottom: first verify the shortcode and add-ons, then points, ranks, or badges, and only after that move on to cache and appearance.

The Shortcode Appears as Plain Text

Symptom: the page shows [mycred_my_ranks_progress] or [mycred_badges_progress] as raw text instead of a rendered block.

Cause: the shortcode was inserted into a location where WordPress does not process shortcodes, the plugin is not active, or the page builder is outputting the content as plain text.

What to check: place the same shortcode into a standard Shortcode block on a test WordPress page. If it works there, the issue is in the output location. If it fails everywhere, check whether myCred, the ProgressBar Add-on, and the required modules are active.

How to fix it: use the native Shortcode block, a widget that supports shortcodes, or a builder setting that explicitly runs WordPress shortcodes. Do not paste the shortcode into an HTML block as plain decorative text.

Rank Progress Is Empty or Does Not Match the Balance

Symptom: the user has points, but the progress bar is empty, stuck at zero, or showing a strange value.

Cause: the Ranks add-on is not enabled, the user does not have a current rank, rank ranges overlap, the wrong point type was selected, or the balance belongs to a different myCred currency.

What to check: open the user's current rank, the rank list, and the min/max ranges. If multiple point types are used, check ctype. Make sure the user falls inside a published range.

How to fix it: correct the ranges, save the rank settings again, and if needed use the tool for assigning ranks to users. If the issue appeared after changing the rank structure, recalculate ranks on a staging copy first.

Badge Progress Does Not Move After a User Action

Symptom: the user completed the action, but the badge meter stays in the same place.

Cause: the action does not create a myCred log entry, the hook is not active, the log template is empty, the badge requirement is tied to a different reference, or the wrong badge was selected in show_badge.

What to check: the myCred log for the test user. If there is no entry, Progress Bar is not the issue. If there is an entry, compare the reference with the badge level requirement.

How to fix it: enable the correct hook, set a proper log template, verify the badge requirement, and repeat the action with a new test user. Do not change the CSS or color until the log confirms the event.

Animation Does Not Work at Full Progress

Symptom: animation is enabled with animate="1", but the completed bar does not animate.

Cause: the documentation for the progress shortcodes states that animation is disabled once progress reaches 100%. This is expected behavior.

What to check: test with a user who has partial progress. If the animation appears in the middle of the range, everything is working correctly.

How to fix it: do not treat this as a bug. If you need a visual completion cue, add a text block next to the progress or style the completed badge state through the theme.

The Block Breaks the Layout on Mobile

Symptom: the rank logo is too large, the min/max labels spill outside the container, or the radial meter crowds adjacent elements.

Cause: the full image size was chosen, all labels are enabled inside a narrow container, or the theme applies rigid styling to progress bar elements.

What to check: the show_logo, logo_size, show_labels, width, height parameters, and the actual block width inside the theme.

How to fix it: reduce the logo size, hide some labels in compact placements, use a horizontal format instead of a radial one in narrow columns, or add a small CSS tweak in the child theme.

Different Users See the Same Progress

Symptom: different accounts see the same meter or an outdated result in the account area.

Cause: the page with the personal shortcode is being cached as shared HTML, or the page builder is saving a fragment that already contains rendered user-specific content.

What to check: disable cache for the test page, clear browser and site cache, then compare two users in separate private windows.

How to fix it: exclude account and profile pages from page cache, review your CDN settings, and do not place personal shortcodes inside static templates that are cached identically for everyone.

When myCred Progress Bar Is the Right Choice

myCred Progress Bar is worth using when the site already has a meaningful myCred setup and users need to see not just a balance, but movement toward the next goal. For ranks, that means progress within a point range. For badges, it means progress against requirements recorded through hooks and the log. In both cases, the visual indicator only helps when the underlying rewards system is honest, clear, and verifiable.

Before publishing, verify four things: rank ranges do not overlap, badge requirements are tied to real events, pages with progress are not serving cached HTML to every user, and the shortcodes show the correct output under a normal test account. Once those checks are done, you can move on to downloading and testing it on your own site: download the ZIP archive.

If you have not configured myCred yet, start with points, hooks, ranks, and badges. The progress bar should be the final visible layer, not an attempt to cover gaps in the reward model. When used that way, it becomes more than a decorative bar. It becomes a useful account element that shows users what they have already done and what they need to do next.