Take the 2-minute tour ×
WordPress Development Stack Exchange is a question and answer site for WordPress developers and administrators. It's 100% free, no registration required.

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.

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);
share|improve this question
    
Why would you want to load a .less stylesheet? They are best used in the development process then exported to normal CSS, which I don't think is your case because you're asking how to make it work with enqueue_style :) –  onetrickpony Aug 30 '11 at 21:03
    
I convert them to css in the build process. You're right, this is strictly for development purposes only. –  cbaigorri Aug 31 '11 at 14:31
    
Brilliant, thank you! –  Dalton Dec 14 '11 at 22:41
    
Thank you for posting the code snippet, as that resolved my issues. I had found a similar script elsewhere, but it failed to work. –  ScottS Jul 31 '13 at 20:11
    
I added "\r\n" to the end of the $tag value as it was joining lines in my HTML. $tag = "<link rel='stylesheet/less' id='$handle' $title href='$href' type='text/less' media='$media' />\r\n"; –  jnthnclrk Aug 5 '13 at 13:38

4 Answers 4

up vote 5 down vote accepted

Yep, final style link output is passed through style_loader_tag filter.

share|improve this answer
    
That's what I was looking for, thanks! –  cbaigorri Jun 23 '11 at 19:45

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);
share|improve this answer
1  
That doesn't look right, filters should absolutely return output, otherwise you are breaking filter chain and messing things up. –  Rarst May 3 '13 at 15:28

change rel=stylesheet to rel=stylesheet/less in $tag definition.. also rel=alternate stylesheet/less, doesn't work..

share|improve this answer
2  
"This answer was automatically flagged as low-quality because of its length and content", which I am sure you don't want. Can you add some explanation of your solution as well as explain why you think it will solve the problem. –  s_ha_dum May 3 '13 at 15:30

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;
}
share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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