0

Wordpress (3.6) is loading two stylesheets (mediaelement-css, .../wp-includes/js/mediaelement/mediaelementplayer.min.css?ver=2.13.0 and wp-mediaelement-css, .../wp-includes/js/mediaelement/wp-mediaelement.css?ver=3.6) in wp_footer instead of wp_head. I'm getting an HTML5 error because they did not add the attribute property. I found out that this error always happens if a stylesheet is loaded outside of <head> without the attribute property. If it is loaded within then it doesn't need the attribute property.

Is there a way of loading the two stylesheets in <head> instead of <body> to get rid of the error?

Improve this question

2 Answers 2

Reset to default
1

The two stylesheets is only loaded when a video or sound was included in a post or page and that happens after wp_head.

But do not despair! There is a filter you can use! in the code it looks like this:

apply_filters( 'style_loader_tag', "<link rel='$rel' id='$handle-css' $title href='$href' type='text/css' media='$media' />\n", $handle );

so i wrote a function:

//add the filter
add_filter( "style_loader_tag", "change_css_links", 10, 2 );

// Function for the filter
function change_css_links($css, $handle){
    //load global styles to get src
    global $wp_styles;

    //check if it is the correct style
    if($handle == "mediaelement" || $handle == "wp-mediaelement"){
        //if it is: do awesome stuff
        // get all info for the css in array
        $css_info = $wp_styles->registered[$handle];

        //the array looks like this:
        /*
        [mediaelement] => _WP_Dependency Object
        (
            [handle] => mediaelement
            [src] => /wp-includes/js/mediaelement/mediaelementplayer.min.css
            [deps] => Array
                (
                )

            [ver] => 2.13.0
            [args] => 
            [extra] => Array
                (
                )

        )
        */
        // do the awesome
        $css = "your new and awesome link element!";
    }

    //return the new or old awesome!
    return $css;

}

Or you can deregister the styles and load them on every page.

Improve this answer
2
  • Thank you for this solution and sorry I am a bit late with my answer! I tried to implement the function, but I have no idea how to go about setting up the array in within. Starting from $css_info = ... what is going on? Sorry for the question.
    – kath
    Commented Sep 29, 2013 at 8:02
  • $css_info gets an array with the url and other information witch means that you can add or remove information from the link element. So maybe you wanna do this: $css = '<style scoped>@import url('.$css_info["src"].');</style>';to get a valid element.
    – ferenyl
    Commented Sep 29, 2013 at 15:07
0

It could be a solution could be to add the following code to media.php or your functions.php:

function wp_mediaelement_scripts(){
    $library = apply_filters( 'wp_audio_shortcode_library', 'mediaelement' );
    if ( 'mediaelement' === $library && did_action( 'init' ) ) {
        wp_enqueue_style( 'wp-mediaelement' );
        wp_enqueue_script( 'wp-mediaelement' );
    }
}
add_action( 'wp_enqueue_scripts', 'wp_mediaelement_scripts' );

and comment out the following from functions wp_audio_shortcode() and wp_video_shortcode():

$library = apply_filters( 'wp_audio_shortcode_library', 'mediaelement' );
if ( 'mediaelement' === $library && did_action( 'init' ) ) {
    wp_enqueue_style( 'wp-mediaelement' );
    wp_enqueue_script( 'wp-mediaelement' );
}
Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.