WordPress LMS Reviews & Tutorials

LDX Design

How to Prevent LearnDash Assets From Loading on Non-LearnDash Pages

Affiliate Disclosure: We may be compensated if you use our links to make a purchase. We are extremely selective in who we partner with & only recommend products we believe in. Our affiliate relationships do not influence our recommendations.

By default, LearnDash loads all of its CSS files on every single page of your WordPress site. But many of your pages don’t include any LearnDash elements, and therefore don’t need this CSS.

This article will explore a few different ways to conditionally load LearnDash styles only on the pages that need it.

Premium Solution

Perfmatters is a wonderful performance & optimization plugin created by my colleague & friend, Brian Jackson. Not only does it allow you to manage CSS stylesheets & JavaScript files on a page-by-page & post type-by-post type basis, but it includes over 50 other performance enhancements for your entire WordPress site.

If you combine it with WP Rocket, the ultimate WordPress performance & caching plugin, you have the 1-2 combo that will launch your site into warp speed.

The Script Manager in Perfmatters is a game-changer, and will let you manage both CSS and JS files for all aspects of LearnDash, as well as any other plugin you’re using that might be irresponsibly loading styles or scripts on pages that it shouldn’t be.

Sponsored


Uncanny Owl has been making the best LearnDash plugins since the day LearnDash was born. Their LearnDash Toolkit is used on over 30,000 sites and adds 20+ features specifically for LearnDash. They also sell the popular plugins:
Uncanny Groups - group/corporate sales, group reporting & more.
Tin Canny Reporting - one of the best reporting plugins for LearnDash
Uncanny Automator - automate LearnDash & connect with 150+ WordPress plugins & third-party services

The plugin costs $24.95 →

Perfmatters Script Manager example

How to Use the Perfmatters Script Manager

The basic strategy here is to remove the LearnDash CSS & JavaScript files from all the pages that don’t need it. Obviously, you’ll want to continue loading LearnDash assets for course, lesson, topic, quiz, assignment, essay and group post types, as well as any pages where you use LearnDash shortcodes (i.e. LearnDash Profile, Course Grid, etc.).

Free – Use a Plugin

The Asset CleanUp plugin works in a similar way to Perfmatters’ Script Manager. There is a free version, as well as a premium upgrade available for $39. I haven’t used Asset CleanUp specifically for cleaning up LearnDash scripts and styles, so I can’t say whether the free version will do everything you need.

Example of Asset CleanUp's interface

Example of Asset CleanUp’s interface

The big downside I see with Asset CleanUp is its interface. To me, it’s not that well laid out, and can be difficult to navigate, especially for beginners. But if you’re on a really tight budget, and don’t like to mess with code, it might be worth a look.

The strategy is the same as with Perfmatters—disable the loading of LearnDash styles & scripts on the pages that don’t need them.

Sponsored


Rapyd just launched the fastest BuddyBoss, LearnDash & WordPress LMS hosting on the planet. Get 25% OFF with their early bird discount and lock-in up to 2 years of discounted pricing. From the creators of BuddyBoss.

Get 25% OFF Rapyd Today →

Free – Use Code

If you must go the free route, I’d probably recommend this method, which utilizes some custom code, added via the Code Snippets plugin. You could also add this code to the functions.php file of your child theme (if you’re using one), but I find Code Snippets to be easier to manage and less likely to bring your site down if you make a mistake.

  1. Install & activate “Code Snippets” from your WordPress plugins page
  2. Navigate to Snippets > Add New in the left sidebar
  3. Give your snippet a name. Something like “Dequeue LearnDash Styles”.
  4. Paste the following code snippet into the Code area (I’ll provide a few different examples below)
  5. Choose the Only run on site front-end option
  6. Click the Save Changes and Activate button

I’ll explain each piece of code below, and then include a final code snippet you can copy/paste. Please keep in mind, there are a few different ways to do this, depending on how you want to approach it. That’s why it’s important to understand the process, and what each piece of code is doing.

IMPORTANT
This solution is dependent on your specific setup and needs to be customized. You can’t simply copy/paste the code. You’ll need to customize it to include the specific pages on your site where you’re using LearnDash shortcodes, blocks or widgets.

Dequeue LearnDash Styles

First, we’re going to remove all LearnDash CSS files from our site entirely.

To remove LearnDash CSS stylesheets, we use WordPress’ wp_dequeue_style() function. I’ll show you how it’s used below, along with a full list of CSS files that LearnDash adds to your site.

// Latest stylesheets as of LearnDash 3.5
wp_dequeue_style( 'learndash-front' );
wp_dequeue_style( 'learndash_quiz_front_css' );
wp_dequeue_style( 'jquery-dropdown-css' );
// LearnDash course grid stylesheets
wp_dequeue_style( 'learndash_course_grid_bootstrap' );
wp_dequeue_style( 'learndash_course_grid_css' );
// LearnDash Achievements add-on style
wp_dequeue_style( 'ld-achievements-style' );
// Deprecated: Were used in previous versions of LearnDash
wp_dequeue_style( 'learndash_style' );
wp_dequeue_style( 'sfwd_front_css' );
wp_dequeue_style( 'learndash_pager_css' );
wp_dequeue_style( 'learndash_template_style_css' );
wp_dequeue_style( 'learndash-blocks' );

I won’t go into detail about what each of these stylesheets does. I’m confident you can figure out most of them.

Third-party LearnDash plugins might add additional stylesheets. For example, our Design Upgrade Pro plugin adds 1 CSS file, which can be removed with this line:

wp_dequeue_style( 'ldx-design-upgrade-learndash' );

Add Styles Back, Only for Specific Pages

Now it’s time to add these styles back, but only to specific sections or pages of your site. To do that, we’re going to use a PHP if statement, along with WordPress’ is_singular() and is_page() functions. And instead of wp_dequeue_style(), we’re going to use wp_enqueue_style(), which adds styles to the page (as opposed to removing them).

Sponsored


Uncanny Owl has been making the best LearnDash plugins since the day LearnDash was born. Their LearnDash Toolkit is used on over 30,000 sites and adds 20+ features specifically for LearnDash. They also sell the popular plugins:
Uncanny Groups - group/corporate sales, group reporting & more.
Tin Canny Reporting - one of the best reporting plugins for LearnDash
Uncanny Automator - automate LearnDash & connect with 150+ WordPress plugins & third-party services

Note: This example just includes the core LearnDash CSS files and the Design Upgrade for LearnDash CSS. If you are using the course grid, achievements add-on, or any other styles, be sure to include them as well.

if( is_singular( array( 'sfwd-courses', 'sfwd-lessons', 'sfwd-topic', 'sfwd-quiz', 'sfwd-assignment' ) ) ) :

	// Add Styles Back In
	wp_enqueue_style( 'learndash-front' );
	wp_enqueue_style( 'learndash_quiz_front_css' );
	wp_enqueue_style( 'jquery-dropdown-css' );
	// Design Upgrade CSS
	wp_enqueue_style( 'ldx-design-upgrade-learndash' );

endif;

The is_singular() function checks the post types you define, and looks for all pages that are singular versions of that post type. We’re passing all the common LearnDash post types into this function (courses, lessons, topics, quizzes & assignments).

WordPress will check to see if the page is a singular version of a course, or a single lesson, single topic, etc. If yes, it will add back in whatever CSS stylesheets you tell it to. Our example adds back in ALL stylesheets, but you can pick & choose which ones you want.

Profile, Course Grid & Other Pages

That takes care of all LearnDash pages, but what about the custom pages you’ve created using LearnDash shortcodes or blocks? You’ll need some of these styles so that your shortcodes/blocks don’t appear broken. Here’s where the is_page() function comes into play.

The is_page() function can check an unlimited number of individual pages based on the page ID. It looks like this:

is_page( array( 2,58 ) )

This would check for pages with the IDs of 2 and 58.

How do I find my page ID? You can follow the exact same steps as outlined in our How to Find the Course ID article.

If you only needed to include a single page:

is_page( 2 )

If you need to include more than two pages, separate each page ID with a comma, but make sure there is no comma after the last one.

is_page( array( 1,2,3,4,5,6,7 ) )

So now, your code would look like this.

if( is_singular( array( 'sfwd-courses', 'sfwd-lessons', 'sfwd-topic', 'sfwd-quiz', 'sfwd-assignment' ) ) || is_page( array( 2,58 ) ) ) :

	// Add Styles Back In
	wp_enqueue_style( 'learndash-front' );
	wp_enqueue_style( 'learndash_quiz_front_css' );
	wp_enqueue_style( 'jquery-dropdown-css' );
	// Design Upgrade CSS
	wp_enqueue_style( 'ldx-design-upgrade-learndash' );

endif;

Final Step: Run the Code

The final step is to actually tell WordPress to run all of this code. We do that with the wp_enqueue_scripts action hook. The complete code looks like this:

function ldx_pro_custom_enqueue() {

	// Remove Default LearnDash Styles
	wp_dequeue_style( 'learndash-front' );
	wp_dequeue_style( 'learndash_quiz_front_css' );
	wp_dequeue_style( 'jquery-dropdown-css' );
	// Remove Design Upgrade CSS
	wp_dequeue_style( 'ldx-design-upgrade-learndash' );
  
	if( is_singular( array( 'sfwd-courses', 'sfwd-lessons', 'sfwd-topic', 'sfwd-quiz', 'sfwd-assignment' ) ) || is_page( array( 2,58 ) ) ) :

		// Add Styles Back In
		wp_enqueue_style( 'learndash-front' );
		wp_enqueue_style( 'learndash_quiz_front_css' );
		wp_enqueue_style( 'jquery-dropdown-css' );
		// Design Upgrade CSS
		wp_enqueue_style( 'ldx-design-upgrade-learndash' );

	endif;
}
add_action( 'wp_enqueue_scripts', 'ldx_pro_custom_enqueue', 30 );

My bottom line recommendations…

If you’re not technical, spend the money on Perfmatters. It’s 100% worth it.

If you’re comfortable with minor WordPress code customizations, try the custom code option using Code Snippets.

Sponsor

Finally Revealed...

NEW breakthrough solution allows you to IMMEDIATELY GROW student engagement and revenue per student by creating a state of the art mobile application in UNDER 60 MINUTES without ANY coding knowledge!

5 out of 5 stars

Proven and tested by over 1,000 LearnDash customers. Get your LearnDash Mobile App →

Previous

Course Pagination vs. All Lessons on One Page: Which is Best?

Next

Design Upgrade for WisdmLabs Ratings, Reviews & Feedback for LearnDash

19 Comments

  1. Lucas

    Hello, how are you?

    I write here because I can’t find anything about it anywhere else:

    How do I create a learndash “edit profile” page?

    I have the option on my page, I would like to keep it but the option does not lead to any page.

    Thank you very much if you can help me.

    • LearnDash doesn’t manage a user’s profile info. That’s managed by either WordPress itself, or a combination of WordPress and whatever ecommerce/membership plugin you’re using.

      How it gets displayed on a page can differ, but there is usually either a shortcode and/or a Gutenberg block that will insert an “edit profile” form on your page. Consult the documentation for the ecommerce plugin you’re using.

  2. Story of my life, sloppy inexperienced developers loading their CSS and JS on every single page instead of CORRECTLY loading it ONLY on the pages required.

    I literally have to create functions in my own plugins called death_to_sloppy_devs() to dequeue styles/scripts on my own plugin’s pages because they load things like bootstrap or generic selectors like “.required” class — like wtf

    This doesn’t even get into the Ucanny Owl addon plugins for LearnDash that DO THE SAME THING.

    We need to create a website to shame developers that do this so they take the time to correctly learn how to load their JS/CSS ONLY on the pages needed.

  3. Milan Tiwari

    This does not seem to be working now. Can you please give me updated code.

    • It looks like LearnDash has updated the CSS files that they use. I’ve updated the article to reflect this.

      Essentially, you can remove several of the CSS files that have been deprecated, and add the new one:

      wp_dequeue_style( 'learndash-front' );

      Let me know how that goes.

  4. Milan Tiwari

    It does exactly what I wanted. I tried learndash support for this and they suggested using a plugin. Luckily, I knew where to ask for help.

    Thanks Dave.

    [p.s. Notify me of follow-up comments by email is not working, I checked spam also]

    • 🙌

      Thanks for letting me know about the follow-up comments. I’m using Jetpack for that so I’ll check on it to see what’s going on.

  5. Fabienne

    Hi, it seems that Perfmatters and LD now have a conflict. When Perfmatters is with all LD scripts running it won’t submit the quiz and tell me that “You must answer all questions before you can complete the quiz.”
    I tried googling this issue, the only way I can sort it is by turning off Perfmatters.
    Has anyone experienced the same?

    • I haven’t heard of anyone else having this issue. What other Perfmatters settings do you have enabled? Can you post a screenshot or two of your settings?

  6. Pau

    Great post! I’d try the “manual” way of adding code to functions.php.
    Is this up to date? (December 2022) regarding the .css files that today load LearnDash? And How Can we know if they change it in the future and uses less or more of those .css files? It’d be great if LearnDash had some page about this on their website… (I can’t find it).
    Thanks!

    • Hi Pau – I believe this post is still relevant and mostly up-to-date. I haven’t looked at LearnDash’s source code recently to see what files they are loaded, but they haven’t released any big features recently that would lead me to believe that anything has changed.

      There is no official way to know if/when LearnDash changes any of this. They don’t have any resources about it in their documentation and they don’t usually make file changes known in their changelogs. That’s part of why I wrote this article.

      Your best best is to reach out to their support team if they release a new big feature, or if you suspect something has changed. Their devs should be able to tell you.

  7. Pau

    Hi,
    Is there a reason why you 1st dequeue to then enqueue only in the pages you use LD?
    Would be the same to just dequeue on pages where you don’t use LD?
    Your same code would be:

    function ldx_pro_custom_enqueue() {

    if( !is_singular( array( ‘sfwd-courses’, ‘sfwd-lessons’, ‘sfwd-topic’, ‘sfwd-quiz’, ‘sfwd-assignment’ ) ) && !is_page( array( 2,58 ) ) ) :

    // Remove Default LearnDash Styles
    wp_dequeue_style( ‘learndash-front’ );
    wp_dequeue_style( ‘learndash_quiz_front_css’ );
    wp_dequeue_style( ‘jquery-dropdown-css’ );
    // Remove Design Upgrade CSS
    wp_dequeue_style( ‘ldx-design-upgrade-learndash’ );

    endif;
    }
    add_action( ‘wp_enqueue_scripts’, ‘ldx_pro_custom_enqueue’, 30 );

  8. Pau

    Ok!
    A doubt that I’ve now is if inside the admin it’s ok to dequeue them or if Are they needed. In that case, should I add “ && !is_admin()”?
    Regards.

    • I don’t actually think they are enqueued in the admin area. They are only enqueued on the frontend of the website, because they are styles for LearnDash components that only appear to the end user. Those styles aren’t needed for anything in the admin area.

  9. Pau

    And is it safe to also dequeue the JS script LearnDash also load?
    What I’ve found in any frontend page (LearnDash page or not) is 4 CSS and 1 JS:

    //CSS:
    wp_dequeue_style( ‘learndash_quiz_front_css’ );
    wp_dequeue_style( ‘learndash_lesson_video’ );
    wp_dequeue_style( ‘learndash-front’ );
    wp_dequeue_style( ‘jquery-dropdown-css’ );

    //JS:
    wp_dequeue_script( ‘learndash-front’ );

    And regarding the admin area, it seems that some parts of the admin load some of that: Inside the edit a course page, or the lesson/topic edit page, I find in the source code:
    learndash_lesson_video.min.css
    learndash.min.css
    learndash.js
    So I don’t know if it is safe to dequeue inside the admin,… especially for the JS file that can bring some functionality,…
    Any thoughts?
    Thanks!

    • I think the original reason I didn’t recommend dequeuing learndash-front JS file was because I thought the code that makes the LearnDash login popup work is in that file. And people could be using that on many pages, especially if they included it in their main navigation/header.

      I think it’s worth trying to dequeue it, but you’ll have to test it to see if it negatively impacts anything.

      For the admin area, I guess LearnDash does show previews of things in the block editor, so I can see why some LearnDash scripts are loaded for that.

  10. Pau

    I don’t use the LD login, I have MemberPress for that. I only use LearnDash for a course page or Lesson/Topic in focus mode,… it seems I can dequeue the JS 😛

    And for the admin area, just in case some assets are needed inside the admin, Would you recommend not dequeuing things inside the admin?
    To know that you are inside the admin is it the “is_admin()”?
    In that case, the code should be:

    if(!is_admin() && !is_singular( array( ‘sfwd-courses’, ‘sfwd-lessons’, ‘sfwd-topic’, ‘sfwd-quiz’, ‘sfwd-assignment’ ) ) && !is_page( array( 2,58 ) ) ) :
    //then dequeue

    Right?
    Thanks for your help! I’ve discovered the dequeue option because of you 😛

    • If you’re using MemberPress for login, then yes, I agree. You can dequeue the JS.

      is_admin() is correct for checking if an administrative screen is being viewed. see here

      Yes, I believe your code is correct 👍.

      And thanks for the nice words. I’m glad I could help introduce you to something new.

Leave a Reply

Your email address will not be published. Required fields are marked *

Powered by WordPress & Theme by Anders Norén