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

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
• Free Plugin (complex interface)
• Free Code Solution
  (slightly technical, but you can copy/paste full code examples, and completely customize 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.

Recommended Product

The plugin costs $24.95 →

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

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

Recommended Product

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.