Design Upgrade Pro for H5P Troubleshooting

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.

Recommended Product

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.

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.