How to Display Woothemes Sensei Modules and Lesson List in a Sidebar

So you’re using Woothemes’ Sensei plugin to provide some type of courses to your visitors, and you’ve got the Modules component installed.

On a course page you’ll now have a section that lists all of the lessons, grouped by module, like so:

screenshot showing different lessons from a course grouped into modules
Taken directly from the Woothemes Sensei Modules page, your actual display may be slightly different based on your theme.

Great, what a handy thing to show your users. But what if you want to display this information somewhere else? Like, in a sidebar on the individual lesson pages? That could be handy if people are taking How to Hold a Guitar, as in the screenshot above, and want to know what other lessons are in the course.

Here’s how to do it. I’ve added all of this to sidebar.php, but you could theoretically show it anywhere on a lesson page.

<?php if (is_singular('lesson')) { ?>
<section class="course-lessons">
<?php $args = array(
'orderby' => 'ID',
);
$module_terms = get_terms( 'module', $args ); ?>
<header>
<h2>Modules</h2>
</header>
<?php foreach ( $module_terms as $module_term ) {
$module_query = new WP_Query( array(
'post_type' => 'lesson',
'tax_query' => array(
array(
'taxonomy' => 'module',
'field' => 'slug',
'terms' => array( $module_term->slug ),
'operator' => 'IN'
)
)
) );
?>
<article class="post module">
<header>
<h2><?php echo $module_term->name; ?></h2>
</header>
<section class="entry">
<section class="module-lessons">
<header>
<h3>Lessons</h3>
</header>
<ul>
<?php if ( $module_query->have_posts() ) : while ( $module_query->have_posts() ) : $module_query->the_post(); ?>
<li class=""><a href="<?php the_permalink(); ?>" title="<?php echo get_the_title(); ?>"><?php echo get_the_title(); ?></a></li>
<?php endwhile; endif; ?>
</ul>
</section>
</section>
</article>
<?php $module_query = null;
wp_reset_postdata(); } ?>
</section>
<?php } ?>

This will export the list exactly as the current Woothemes Sensei default does, so all of the styling from that list should be matched up here. Of course, it doesn’t help that the default output uses HTML5 elements like <section> incorrectly (specifically the section.entry should just be a div, in my opinion), but it will get the job done for you!

Up Next: Perfect Three Column Grid Layout with CSS and nth-child Selectors