So today I scoured the internet aka StackOverflow for help on why my Ninja Form CSS did not display unless I was logged in as admin. Found a few devs with the same issue, but no solution.

So I did what I should have done straight away and looked at the Ninja plugin source code. My forms use the default theme as a basis so the CSS file name is “display-structure.css”. A quick search in the plugin showed the enqueue command as:

wp_enqueue_style( 'nf-display',      $css_dir . 'display-structure.css', array( 'dashicons' ) );

And just like that, all was clear. So here’s why on the site I’m working on the CSS didn’t display:

Dashicons CSS are enqueued by WordPress by default, but on many sites are only needed for backend. So on this site, I dequeued it to keep Google happy like so:

if ( ! is_user_logged_in() ) {
		wp_dequeue_style( 'dashicons-navigation' );
		wp_deregister_style( 'dashicons' );
	}

That’s super useful – until you run code that requires dashicons as a dependency. And this is what Ninja forms do – by including dashicons as a dependency, if dashicons aren’t there, Ninja Forms CSS isn’t either.

The fix is simple: remove the dequeuing of dashicons and Ninja Forms works perfectly!

Leave a Reply

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