[Resolved] How to display LMS style child posts in the sidebar?

[Author]

Posts

[Alok Sharma]

I am unable to provide the login details in this thread https://toolset.com/forums/topic/how-to-display-lms-style-child-posts-in-the-sidebar/ as it is giving me error message.

[Jamal]

I suppose that you have encountered a caching glitch, can you clear the browser data in your browser and try again? Or try in an incognito window.

You can also add credentials in this ticket, I am setting your next reply to be private.

[Jamal]

I confirm the credentials are working. Can you please create a couple of posts to test with, currently there are no courses or lessons, there is only one chapter post. Can you create some posts and link them with there parent or child post.

Then create one view to display chapters, let's call it "Chapters for Course". Add a query filter inside of it on the relationship, and set it the post where this view is shown.
Then you can add a second view to display lessons, this one's filter should be against the current post in the loop. Then put it inside the first view's loop.

If you are still stuck, let me know what views have you created? And in what sidebar widget you have put the parent view?

[Alok Sharma]

Hello,

I have added 2 courses, 5 chapters within each course and 5 lessons within each chapter.

The biggest problem is that I am completely confused with the views. I just don't know how to deal with it.

I want to create a hierarchy which would display the course details like I mentioned in the other thread. This is what I am not able to get to and the views interface is very confusing for me.

Thanks,

Alok

[Jamal]

Hello Alok,

Toolset offers two editing experiences to build your views, archive templates, and content templates: The blocks editor, and the legacy editor. You can activate both or one of the experiences in Toolset->Settings->General(tab)->Editing experience.

Currently, your website is configured to have both. There are some old views in the trash that were created using the legacy editor. So, I created my example using the legacy editor. You can do the same using Blocks too.

Our current documentation and videos are focused on the blocks editing experience:
- https://toolset.com/documentation/
- hidden link

However, you can still find some legacy documentation and some Youtube videos about the legacy editor:
- https://toolset.com/documentation/user-guides/
- https://toolset.com/documentation/legacy-features/views-plugin/
- https://toolset.com/documentation/programmer-reference/views/views-shortcodes/

Keep in mind that:
- Views are used to display a list of posts, terms, or users.
- Content templates are meant to display ONE post.

To achieve a hierarchy of courses, chapters, and lessons, you will need to use lists and lists inside lists. Views, inside views.

1. First view: List of chapters related to a course:
- Query filter on related posts to the post where this view is shown. Check this screenshot hidden link
- Choose the menu order to get the same order as the backend here hidden link
- Add the chapter link or title inside the loop. Check this screenshot hidden link

2. Second view: List of lessons related to a chapter: Similar to the first, except for the filter:
- Query filter on related posts to the current post in the loop. Check this screenshot hidden link
- Choose the menu order to get the same order as the backend.
- Add the lesson link inside the loop. In this view, I did not use a content template inside the view.

3. Add a WP Views widget inside the sidebar, and choose the first view. Check this screenshot hidden link
And voila: hidden link

Please note that this view will return results only for course pages. In chapter pages and lesson pages, you will get no results, check this screenshot: hidden link
You may want to customize/remove the "no results" message. Or you may want to conditionally display the view only for course pages. Let me know if you need help with it.

I hope this is clear enough to give you an idea on how to use the legacy views editor. Let me know if you have any questions.

[Alok Sharma]

Hello,

Thank you for setting up everything.

I can see that this is working as desired on the single Course page.

However, the moment, I navigate to the single Chapter or Lesson page, nothing is displayed in the sidebar. It is very important to display the course navigation down to the last level so that people browsing the site find it easy to navigate.

Also, it is important to display the current course name down to the last level so that the people are aware of which course they are reading.

I understand there might be some technical limitations, but then this is completely defeating the purpose.

There are basically two main reasons to go with a custom solution rather than going with a ready to use LMS plugin:

1. Cost factor. These LMS plugins are very costly, and I am not planning on doing a commercial website on courses. For that, I have to use the existing resources, i.e. Toolset.

2. I won't be able to take advantage of the Beaver Builder & Power Pack Add-ons for Beaver Builder to design the courses for these two specific plugins.

Do you think you can have a word with the developers to see if they can find any work around for this? I believe there must be some way to achieve this.

Thanks,

Alok

[Jamal]

With the current setup for the 1st view, it will return the results only in course pages, because it has the query filter on the post where this view is shown. When it is shown in a chapter or lesson page, or any other part of the site, it will not return results.

You can achieve what you want with some custom coding. Create a custom shortcode that will return the ID of the course if it is used in a course, chapter, or lesson page.
Then update the 1st view filter to be related to a post passed in a shortcode attribute and pass the shortcode that you have created in it.

Then, you should go to the sidebar, and remove the existing widget, and add a text widget inside of it. Then inside the text widget, use the "Fields&Views" button to include the view, and pass the shortcode that you have created in it.

I wanted to test this, but the custom code section in Toolset->Settings does not appear for me. Maybe my user does not have enough permissions, or that you have disabled this feature using a constant in a configuration file.
If you want me to test it please add FTP access in your next reply.

[Jamal]

Sure Alok, I'll do my best to explain in simple steps. If something not clear we can discuss it further.

First, we need to have a way to automatically get the Course wether we are in a course page, chapter page, or lesson page. For that, let's use the custom shortcode that Christian has suggested here https://toolset.com/forums/topic/query-filter-by-grandparent/#post-1213724

function get_grandparent_id_func( $atts )
{
  $a = shortcode_atts( array(
      'postid' => 0,
      'parentrel' => '',
      'grandparentrel' => ''
  ), $atts );
 
  $parent = toolset_get_related_post( $a['postid'], $a['parentrel']);
  $grandparent = toolset_get_related_post( $parent, $a['grandparentrel']);
 
  return $grandparent;
}
add_shortcode( 'get-grandparent-id', 'get_grandparent_id_func' );

We can test it in a Text widget on the sidebar, check this screenshot hidden link
And the results: hidden link

Once we can get the course ID, we need to modify the first view query filter to get the chapters that are related to the post passed in a shortcode attribute. Let's call this shortcode attribute "course". Check this screenshot hidden link

Then, we can include the view using a shortcode inside of the sidebar widget. Check this screenshot hidden link

[wpv-view name="course-chapters" course="[get-course-id]"]

And check the results hidden link

At this stage, we have a hierarchy of Course>Chapters>Lessons, but we don't have a way to distinguish the current page inside the view. We can use conditional shortcodes inside of the view's loops. Or a custom Javascript solution that will search for the item with the same URL as the current page and add a special class to it. Check this screenshot hidden link

jQuery(function($){
  var current = jQuery('.course-sidebar-menu li a[href="' + window.location.href + '"]');
  var menu_item = current.closest('li');
  menu_item.addClass('active')
});

And check its results: hidden link

I hope this gives you an idea of how to implement it.

Please note that the custom code is out of the scope of support. The provided code is as a reference, and won't be supported. If you want more customizations, consider hiring a developer.

[Alok Sharma]

Hi,

Thank you for the wonderful work. Really appreciate it.

From here onwards, I think I will be able to manage the rest.

I just need help with two things:

1. How to display the course name with link at all the times in the sidebar just above the chapter & lesson tree is displayed. I tried [wpv-post-link item="@course-chapter.parent"] but it didn't work. However, it displays only when I navigate to a chapter or lesson.

2. At the very bottom of the sidebar, "] is displaying. I can't figure out from where it is coming.

Thanks,

Alok

[Alok Sharma]

Hi,

In continuation to the above, there is one more thing that I forgot to mention.

3. The sidebar is displaying the child posts for both the courses whereas it should display for only the current course.

Thanks,

Alok

[Jamal]

1. You need to pass the course ID to the shortcode. Use the custom shortcode that we have created:

[wpv-post-link item="[get-course-id]"]

2. I forgot to mention that the custom shortcode needs to be registered by Toolset in Toolset->Settings->Frontend Content. Check this screenshot hidden link

3. Sorry, I am not sure to understand. The current view(s) displays the chapters and the lessons from the current course.
What do you mean, can you give an example:
- Go to URL ...
- I would like to have ...
- Instead, I get ...

[Alok Sharma]

My issue is resolved now. Thank you!

From here onwards, I will take over with managing the courses. I just couldn't be more thankful to you for helping me out with the solution. Really appreciate it.

Furthermost, I think this thread could be added as a case study so that people looking to build their own custom LMS can easily implement it using the step-by-step instructions.

Thanks,

Alok