How do I fix W3C validation errors?

The Problem

Shortcode plugins have two main options for including CSS in your site.

Load CSS on every page

The first option is to include all of the CSS files on all of your pages. This will ensure the CSS is ready and waiting for any shortcode that happens to run on the page.

The advantage of this method is your page will pass W3C validation as we can load the CSS in the <head> of your page.

The tradeoff is the CSS will be included even on pages where no slideshow is present. MetaSlider has a total of 5 CSS files – that’s a lot of CSS to include if it’s not needed!

Conditionally load CSS

The second option (the one MetaSlider uses) is to only include CSS when the shortcode is processed.

The advantage of this method is only the absolute minimum CSS will be added to your page, and only on the pages where it is needed.

The tradeoff is the CSS will be included in the footer of your page and therefore the page won’t pass W3C validation.

There is no standard method built into WordPress to allow a shortcode to load the CSS into the <head> of the page. By the time the shortcode has run, the <head> has already been generated and output. The majority of shortcode plugins use this method, choosing performance over validation.

Solutions

1. Install a minification plugin

Minification plugins bundle all of the CSS on your page into a single file and include it in the <head>.

There are lots of minification plugins available but we recommend W3 Total Cache. To enable minification, install W3 Total Cache from your plugins page, then go to Performance > General Settings and enable ‘Minify’.

w3-total-cache-enable-minify

W3 Total Cache Minify Settings

Using a minification plugin will not only will it help with general site performance, but you’ll still only be including the CSS on pages where it’s needed.

2. Manually include the CSS in your theme

First you’ll uncheck the ‘Print CSS’ option in the Advanced Slideshow Settings for each of your slideshows.

You’ll now need to enqueue the CSS yourself. To do this, paste the following code into your themes functions.php file:

It would be a good idea to remove any includes from the code above that are not needed. For example, if you’re only using Flex Slider slideshows, delete the Nivo, Coin and R slides includes. You could also choose to conditionally load the CSS on specific pages using the is_front_page() or is_page() functions.

Posted in: FAQs