LearnDash: Course Progress Bar Shortcode
Adds a [wpide_ld_progress] shortcode that shows the logged-in student's progress in a course as an accessible bar with "4 of 10 steps (40%)".
Opens WPIDE on
Code
if ( ! defined( 'LEARNDASH_VERSION' ) ) {
return;
}
add_shortcode( 'wpide_ld_progress', function ( $atts ) {
$atts = shortcode_atts( array( 'course_id' => 0 ), $atts, 'wpide_ld_progress' );
$user_id = get_current_user_id();
$course_id = $atts['course_id'] ? absint( $atts['course_id'] ) : (int) learndash_get_course_id( get_the_ID() );
if ( ! $user_id || ! $course_id || ! sfwd_lms_has_access( $course_id, $user_id ) ) {
return '';
}
$progress = learndash_course_progress( array( 'user_id' => $user_id, 'course_id' => $course_id, 'array' => true ) );
$percent = isset( $progress['percentage'] ) ? (int) $progress['percentage'] : 0;
$label = sprintf( '%1$d of %2$d steps (%3$d%%)', (int) ( $progress['completed'] ?? 0 ), (int) ( $progress['total'] ?? 0 ), $percent );
return sprintf(
'<div class="wpide-ld-progress"><div role="progressbar" aria-valuenow="%1$d" aria-valuemin="0" aria-valuemax="100" aria-label="%2$s" style="height:10px;border-radius:5px;background:rgba(127,127,127,.25);overflow:hidden"><div style="width:%1$d%%;height:100%%;background:currentColor"></div></div><p style="margin:.4em 0 0;font-size:.9em">%3$s</p></div>',
$percent,
esc_attr( get_the_title( $course_id ) . ' progress' ),
esc_html( $label )
);
} );
Notes
Inside a course, lesson or topic it uses the current course; elsewhere pass course_id="123".
How to add this snippet
- Install WPIDE on your WordPress site (it is free) and open Code Snippets.
- Use snippet above adds it from the library in one click. Or copy the code into a new snippet with the same code type.
- It is added inactive: review the code and settings, then switch it on.