Home Archive

Embed Snippet on Your Site

<script src="https://library.wpcode.com/embedjs/m5yemqq2.js/"></script>

MemberPress: Display MemberPress Course Progress Using Shortcode

This shortcode displays a user's progress for a specific course in MemberPress. It outputs a styled progress bar based on the user's current completion percentage for the given course.

Add the [mpcs-course-progress] shortcode. This shortcode will display the logged-in user’s progress for the specified course, on the page where the shortcode is added.

This shorcode requires the course_id=" " parameter. Thus, for example, to display the user’s progress on the course with ID of 123 the shortcode should be used in the following format:

[mpcs-course-progress course_id="123"]

Customize Styling: Adjust CSS classes or inline styles to change the appearance of the progress bar:

.course-progress {
padding: 5px;
border-radius: 5px;
/* Custom background color */
}
.user-progress {
background-color: #4caf50;
height: 20px;
border-radius: 5px;
}

Add Custom Text or Icons: Display additional information or icons based on progress percentage:

🎉 Completed!

MemberPress Team PRO

<10

Code Preview

Comments

php


	`<?php`
	`add_shortcode( 'mpcs-course-progress', function( $atts ) {`
	`if( !isset( $atts[ 'course_id' ] ) ) return;`
	`$user_id = get_current_user_id();`
	`if ( !$user_id ) return '';`

	`$course = new memberpress\courses\models\Course((int)$atts['course_id']);`
	`$progress = $course->user_progress($user_id); ?>`

	`<div class="course-progress" style="background-color:#ececec;">`
	`<div class="user-progress" data-value="<?php echo $progress; ?>" style="width: <?php echo $progress; ?>%;"><?php echo $progress; ?>%</div>`
	`</div>`
	`<?php });`

add_shortcode( 'mpcs-course-progress', function( $atts ) {
  if( !isset( $atts[ 'course_id' ] ) ) return;
	$user_id = get_current_user_id();
	if ( !$user_id ) return '';

	$course = new memberpress\courses\models\Course((int)$atts['course_id']);
  $progress = $course->user_progress($user_id); ?>

	<div class="course-progress" style="background-color:#ececec;">
    <div class="user-progress" data-value="<?php echo $progress; ?>" style="width: <?php echo $progress; ?>%;"><?php echo $progress; ?>%</div>
  </div>
<?php });

Embed Snippet on Your Site

MemberPress: Display MemberPress Course Progress Using Shortcode

Comments

Add a Comment Cancel Reply