LESS CSS enqueue_style with add_filter to change rel attribute

0 Views

What I’m trying to do is use less css with WordPress.

You’re supposed to link to your .less files with the rel attribute set to ‘stylesheet/less’. But I can’t figure out how to alter the code that enqueue_style outputs.

Read More

Is there a way to apply a filter and affect the output?

EDIT: If anyone is curious as to how I ended up getting this to work, here is the code snippet: 

function enqueue_less_styles($tag, $handle) {
    global $wp_styles;
    $match_pattern = '/.less$/U';
    if ( preg_match( $match_pattern, $wp_styles->registered[$handle]->src ) ) {
        $handle = $wp_styles->registered[$handle]->handle;
        $media = $wp_styles->registered[$handle]->args;
        $href = $wp_styles->registered[$handle]->src . '?ver=' . $wp_styles->registered[$handle]->ver;
        $rel = isset($wp_styles->registered[$handle]->extra['alt']) && $wp_styles->registered[$handle]->extra['alt'] ? 'alternate stylesheet' : 'stylesheet';
        $title = isset($wp_styles->registered[$handle]->extra['title']) ? "title='" . esc_attr( $wp_styles->registered[$handle]->extra['title'] ) . "'" : '';

        $tag = "<link rel='stylesheet' id='$handle' $title href='$href' type='text/less' media='$media' />";
    }
    return $tag;
}
add_filter( 'style_loader_tag', 'enqueue_less_styles', 5, 2);
Post Views: 0

Related posts

Leave a Reply

4 comments

  2. I made a function that uses the query() method of the WP_Dependancies class. Furthermore it does not regenerate the output, but instead just rewrites the necessary parts.

    The function accesses the global $wp_styles object and performs a query to get the stylesheet object. With the regex the src is checked if it contains a .less file, and if that is true, the rel attribute is modified accordingly. In my function I furthermore replaced the -css suffix in the ID with a -less suffix, just remove this line if you don’t like it.

    function allow_less_stylesheets( $style_tag, $handle )
{
    global $wp_styles;

    $obj = $wp_styles->query( $handle );
    if( $obj === false )
    {
        return $style_tag;
    }
    if( !preg_match( '/.less$/U', $obj->src ) )
    {
        return $style_tag;
    }

    // the current stylesheet is a LESS stylesheet, so make according changes
    $rel = isset( $obj->extra['alt'] ) && $obj->extra['alt'] ? 'alternate stylesheet' : 'stylesheet';
    $style_tag = str_replace( "rel='" . $rel . "'", "rel='stylesheet/less'", $style_tag );
    $style_tag = str_replace( "id='" . $handle . "-css'", "id='" . $handle . "-less'", $style_tag );
    return $style_tag;
}

  4. Thanks for your answer. It didn’t work for me until I put echo in place of return though :

    function enqueue_less_styles($tag, $handle) {
    global $wp_styles;
    $match_pattern = '/.less$/U';
    if ( preg_match( $match_pattern, $wp_styles->registered[$handle]->src ) ) {
        $handle = $wp_styles->registered[$handle]->handle;
        $media = $wp_styles->registered[$handle]->args;
        $href = $wp_styles->registered[$handle]->src . '?ver=' . $wp_styles->registered[$handle]->ver;
        $rel = isset($wp_styles->registered[$handle]->extra['alt']) && $wp_styles->registered[$handle]->extra['alt'] ? 'alternate stylesheet' : 'stylesheet';
        $title = isset($wp_styles->registered[$handle]->extra['title']) ? "title='" . esc_attr( $wp_styles->registered[$handle]->extra['title'] ) . "'" : '';

        $tag = "<link rel='stylesheet' id='$handle' $title href='$href' type='text/less' media='$media' />";
    }
    echo $tag;
}
add_filter( 'style_loader_tag', 'enqueue_less_styles', 5, 2);