Customizing My Courses tab on All courses (Course Directory)

Last updated on by

In this tip we will customize the “My Courses” tab on All courses page (i.e. Course Directory).
We will add course category on the items(courses) displayed in my courses tab.

Steps :

1. Install  and Activate Wplms-customizer Plugin.
2. Add this filter in wplms-customizer/wplms-customizer.php file.

add_filter('bp_course_single_item_view','custom_bp_course_single_item_view');

3. Add your custom function “custom_bp_course_single_item_view” in the same file below the filter.

function custom_bp_course_single_item_view($filter){
 
  $course_classes = apply_filters('bp_course_single_item','course_single_item',get_the_ID());
  ?>
  <li class="<?php echo $course_classes; ?>" itemscope itemtype="http://data-vocabulary.org/Review-aggregate">
      <div class="item-avatar" itemprop="photo">
        <?php bp_course_avatar(); ?>
      </div>
 
      <div class="item">
        <div class="item-title"  itemprop="itemreviewed"><?php bp_course_title(); if(get_post_status() != 'publish'){echo '<i> ( '.get_post_status().' ) </i>';} ?></div>
        <div class="item-meta"><?php
        bp_course_type();
        bp_course_meta();
        ?></div>
        <div class="item-desc"><?php bp_course_desc(); ?></div>
        <div class="item-credits">
          <?php bp_course_credits(); ?>
        </div>
        <div class="item-instructor">
          <?php bp_course_instructor(); ?>
        </div>
        <div class="item-action"><?php bp_course_action() ?></div>
        <?php do_action( 'bp_directory_course_item' ); ?>
 
      </div>
      <div class="clear"></div>
    </li>
    <?php
  return 1;
}

4. Add this Css to wplms-customizer/css/custom.css file.

.item-meta .star-rating {
  margin-left: 30px;
}
.course_single_item .item-meta a {
  font-size: 12px;
  text-transform: uppercase;
  font-weight: 600;
  position: relative;
  padding-left: 15px;
}
 
 
.course_single_item .item-meta a:before {
  content: "\e025";
  font-family: fonticon;
  font-size: 12px;
  color: #bbb;
  position: absolute;
  top: 2px;
  left: 0;
}

5. Don’t forget to make sure that your custom css and js files are being enqued to your site.

add_action('wp_enqueue_scripts','wplms_customizer_custom_cssjs');
 
 /**
 * Objective: Register & Enqueue your Custom scripts
 * Developer notes:
 * Hook you custom scripts required for the plugin here.
 */
function wplms_customizer_custom_cssjs(){
    wp_enqueue_style( 'wplms-customizer-css', plugins_url( 'css/custom.css' , __FILE__ ));
    wp_enqueue_script( 'wplms-customizer-js', plugins_url( 'js/custom.js' , __FILE__ ));
}

If your wplms-customizer.php file already have above code snippet you can simply disacard 5th step.

Now you can see that the course Categories are also being displayed in “My courses” tab.