LearnDash Design & Tutorials

LearnDash Design & Tutorials

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.

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.

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).

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

7 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.

Leave a Reply

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

Powered by WordPress & Theme by Anders Norén