CoursePress Appearance in non-native theme

Hi guys,

OK, so I have done my best to use CoursePress with my theme. A while back I made a feature request to easily implement the CoursePress elements in any theme, and still have my fingers crossed for that!

However, now I really need your help to get it working in my theme. I have been making do. Here are the main issues I have been having trouble with:
1. Discussion appearance was so unusable I ended up using the forum plugin, but it is not idea, would be nice to use it.
2. The Unit list looks great in the CoursePress theme, but doesn't really work in mine.
3. On the Course Details page, when you click Enroll, everything goes out of focus, but there are no pop-ups.
4. Last and definitely MOST important, since the last update, the button at the bottom of a page in a unit does not click, AND, I can't click Save and Exit anymore either.

I would really appreciate your help on this! I assume there is some CSS code I could add. The description of the plugin claims it should work with any theme, so please advise!

-dan

  • Patrick

    Hi there @Dan

    I hope you're well today!

    Are you using the CoursePress shortcodes to output the various data on your pages?

    Also, it would really help if we could see the pages you are referring to. :slight_smile:

    Can you provide links to those pages that can be seen and inspected when logged out? If being logged-in is required, please grant support access from your WPMU DEV Dashboard as described here:
    https://premium.wpmudev.org/manuals/wpmu-dev-dashboard-enabling-staff-login/

    We'd be happy to pop into your site to have a look. :slight_smile:

  • Dan

    Hi Patrick,

    Unfortunately, due to the lack of a training bundles option (also requested), I am using a membership plugin to accomplish what I need.

    I have granted you access. The site of interest is Bassett Biomechanics. Depending on what you are trying to see, you may need to use the Membership plugin to create yourself a user.

    In answer to your question, I have used shortcodes a bit, but the main problems are on pages, that as far as I can tell, I have to use, such as the units, discussion, course details (for enrollment).

    Thanks for the help!

    -dan

  • Michelle Shull

    Hi, Dan, sorry for the delay here.

    Support access has expired, but let's see if we can track this down anyway. The issue you describe here sound like javascript issues - perhaps there's a faulty script that is preventing our pop up and button from working as expected. Fortunately, script errors are pretty easy to find. In Chrome, right click anywhere on your page and choose "inspect element." A dev console will appear, and one of the tabs will say "console." If there are javascript errors, they'll be listed here. Usually, it's easy to track down the source, the file path to the javascript with errors will be listed next to the error.

    This should help us determine whether the errors are coming from your theme, or if they might be coming from a different plugin you're using.

    Do you mind sharing the name of your theme, so I can try to reproduce the issues you describe here on my own site?

    Thanks!

  • Dan

    Hello again!

    OK, so the errors were as follows:
    -Uncaught TypeError: undefined is not a function: coursepress-front.js?ver=1.2.4.7:32
    -Failed to load resource: the server responded with a status of 500 (Internal Server Error)

    My theme is Quasar, and it is a paid theme from Themeforest. However, I am also offering this to customers of mine on my WPMU site, and they will have their choice of themes. This is concerning because when I got the plugin, I understood it would work on any theme. Although this is technically true, it clearly is not working well on the first theme I have tried it on.

    As described above, the problems go far beyond the Enroll Now button. Please help solve all the issues ASAP, otherwise, I will have to ditch WPMUdev completely. I think you guys do good work, but if the main plugin I need does not do what it promises, I have to find another solution.

    Thanks!

  • Michelle Shull

    Dan! Hello, and thanks for the follow up here.

    Since I'm a latecomer to the thread, I still haven't seen the issue first hand. I'm subscribing to the thread, would you be willing to give us one more go at support access so I can see what you see here? Quasar isn't one of the themes we have in our library, so I'm unable to test on my own environment at this time.

    Your unit page we can definitely tweak, no worries there.
    The pop up registration form is getting blocked, but I think we can work around that.
    I'm pretty sure I can improve your discussion page, too.

    We do try test our products with as many of our competitors' products as we can, but, as you've seen, there are a lot of WordPress-related products created by a lot of different teams and developers - creating a universally frictionless experience with so many variables is probably always going to be a challenge for everyone building cool stuff for WordPress sites.

    Swinging back to your issue, I'm certainly not ready to give up on your theme and CoursePress playing nicely together, we just need to figure out which cogs in each are in need of tweaking here.

    Thanks, Dan!

  • Dan

    Hi Michelle!

    Thank you for joining the discussion. I absolutely understand the difficulty of making a universally frictionless experience. That is not a problem. Being a developer myself, but in a different field, that makes sense.

    So, you have been granted access.

    The site in question is BassettBiomechanics.traininglot.com. I do use a third party membership plugin, so if you want I can create a membership for you, or having access, I imagine you can do the same for yourself.

    Please help me quickly as yesterday I did receive a customer complaint. I would like this to be solved quickly to show the customer that I really am working on things. (the complaint was about the "Save Progress & Exit" button not being clickable.)

    Thank you for your help, and I am happy to work with you to solve the problem!

    -dan

  • Michelle Shull

    Heya, Dan!

    Okay, I've spent some time on your site, and narrowed the issue down to the jQuery .knob, which isn't loading at all for you. It's interfering with the pop up, and with the effect itself showing on your unit progress page. So, I got a copy of Quasar and I installed it. Interesting thing - I can see the sign up pop up, and it's not throwing that error.

    So, this means one of two things.
    1. I'm using the latest version of CoursePress (released today), there's a chance this fixed the issue.
    or
    2. It's not Quasar at all, but a plugin conflict. I don't see anything that stands out in your plugin list, but it may be worth a quick test (turn off all plugins except CoursePress) to see if that script error remains/the pop up loads.

    So, the good news is that Quasar and CoursePress work together! The less good news is that we still aren't quite sure what's causing this issue.

    On the unit archive page on my site, I'm also still not seeing the jQuery knob, and it doesn't look like it's trying to load, so I'm also not sure what's happening here.

    Step 1: Update CoursePress, see if that lets your registration popup appear.
    Step 2: If not, do a quick plugin check to make sure nothing is conflicting.
    Step 3: Report in.

    Thanks, Dan!

  • Dan

    Hi Michelle,

    Thanks for looking into this. Unfortunately, this has only highlighted how major a problem with CoursePress that this must be.

    1. I deactivated ALL plugins both on the individual site, and the network wide plugins. It never worked.
    2. I confirmed with ALL plugins activated as I want it works with the CoursePress theme.
    3. I tried with the Basata theme (I happened to have it installed on the network for another site), and that worked. Unfortunately, the unit page did not work, as the Save Progress & Exit link actually performed the task of a different link on the page. Also, for all CoursePress course pages, the discussion replies appear below as comments.
    4. This is the most alarming. I tried the Upfront theme developed by WPMUdev, assuming everything would work, since it's yours. Instead, the Enroll Now button wasn't even clickable. Once I did enroll with a different theme, the content didn't show up with either Fixer or Spirit, in fact it displayed with generic text like "Insert your unit title here", problem I never had with Quasar.

    One thing I have noticed for both of the popups that did work (CoursePress theme and Basata) it took a surprisingly long time, in fact I thought that it might not be working. Not sure if that helps in your troubleshooting, but thought it was worth mentioning.

    Please help solve this. I had a plan to sell sites with Upfront and CoursePress already activated, but this appears to be the worse combination yet.

    Thank you!

  • Vinod Dalvi

    Hi Dan,

    4. This is the most alarming. I tried the Upfront theme developed by WPMUdev, assuming everything would work, since it's yours. Instead, the Enroll Now button wasn't even clickable.

    I have tested it on my test site by deactivating all other plugins except CoursePress and using latest version of Upfront & Spirit themes, It worked fine without any issue.

    To further troubleshoot the issue, Would you mind if I access your site bassettbiomechanics.traininglot.com using FTP and did some testing? This might help get to the bottom of this faster. If this is ok, just send log in info through our secured contact form: https://premium.wpmudev.org/contact/
    - Choose "I have a different question"
    - Include my name in the subject "Vinod Dalvi"
    - Include the URL of this post in your message so that I may track this issue better
    - Include login information (Wordpress admin info username + password )
    - Include FTP Details

    Regards,
    Vinod Dalvi

  • Dan

    Hi Vinod,

    Thank you for looking into this. I have sent you an e-mail with the requested information.

    Since you are looking into this, and because it may be connected, this topic has not been solved either: https://premium.wpmudev.org/forums/topic/course-join-button-in-coursepress-pro-does-not-allow-to-enroll#post-819759

    I am not using the shortcode because of this, but it would be nice if it worked.

    Thanks!

    -dan

  • Vinod Dalvi

    Hi Dan,

    Thank you for sending the site details but it doesn't work for me.

    Could you please make sure it's correct?

    I have used your sent credentials on your sites bassettbiomechanics.traininglot.com/wp-admin and traininglot.com/wp-admin

    Also you have just sent WordPress admin details and not FTP details as requested, is it right?

    Since you are looking into this, and because it may be connected, this topic has not been solved either: https://premium.wpmudev.org/forums/topic/course-join-button-in-coursepress-pro-does-not-allow-to-enroll#post-819759

    I am not using the shortcode because of this, but it would be nice if it worked.

    To keep support requests seperate, let's resolve that issue on that thread and this issue on this thread parallely.

    Regards,
    Vinod Dalvi

  • Vinod Dalvi

    Hi Dan,

    Thank you for sending the FTP and site details as requested in my following reply.

    https://premium.wpmudev.org/forums/topic/coursepress-appearance-in-non-native-theme#post-836354

    I troubleshooted on your site and found the following coursepress js file is not getting added in the Coursepress pages in the front end resulting in producing JavaScript error message causing this issues.

    http://bassettbiomechanics.traininglot.com/wp-content/plugins/coursepress/js/jquery.knob.js

    The js file is getting included in the Coursepress pages on my test site.

    I tried to add this js file in your site explicitly by using the small plugin containing following code but for some unknown reason it didn't work on your site.

    wp_enqueue_script( 'coursepress-knob', WP_PLUGIN_URL . '/coursepress/js/jquery.knob.js' );

    This can be due to plugin/theme conflict on your site.

    You can just try on your development site using default WordPress theme like Twenty Fifteen and deactivating all other plugins as displayed in the following flowchart to know which theme/plugin is conflicting if any.

    https://premium.wpmudev.org/manuals/getting-support/

    Regards,
    Vinod Dalvi

  • Dan

    Hi Vinod,

    Thank you for getting back to me. I will troubleshoot as suggested. However, as I mentioned, the CoursePress Theme works fine, even with all the other plugins active. This tells me that there is not a conflict. Also, I managed to get the pop-up to work when using the shortcode to enroll, rather than the Details page.

    I do not think the problem is what you said, as if it were my site, or plugins, it would never work, but it does sometimes.

    Can you please look a bit further as to what is going on? As I think the problem is much bigger.

    Thanks!

    -dan

  • Michael Bissett

    Hey @Dan, my apologies for the delay here!

    I was able to get the knobs to show up properly by first importing the archive-unit.php template from the default CoursePress theme, as well as inserting the following into your child theme's style.css:

    .unit-archive-single .tooltip {
    display: block;
    position: relative;
    z-index: 999;
    font-weight: bold;
    font-size: initial;
    line-height: initial;
    padding: initial;
    max-width: initial;
    left: initial;
    width: initial;
    color: white;
    background: none;
    -webkit-border-radius: initial;
    border-radius: initial;
    }

    Could you confirm that they're showing up properly on your end please? :slight_smile:

    Kind Regards,
    Michael

  • Vinod Dalvi

    Hi Dan,

    I would like this to be solved quickly to show the customer that I really am working on things. (the complaint was about the "Save Progress & Exit" button not being clickable.)

    I could make the "Save Progress & Exit" button clickable by adding the following CSS code in the style.css file of your child theme.

    .shadow-divider-up {
    z-index: -1;
    }

    Regarding the "Enroll Pop Up" issue as described in the following reply the coursepress plugin js file jquery.knob.js is not getting loaded in some courses pages resulting in generating the javascript error message as displayed in the attached screenshots.

    https://premium.wpmudev.org/forums/topic/coursepress-appearance-in-non-native-theme#post-839560

    I think check the plugin/theme conflict will help us to resolve this issue.

    Regards,
    Vinod Dalvi

  • Dan

    Hi guys,

    So, first of all, thanks for the assistance, the more pressing issues have been solved with your help!

    The Save Progress and Exit issue happened to be caused by using certain shortcodes in the body of the text for a unit. I found a way around that using links instead of shortcodes for my purposes, and it all worked out!

    The other issue, which was less pressing, but now I am getting back to is the missing pop up button.

    It is clear, as Vinod pointed out, that it is caused by the jquery.knob.js not getting loaded. Unfortunately, it appears to be some kind of conflict with the theme, as deactivating all plugins does not solve it, and switching to the CP theme works fine.

    Clearly, I am attached to the theme, so switching themes is not an option. So, I have a few questions:

    1. I have asked elsewhere on WPMUdev, but perhaps you can help better here. There is a shortcode for an Course Joint Button that would be perfect if it worked, as simply placing it on a page would hopefully solve the entire problem.
    According to the description: [course_join_button]
    Shows the Join/Signup/Enroll button for the course. What it displays is dependent on the course settings and the user’s status/enrollment.
    But, what it actually does is just show "Details" and takes you to the Course Details page, regardless of user status. A colleague of yours told me this is the correct behavior, but it really doesn't make sense to me based on the above description (https://premium.wpmudev.org/forums/topic/course-join-button-in-coursepress-pro-does-not-allow-to-enroll#post-837329)

    2. Is there some other way around this problem?

    Thanks for the help guys!

    -dan

  • Patrick

    Hey there @Dan

    I hope you're having a great day!

    The behavior of the button generated by the course_join_button shortcode does indeed change according to user status. Below are screenshots of what you should experience depending on whether you are logged-out, logged-in but not yet enrolled, and logged-in & enrolled.

    When logged-in and enrolled in the course, that button will redirect to the course details page where the user can review the course if need be, and click the "Start Learning" button to begin/resume the course.

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.