800,000+ WordPress sites are already using MetaSlider!

How Do I Fix W3C Validation Errors?

If you see a problem with W3C validation, it is often related to shortcodes. Plugins like MetaSlider that use shortcode have two main options for including CSS in your site.

  • Option #1: Load CSS on every page. 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!
  • Option #2. Conditionally load CSS. This 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.


Solution #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’.

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.


Option #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 theme’s functions.php file:

/**
 * Enqueue MetaSlider CSS files in the <head> of every page.
 */
function metaslider_styles() {

    // flex slider
    wp_enqueue_style( 'metaslider-flexslider', plugins_url() . '/ml-slider/assets/sliders/flexslider/flexslider.css' );

    // coin slider
    wp_enqueue_style( 'metaslider-coinslider', plugins_url() . '/ml-slider/assets/sliders/sliders/coinslider/coin-slider-styles.css' );

    // nivo slider
    wp_enqueue_style( 'metaslider-nivoslider', plugins_url() . '/ml-slider/assets/sliders/nivoslider/nivo-slider.css' );

    // responsive slides
    wp_enqueue_style( 'metaslider-reslides', plugins_url() . '/ml-slider/assets/sliders/responsiveslides/responsiveslides.css' );

    // general CSS (do not remove)
    wp_enqueue_style( 'metaslider-public', plugins_url() . '/ml-slider/assets/metaslider/public.css' );

    // uncomment these lines if you are using MetaSlider Pro
    // wp_enqueue_style( 'metaslider-public-pro', plugins_url() . '/ml-slider-pro/assets/public.css' );
    // wp_enqueue_style( 'metaslider-pro-animate', plugins_url() . '/ml-slider-pro/modules/layer/assets/animate/animate.css' );
}
add_action('wp_head', 'metaslider_styles');

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.