GPP / Child Theme / Stylesheet overwrite

This topic has 22 replies, 3 voices, and was last updated 1 year, 5 months ago by Jan.

Viewing 15 posts - 1 through 15 (of 23 total)

1 2 →

Author

Posts
July 14, 2021 at 2:21 pm #1855994
Jan
Hi David,

I’m currently extending the membership section of my site with a training course. The add-on I’m using for this is provided by MemberPress. During the configuration of the plugin I realized that styles for headlines, buttons etc. are not being pulled from the GPP child theme.

The support team from MemberPress admitted that they are using a separate stylesheet for their MP courses add-on. At my request they offered a custom footer.php file for the plugin with the following content…
```
<?php
/**
 * This template can be overidden in the theme
 */
if ( ! defined( 'ABSPATH' ) ) {
  exit; // Exit if accessed directly.
}
use memberpress\courses as base; ?>
  <footer class="site-footer section is-clearfix">
    <?php do_action(base\SLUG_KEY . '_courses_footer'); ?>
  </footer>
</body>

</html>
```
…and asked me to inject the following code snipped into the function.php of my GPP child theme:

add_action('mpcs_courses_footer', function() { wp_footer(); });

Unfortunately the “overwrite” is not working.

Can you spot an obvious flaw in the suggested procedure which I can play back to the MP support team/ fix myself?

Many thanks in advance.

Beste regards,
Jan
July 15, 2021 at 2:09 am #1856404

Elvin
Staff
Customer Support

Hi Jan,

Can you try and see what happens if you change opening and closing <footer> element with <div>?

Let us know how it goes.

July 15, 2021 at 4:25 am #1856557
Jan
Hi Elvin,

many thanks. I changed the elements as follows…
```
<?php
/**
 * This template can be overidden in the theme
 */
if ( ! defined( 'ABSPATH' ) ) {
  exit; // Exit if accessed directly.
}
use memberpress\courses as base; ?>
  <div class="site-footer section is-clearfix">
    <?php do_action(base\SLUG_KEY . '_courses_footer'); ?>
  </div>
</body>

</html>
```
…in the respective footer.php file of the course plugin (folder: wp-content/plugins/memberpress-courses/app/views/classroom/ –> suggested by MP support).

Then I cleared the server cache and opened the course page in a private browser tab. The outcome did not change, as far as I can tell. When debugging the button with the developer tool (see screenshot) styles still seem to be pulled from a “user agent stylesheet”.

Any thoughts?

Best regards,
Jan
July 15, 2021 at 9:02 pm #1857522

Elvin
Staff
Customer Support

Still trying to wrap my head around this.

To clarify: The goal is to apply a custom footer from MemberPress or is it to add it to GeneratePress’ default footer?

As for the stylings, I’m not sure if this is the fix for this. Normally stylesheets are loaded on the <head> side of the site (unless the style comes from a script hooked to the footer).

The php code basically does “create a hook named ____” inside the <footer>. And then the add_action code basically says to output wp_footer() function here.

But it’s quite hard to know what to do as I’m not exactly sure what’s the expected behavior. Can you explain a bit more on what’s supposed to show on the footer? Is it supposed to load a script from MemberPress?

If so, I don’t see it at all – https://share.getcloudapp.com/lluNpvlm

Then I cleared the server cache and opened the course page in a private browser tab. The outcome did not change, as far as I can tell. When debugging the button with the developer tool (see screenshot) styles still seem to be pulled from a “user agent stylesheet”.

We don’t know the plugin well enough to confirm if this is a default styling, unfortunately. It seems like it is though because if you go up 1 ancestor on the DOM, you can see that it’s parent (chained-quiz-action) is actually being styled by classroom.css which is MemberPress’ stylesheet file.

July 16, 2021 at 1:25 am #1857685

Jan

Many thanks for explaining the logic behind the styling.

Expected behavior: deactivate or overwrite the classroom.css with the default styles of my GP theme (as per Customizer settings – colors, fonts etc).

I have create a test page and copied the container from the course page (see A – Quizzes) over to a regular page. This will give you a clue on how the course page needs to look like after the desired override works.

Based on what you are saying I sense that we need to move the “override” php-code snipped from the footer of the classroom into it’s header. Rather than manipulating the footer file manually, we could use an Element Hook (wp-head, display rule = classroom pages) to achieve the same.

Any thoughts?

July 16, 2021 at 7:47 pm #1858609

Tom
Lead Developer
Lead Developer

Hi there,

The issue I’m seeing is that none of the theme CSS files are being added to that page. That means you won’t get any of the theme styling for things like buttons.

Is that intentional on the part of the plugin? If so, I would simply ask how to disable that part of the plugin so the theme CSS files are able to load where they’re supposed to.

The function/template they provided doesn’t seem to have anything to do with the styling issue you’re seeing.

Let us know 🙂

July 17, 2021 at 9:06 am #1859197

Jan

Hi Tom,

thanks for sharing your view. I‘ll pass that on and ask for guidance on how to enable the loading of the theme‘s CSS files.

Beat regards,
Jan

July 17, 2021 at 8:38 pm #1859512

Tom
Lead Developer
Lead Developer

No problem! 🙂

July 19, 2021 at 3:57 am #1860791
Jan
Hi Tom,

I’m really sorry for the back and forth on this. The feedback I received from the plugin author states as follows:

MemberPress Courses in Classroom mode has custom header and footer. It doesn’t enqueue styles from theme or plugins that are enqueued in the footer. However, most of the time, styles are being enqueued in the header, and the wp-content/plugins/memberpress-courses/app/views/classroom/courses_header.php file contains wp_head() function call. That means, if your theme author enqueues styles in the header, they should be loaded. If that doesn’t work, you can override this file and insert the link to your styles in your custom template.

My take is they are not blocking our theme CSS files from being loaded.

To speed things up I have added a copy of the courses_header.php below:
```
<?php
/**
 * This template can be overidden in the theme
 */
if ( ! defined( 'ABSPATH' ) ) {
  exit; // Exit if accessed directly.
}
use memberpress\courses\helpers as helpers;
use memberpress\courses as base;
$options = \get_option('mpcs-options');
$logo = wp_get_attachment_url(helpers\Options::val($options,'classroom-logo'));

?>
<!DOCTYPE html>
<html <?php language_attributes(); ?>>

<head>
  <meta charset="<?php bloginfo( 'charset' ); ?>">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="profile" href="https://gmpg.org/xfn/11">

  <?php wp_head(); ?>
  <?php global $post; ?>
</head>

<body <?php body_class($classes); ?>>

<header id="mpcs-navbar" class="navbar">
  <?php do_action(base\SLUG_KEY . '_classroom_start_header'); ?>

  
  <section class="navbar-section">
    <a href="<?php echo $back_url ?>" class="btn nav-back"><i class="mpcs-angle-circled-left"></i></a>
    <a href="<?php echo esc_url(home_url()) ?>" class="navbar-brand site-branding">
      <?php
        echo ($logo) ? '<img class="img-responsive" src="'.esc_url($logo).'?>" />' : '<span>'.get_bloginfo( 'name' ).'</span>'
      ?>
    </a>
  </section>

  
  <?php
    if(helpers\Lessons::is_a_lesson($post)){
      echo helpers\Lessons::display_lesson_buttons($post);
    }
  ?>

  <?php
    if( helpers\Courses::is_a_course($post) || ( helpers\Courses::is_course_archive() ) ){ ?>
      <section class="navbar-section">
        <?php
        wp_nav_menu( array(
          'menu' => 'MemberPress Classroom',
          'container' => false,
          'menu_class' => 'mpcs-nav-menu hide-sm'
        ) );
        ?>

        <div class="mpcs-nav-menu-mobile dropdown dropdown-right show-sm">

          <?php
          $menu_args = array(
            'menu' => 'MemberPress Classroom',
            'container' => false,
            'menu_class' => 'menu',
            'device' => 'small',
          );

          if(false == wp_nav_menu(array_merge($menu_args, array('echo'=>'false')))){ ?>
            <a class="btn dropdown-toggle">
              <i class="mpcs-ellipsis"></i>
            </a>
          <?php }
          wp_nav_menu( $menu_args);
          ?>
        </div>

        <?php if( \MeprUtils::is_logged_in_and_an_admin() || isset($_GET['preview']) ){ ?>
          <div class="dropdown hide-sm">
            <a class="btn dropdown-toggle">
              <?php esc_html_e("Preview as", "memberpress-courses") ?> <i class="mpcs-down-dir"></i>
            </a>
            
            <ul class="menu">
              <li><a href="<?php echo esc_url_raw($loggedin_url) ?>"><?php esc_html_e("Logged in", "memberpress-courses") ?></a></li>
              <li><a href="<?php echo esc_url($loggedout_url) ?>"><?php esc_html_e("Logged out", "memberpress-courses") ?></a></li>
              <?php do_action(base\SLUG_KEY . '_classroom_preview_menu'); ?>
            </ul>
          </div>
        <?php } ?>

        <?php if( \MeprUtils::is_user_logged_in() ){ ?>
          <div class="dropdown dropdown-right has-image">
            <a class="btn dropdown-toggle">
              <?php $user_id = MeprUtils::get_current_user_id(); ?>
              <figure class="figure">
                <img class="img-responsive s-circle" src="<?php echo esc_url( get_avatar_url( $user_id ) ); ?>">
              </figure>
            </a>
            
            <ul class="menu">
              <li><a href="<?php echo $account_url ?>"><?php esc_html_e("Account", "memberpress-courses") ?></a></li>
              <li><a href="<?php echo $mycourses_url ?>"><?php esc_html_e("My Courses", "memberpress-courses") ?></a></li>
              <?php if(\MeprUtils::is_mepr_admin()) { ?>
                <li><a href="<?php echo get_dashboard_url() ?>" target="_blank"><?php esc_html_e("WP Dashboard", "memberpress-courses") ?></a></li>
              <?php } ?>
              <li><a href="<?php echo $logout_url ?>"><?php esc_html_e("Logout", "memberpress-courses") ?></a></li>
              <?php do_action(base\SLUG_KEY . '_classroom_user_menu'); ?>
            </ul>
          </div>
        <?php } ?>

        <a class="btn sidebar-open show-sm">
          <i class="mpcs-th-list"></i>
        </a>
      </section>
      <?php
    }
  ?>
  <?php do_action(base\SLUG_KEY . '_classroom_end_header'); ?>
</header>
```
I hope this helps in understanding why the theme CSS files are not being loaded / tells us how to modify the header file?

Any advice is much appreciated.

Kind regards,
Jan
July 19, 2021 at 7:44 pm #1861891

Tom
Lead Developer
Lead Developer

Hi there,

All of our CSS uses the wp_enqueue_scripts hook as per WordPress standards. This means that it should be working fine as long as wp_head() exists in the template as you’ve shown.

I wonder if there’s something else removing the GP styles? Have you tried deactivating your other plugins one by one to see if there’s a conflict somewhere else?

Let me know 🙂

July 21, 2021 at 5:08 pm #1865452

Jan

Hi Tom,

many thanks for sharing your view. I have gone through the exercise of deactivating all plugins / non-standard themes in a staging environment about a week ago. Back then this was suggested by the MemberPress team also. Last time with no success. I’m more than happy to give this another try. Prior to do so I’ll reset the courses-footer.php file and remove the filter from the function.php of the GP child theme.

Please apologize for this silly question, but how do I recognize (in developer tool) a css file of my GP theme? When debugging the home page there are three css files listed (see screenshot). Unfortunately non of which carries a “GP” in the file name ;-(

Any advise is much appreciated.

Best regards,
Jan

July 21, 2021 at 7:14 pm #1865533

Elvin
Staff
Customer Support

Hi Jan,

You can inspect the page. (make sure all caching is disabled before inspecting)

You can see on the page source which stylesheets are being loaded on the network tab. Here’s an example screenshot – https://share.getcloudapp.com/7KuoKnLp

You hover the mouse pointer on the filename and it’ll show the file path/URL.

On the URL, if you see themes/generatepress or /plugins/gp-premium. That’s from either GP (theme) or GP Premium(plugin).

As for enqueuing/dequeuing. You can ask the handles of the stylesheets you want to dequeue/enqueue.

July 21, 2021 at 11:58 pm #1865747

Jan

This is very helpful, Elvin.

I’ll let you know how it goes.

Regards,
Jan

July 22, 2021 at 12:56 am #1865843

Elvin
Staff
Customer Support

More about this here –
https://generatepress.com/forums/topic/have-me-function-to-remove-css-and-javascript/#post-1608711

I remember listing the handles on the forums before but I can’t seem to find it. I’ll try to go back to this topic if if/when I find it.

No problem. 😀

December 3, 2021 at 2:29 pm #2037696
Jan
Hi Tom,

hopefully this reply from the MemberPress support will help in getting the styles of the child theme activated for on the MP course pages:
If you need to enqueue some css file instead of custom CSS you’d need to add this code to new Snippet:
```
add_action( 'wp_enqueue_scripts', 'mepr_courses_enqueues', 110 );
function mepr_courses_enqueues() {
// Only enqueue style on lesson and course pages
if( is_singular( array( 'mpcs-lesson', 'mpcs-course' ) ) ) {
wp_enqueue_style( 'astra-theme-css', get_template_directory_uri() . '/assets/css/minified/frontend.min.css' );
}
}
```
and replace the 5th line with your style label and path to your CSS file.
How do you amend line 5 of the PHP in order to point to the stylesheet of my GP child theme?

Thanks,
Jan
Author

Posts

Viewing 15 posts - 1 through 15 (of 23 total)

1 2 →

You must be logged in to reply to this topic.

[Resolved] GPP / Child Theme / Stylesheet overwrite

Popular Articles

Start building better websites today.