Footer and Class Customization for Coursepress Pro

Hey, I'm taking another swing at building up an online course website... The last time really didn't go over well, but I'm hoping the bugs preventing me from making use of the Coursepress Pro plugin have for the most part been fixed now.

I'm trying to do this with a third-party theme, and not the Coursepress Pro theme (nor Upfront/other WPMU themes)

So far I've figured out how to make use of the Shortcodes, to replicate most of the automatic/default pages in Coursepress Pro. A couple things are standing in the way:

1) For some reason, the Instructor pages do not add the footer. This is creating spacing issues (Picture 1). Now I thought that most default Coursepress pages pull the 'post archive' template. My theme actually has a customization to define 'archive/post' template, and when double checking through an archived Category search, the footer is indeed there. The footer is also present on the default Course Detail pages, so I'm a little confused on if the Instructor pages are classified as something else? (Picture 2)

I would prefer to add the footer without adding a 'get' function to my theme's function.php file - or if it has to be a function, a function that would ONLY apply to Coursepress Pro instructor pages (as this is part of a multi-site, and it shares the theme with other sub-sites / I don't want to do a child theme).

2) Besides the footer, the only other problem I have at this stage is with the buttons. I'm wondering if there's a way through CSS that I can force a class change? A sample button that's been re-formatted can be seen in Picture 2 (blue/green gradient). Some examples:

<button class=&quot;apply-button apply-button-details &quot; data-link=&quot;http://www.example.com/learn/course/ops/&quot;>Details</button>

Works but it doesn't look very good (Picture 3). After doing some button creation/testing, I found that this class changes it to something more inline with what it should be:

<button class="btn-shortcode dt-btn-m dt-btn default-btn-color default-btn-hover-color default-btn-bg-color default-btn-bg-hover-color" data-link="http://www.example.com/learn/wp-admin/admin.php?page=course_details&course_id=20">Manage Course</button>

That being said, when I tried it with a Div class

<div class=&quot;featured-course-link&quot;> <button data-link=&quot;http://www.lookingglasscommunity.com/learn/course/online-peer-support/&quot;>Find out more.</button></div>

Converted to

<div class=&quot;btn-shortcode dt-btn-m dt-btn default-btn-color default-btn-hover-color default-btn-bg-color default-btn-bg-hover-color&quot;> <button data-link=&quot;http://www.lookingglasscommunity.com/learn/course/ops/&quot;>Find out more.</button> </div>

It didn't work changing the div class. (Picture 4)

<div class=&quot;featured-course-link&quot;><button class=&quot;btn-shortcode dt-btn-m dt-btn default-btn-color default-btn-hover-color default-btn-bg-color default-btn-bg-hover-color&quot; data-link=&quot;http://www.lookingglasscommunity.com/learn/course/online-peer-support/&quot;>Find out more.</button></div>

Did work correctly though. So I need a way to change button with a class, as well as a way to add this class to Coursepress buttons that don't have a class.

Sorry for the long post, tried to be as descriptive as possible.

  • Kasia Swiderska

    Hello Daniel,

    The footer is also present on the default Course Detail pages, so I'm a little confused on if the Instructor pages are classified as something else? (Picture 2)

    I'm testing CoursePress on default WordPress theme and footer for Instructor page is there - however that page is virtual page that uses default page.php template. So you would need to see how your default page.php looks like - does it have a footer?
    You can check what template is used by checking body class of the instructor pages in page source.

    However - there can be another explanation - there could be some type of error that cut part of the page and footer is not displayed. That can be also check in source of the page - by checking if body and html tags are closed (basically if there is html code missing).

    I'm wondering if there's a way through CSS that I can force a class change?

    No, CSS cannot change class - jQuery (JavaScript) script can do that. With jQuery snippet you can remove classes and add classes to elements:
    https://api.jquery.com/addclass/
    https://api.jquery.com/removeclass/

    So sample script that would add classes to button that are already having classes would look like that

    jQuery('button.apply-button.apply-button-details').addClass('btn-shortcode dt-btn-m dt-btn default-btn-color default-btn-hover-color default-btn-bg-color default-btn-bg-hover-color');

    To add that type of script to WP pages can be done with action wp_footer():

    add_action('wp_footer','wpmudev_courses_buttons');
    
    function wpmudev_courses_buttons() {
    
    	?>
    <script>
    	jQuery( document ).ready(function() {
      	jQuery('button.apply-button.apply-button-details').addClass('btn-shortcode dt-btn-m dt-btn default-btn-color default-btn-hover-color default-btn-bg-color default-btn-bg-hover-color');
    });
    </script>
    	<?php
    }

    it can be added to functions.php of the theme or as MU plugin http://premium.wpmudev.org/manuals/wpmu-manual-2/using-mu-plugins/

    You can also modify that php function with conditional tags https://codex.wordpress.org/Conditional_Tags - so it will add script on specific pages.
    Another way to run script only on certain pages is to use there condition hasClass https://api.jquery.com/hasClass/ - so it can check if there are specific classes in body tag.

    Let me know if you have more questions.

    kind regards,
    Kasia

  • Daniel

    Hi Kasia,

    Thank-you very much for the help. For the footer - I realized the part of the problem was that my theme has both a 'footer' and a 'bottom-bar'. But in the code, the footer is actually a 'bottom widget area', and the 'bottom-bar' is really the 'footer' (in regards to WP).

    I struggled a lot with it, but when investigating the files from the Coursepress Pro compatible Theme, I found the .php file that the instructor page pulls from BEFORE reverting to default. For anyone wanting to customize the Instructor page on with their own theme, the file name is single-instructor.php (can be found in the Coursepress Pro Theme files).

    So once I had this file, I simply removed the footer background from the instructor page, so no overlap. So not really a 'fix', but it works. (I haven't test it with anything actually in the footer, so I may encounter problems later). But good for now!

    In terms of the button code - it took some trial and error, but instead of adding more classes to specific button classes, I realized that I could simply change it for ALL classes.

    I am now using:

    add_action('wp_footer','wpmudev_courses_buttons');

    function wpmudev_courses_buttons() {

    ?>
    <script>
    jQuery( document ).ready(function() {
    jQuery('button').addClass('btn-shortcode dt-btn-m dt-btn default-btn-color default-btn-hover-color default-btn-bg-color default-btn-bg-hover-color');
    });
    </script>
    <?php
    }

    And it's working great!

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.