CoursePress' Shortcode [course_list] Link

Hi guys!
How are you?

I'm using the CoursePress' shortcode [course_list] to generate a loop and show the courses. However, I need to add the course link (which is currently only in the title) to the whole box ( .course-list-item ) or at least for the image ( .course-thumbnail .course-featured-media ).

So, my question is: Which is the best way to do it?

If you need more information, just ask me.

Thank you in advance!

  • Nastia

    Hello Leandro , I hope all is well!

    Welcome to WPMU DEV forums.

    It is not possible to achieve out of the box with the CoursePress Pro and will require modification of the plugin' core files.

    I would like to add a note, that the course thumbnails are visible only with the following shorttcode:

    [course_list show_media="yes"]

    Usually we do not provide custom coding solutions, but I had a chat with a developer and he provided a quick fix for it.

    Please replace the class.shortcodes.php file from the path shown bellow with the one that is attached here

    /wp-content/plugins/coursepress/includes/classes/class.shortcodes.php

    Please note that this code will be lost after the plugin's update, so you will have to replace that file again.

    Just in case run a full backup of your site, so in case if something goes wrong, you can always restore it. You can run a full backup with the Snapshot plugin

    Let me know if you have any further questions!

    Cheers,
    Nastia

  • Leandro

    Hi Nastia!

    Thank you for your answer! Unfortunately, I can't use this fix because the project that I'm working will be replicated, however, your answer gave me an idea and I was able to manage an alternative solution.

    I installed a free plugin called Scripts n Styles and added the following CSS and Javascript direct in the page:

    .course-list-item-custom { float:left; margin-right:1%; overflow: hidden; position:relative; width:24%; }
    .course-title, .course-title a { display:block; width:100%; }
    .course-title { left:0px; margin:0; position:absolute; top:0px;  }
    .course-title a { background-color:rgba(0,0,0,0.5); color:#fff; padding-top:1.5em; text-align:center; }
    .course-title a { display:none; }
    .course-title:hover a { display:block; }
    .left-class-custom, .right-class-custom { display:none; }
    function linkThumbnail() {
    		try {
    			thumbnailPaddingTop = jQuery('.course-title a').css('padding-top').replace("px", "");
    			thumbnailHeight = jQuery('.course-thumbnail').height();
    			jQuery('.course-title').height(thumbnailHeight);
    			thumbnailHeight = thumbnailHeight - thumbnailPaddingTop
    			jQuery('.course-title a').height(thumbnailHeight);
    		} catch(error) {
    			console.log(error);
    		}
    	}
    
    	function addAnimation() {
    		jQuery('.course-title a').addClass('animated fadeIn');
    	}
    
    	function allFunctions() {
    		//insert functions onload here
    		linkThumbnail();
    		addAnimation();
    	}
    
    	if (window.addEventListener) {
    		window.addEventListener('load', function(event){
    			allFunctions();
    		}, false);
    	} else if (window.attachEvent)  {
    		window.attachEvent('onload', function(event){
    			allFunctions();
    		});
    	}

    Using the shortcode below:
    [course_list class="course-list-custom" course_class="course-list-item-custom" left_class="left-class-custom" right_class="right-class-custom" title_class show_media="yes" show_divider="no"]

    Mixed with some transition css effects in the theme child, I was able to do an "onhover effect".

    Thank you again for your time.

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.