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.

Several customers have had issues with the styles from our Design Upgrade Pro for H5P plugin not appearing on the frontend of their site. Things looks good in the Customizer, but the styles don’t show up on the actual website. The cause of this issue is almost always due to the server configuration.

Because of the way the H5P WordPress plugin requires us to add styles to H5P content, we have to use a .php file to load CSS code. This is a bit unconventional. Typically, you’d use a .css file to load CSS code, and a .php file to load PHP code.

I’ll explain a few things you can try to resolve this issue. It usually involves contacting your host and asking them to make a pretty simple change.

Access to CSS File Blocked

In most cases, your server is blocking access to our plugin’s CSS file. It happens on select hosting configurations, and with some extra strong security setups.

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

Our CSS file, which uses a .php extension, is returning a 403 error.

https://yoursite.com/wp-content/plugins/design-upgrade-pro-h5p/assets/css/h5pd.php

This often happens when your server’s .htaccess or nginx.conf rules block access to CSS files that don’t have the MIME type of text/css.

  • Please ask your host to allow access to the file linked above, and allow it to be treated as a CSS file.

You can reach out to your hosting support and…

  • First, ask them if there is a way to allow .php files to be used for CSS (text/css MIME type), or disable strict MIME checking. … If that’s not an option…
  • Ask them to use the .htaccess or nginx.conf file to override the MIME type of our CSS file and make it text/css:
    https://yoursite.com/wp-content/plugins/design-upgrade-pro-h5p/assets/css/h5pd.php

We’ve had customers on the following hosts be able to resolve the issue successfully:

  • Cloudways – Submit a support ticket
  • SiteGround – Submit a support ticket
  • Bigscoots – Submit a support ticket and they will update the nginx.conf file for you

Security Plugins

Some features in WordPress security plugins can also block our CSS file from loading. Try disabling your security plugin briefly to see if that helps. Clear your cache after doing so.

If disabling the plugin works, then reach out to the plugin’s support team to ask them how to allow access to the above file. There should be an option to either include or exclude certain files, or bypass whatever feature the plugin is using to disable access to the file.


Because of the way H5P is added to WordPress pages, I have to use a .php file to deliver the CSS. This is unconventional, but it’s the only way I can do it because of how the H5P plugin is set up.

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 →

I wish there was an easier way, but I’ve researched everything I can find and I’m doing everything possible. It’s just a limitation of how the H5P plugin works, and therefore, an issue on some server setups.

Feel free to leave a comment below if you’re still having trouble and I’ll try to help you out.

Sponsor

Finally Revealed...

NEW breakthrough solution allows you to IMMEDIATELY GROW student engagement and SELL more courses by creating a state of the art mobile application in 60 MINUTES OR LESS without ANY coding knowledge!

5 out of 5 stars

Proven and tested by over 1,000 LearnDash customers. Learn More →