Series Progress for a Category of Lessons (No LMS Needed)
Adds a [wpide_series_progress category="course-1"] shortcode that shows how many posts in a category the reader has marked complete, with a progress bar and checklist.
Opens WPIDE on
Code
add_shortcode( 'wpide_series_progress', function ( $atts ) {
$atts = shortcode_atts( array( 'category' => '', 'list' => 'yes' ), $atts, 'wpide_series_progress' );
if ( '' === $atts['category'] ) {
return '';
}
$lessons = get_posts( array(
'category_name' => sanitize_title( $atts['category'] ),
'numberposts' => 100,
'orderby' => 'date',
'order' => 'ASC',
'fields' => 'ids',
'no_found_rows' => true,
) );
if ( ! $lessons ) {
return '';
}
$done = is_user_logged_in() ? array_map( 'intval', (array) get_user_meta( get_current_user_id(), 'wpide_completed_lessons', true ) ) : array();
$count = count( array_intersect( $lessons, $done ) );
$percent = (int) round( $count / count( $lessons ) * 100 );
$html = sprintf(
'<div class="wpide-series"><div role="progressbar" aria-valuenow="%1$d" aria-valuemin="0" aria-valuemax="100" aria-label="Series progress" 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">%2$s</p>',
$percent,
esc_html( sprintf( '%1$d of %2$d lessons complete', $count, count( $lessons ) ) )
);
if ( 'yes' === $atts['list'] ) {
$html .= '<ol class="wpide-series__list">';
foreach ( $lessons as $id ) {
$is_done = in_array( $id, $done, true );
$html .= '<li' . ( $is_done ? ' class="is-done"' : '' ) . '><a href="' . esc_url( get_permalink( $id ) ) . '">' . esc_html( get_the_title( $id ) ) . '</a>' . ( $is_done ? ' <span aria-label="completed">✓</span>' : '' ) . '</li>';
}
$html .= '</ol>';
}
return $html . '</div>';
} );
Notes
Works with the "Mark as Complete" button snippet. Posts are listed oldest first; add list="no" to show only the bar.
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.