The default behaviour of the LearnDash top-level ‘Course’ page layout is designed to show the course progress bar at the very top of the page, directly above any content which you may produce in WordPress to sit on the page itself.
This may work for you in most circumstances, but in others you may benefit from instead moving the progress bar so that it sits directly above the dynamically generated Course Content area. For several of our custom LearnDash LMS development customers this proved to deliver the best overall design and stylistic layout that we wanted to achieve, such as the example below:
You may be interested to learn how you can achieve a similar result with your own LearnDash site, and in today’s post we are going to show you two ways this can be achieved either through customisation of the ‘course.php’ LearnDash template file (best for applying this rule across your entire LearnDash platform), or through custom CSS styling and the use of a LearnDash shortcode (best for select course pages). So you can decide what works best for you!
What is the LearnDash Course Progress Bar?
The LearnDash course progress bar is a on-page element added automatically by LearnDash to every ‘Course’ page. (You may have decided to call your Course page something else, for example Modules).
The bar shows by percentage and in the form of a loading bar how far the currently logged in user has progressed in the course. It will also display the last activity timestamp for when the user performed an action on the course such as marking a topic step as complete, and also a general status message which will typically display as Not Started, In Progress, or Complete.
Option 1 – Changing The LearnDash Course Progress Bar Position Via Template File
To perform this action, we recommend setting up a folder in your child theme folder where the original plugin template file can be overwritten.
The PHP file you’ll need to edit in order to customise the Course Progress Bar position can be found in the ‘themes/ld30/templates’ folder in LearnDash. Look for the course.php file and download in order to edit it.
When you’ve finished editing the file using the next step below, you’ll upload the file to your child theme folder, in the directory ‘learndash/ld30‘.
Now open the course.php file and locate the following code block (around Line 105):
/** * Course info bar */ learndash_get_template_part( 'modules/infobar.php', array( 'context' => 'course', 'course_id' => $course_id, 'user_id' => $user_id, 'has_access' => $has_access, 'course_status' => $course_status, 'post' => $post, ), true );
You should cut this block and paste it further down the document, we recommend just below the following code line in order to achieve the same result as our screenshot above:
do_action( 'learndash-course-content-list-before', $course_id, $user_id );
Save your course.php file and upload it to your child theme override folder as detailed above. This will cause the layout of all LearnDash Course pages to change the next time you visit or refresh a Course page in LearnDash.
Option 2 – Changing The LearnDash Course Progress Bar Position Using CSS And Shortcode
If you would prefer to instead change the Progress Bar on a page-by-page basis, you can perform the following edits:
Step 1 – Hide the existing Course Progress bar using this CSS rule:
.ld-course-status.ld-course-status-enrolled {display:none!important}
Step 2 – Add a new Course Progress bar onto the page using the following shortcode:
[*learndash_course_progress] (Remove the asterisk from the shortcode in order for this to work on your LearnDash website)
Continue to follow the Discover eLearning blog for even more helpful LearnDash Tips and Tricks in the near future. You can also follow our social media channels on Facebook, Twitter, and LinkedIn where we posts regular updates and advice for LearnDash platform users.
