[Plugin: WP-LESS] I really can't get this plugin to work

I’m in the same problem.. it doesn’t look like it compiles/renders the .less file at all..

bump?

Bump! Is it incompatible with WP 3.2.1 or something?

I installed WP-LESS 1.2 and it works! So something is wrong in 1.3.1…

Hey OK. Have you tried on 1.3.0 too?

I’ll check that on this week-end; I have some busy moments… sorry for this lack of support ;-(

Tried it just now and that doesn’t work either.
I didn’t try anything fancy: I deactivated 1.2.0 , copied the 1.3.0 files, and activate. But no dice.

Well, I don’t understand why it does not work.

I put this in my theme, in the function.php:

require dirname(__FILE__).'/path/to/wp-less/bootstrap-for-theme.php';
$WPLessPlugin->dispatch();

And then:

add_action('wp', 'theme_wp_hook');

function theme_wp_hook()
{
  wp_enqueue_style('theme', $template_directory.'/style.less', array(), false, 'screen,projection');
}

Worked like a charm with the latest version of the plugin and a WP 3.2.1 blog.

I tried the bootstrap method, and that worked! But it should work with an activated plugin and just using wp_enqueue_style right?
Anyway, thanks. I’ll use it the bootstrap-way now!

Well sorry: the previous example in fact refers to an embed copy of the plugin inside a theme. Or whenever you want but not the activated plugin. In this latest case, once activated, it does everything you need (no need to worry, just register your less stylesheets).

The theme-bootstrap is just a handy way to include WP LESS library, and let you control it the way you want. It checks if the class exists yet (to avoid fatal error of double registering class).

In all case, it just take care of *.less files queued through wp_enqueue_style – the way it should be done even without the plugin.

Plugin Method:

I got this working by inserting this code into the functions.php:

add_action('wp', 'theme_wp_hook');

function theme_wp_hook()
{
  wp_enqueue_style('theme', get_bloginfo('template_directory').'/style.less', array(), false, 'screen,projection');
}

However strangely my parsed CSS file is output into this folder (instead of my theme folder) using local MAMP setup:

https://localhost:8888/wordpress/wp-content/uploads/wp-less/blank-theme/style.css

Why does the stylesheet end up in the “upload” folder?
How to fix this?

Then I tried the below:

Bootstrap Method:

This is not working and your documentation is unfortunately quite confusing.

Can you please clarify these issues:

> * 1. In your theme, include the ‘wp-less’ anywhere you want. (eg: ‘wp- content/themes/yourtheme/lib/wp-less’)

The “wp-less” means the whole plugin folder?

> * 2. Include the required files in your functions.php file. (eg: ‘require dirname(__FILE__).’/lib/wp-less/bootstreap-theme.php’)

This does not work, or my code does not work.
I tried many variations similar to this:

if (!class_exists('WPLessPlugin'))
{
require dirname(__FILE__).'wp-less/lib/wp-less/bootstreap-theme.php';
$WPLessPlugin = WPPluginToolkitPlugin::create('WPLess', __FILE__, 'WPLessPlugin');
}

or this:

if (!class_exists('WPLessPlugin'))
{
require get_bloginfo('template_directory').'/lib/Plugin.class.php';
$WPLessPlugin = WPPluginToolkitPlugin::create('WPLess', __FILE__, 'WPLessPlugin');
}

Whenever I try that I get an error and the page stays blank after reload.

Above you are recommending this code:

add_action('wp', 'theme_wp_hook');

function theme_wp_hook()
{
  wp_enqueue_style('theme', $template_directory.'/style.less', array(), false, 'screen,projection');
}

Where does this code go, both in functions.php? Like this?:

require dirname(__FILE__).'/path/to/wp-less/bootstrap-for-theme.php';
$WPLessPlugin->dispatch();

add_action('wp', 'theme_wp_hook');

function theme_wp_hook()
{
  wp_enqueue_style('theme', $template_directory.'/style.less', array(), false, 'screen,projection');
}

I am assuming I need to to change this part “/path/to/wp-less/”, but nothing seems to work i.e. get_bloginfo(‘template_directory’).

—

Can you please provide some exact code with explanation where to place it?
Please avoid variables like “/path/to/wp-less/”.

Thanks again for providing this plugin, once it works it would be a huge time-saver!

Hello,

this is normal. I assumed the upload folder to have write permissions.
So when a .less file is parsed, the plugin compiles it to the upload folder, and replace the stylesheet URL with the new one.

Is it causing a problem for you?

PS: it reads wordpress upload folder location. So if you have a different setup, the plugin will follow it.

Thanks for your quick reply.
It`s fine if this is normal, I just thought I am doing something wrong.

Ideally I would like to get the bootstrap method to work, but I am stuck.

– Does the whole wp-less plugin folder need to be moved to the theme directory?

– Do I need to move any file out of the “wp-less”folder into the theme folder i.e. bootstrap.php?

– Do both code blocks need to go into functions.php, see below?

– With what do I need to replace “/path/to/wp-less/”?

require dirname(__FILE__).'/path/to/wp-less/bootstrap-for-theme.php';
$WPLessPlugin->dispatch();

add_action('wp', 'theme_wp_hook');

function theme_wp_hook()
{
  wp_enqueue_style('theme', $template_directory.'/style.less', array(), false, 'screen,projection');
}

Thanks a lot for you help.

Ok, I tested the plugin method further and this does not work at all.

The parsed style.css file needs to be in the current theme directory (not in the upload folder), since all my assets i.e. images are in the theme directory.

Image files linked from the style sheet do not work anymore, since the location changed to the upload directory.

I am actually wondering if there is anyone out there who could make this plugin work…

hey Bento, this worked for me, note that its using the bootstrap/embed and not as a plugin.

1. put bootstrap-for-theme.php inside your theme folder.
2. put the lib (comes inside the plugin) folder inside your theme folder also.
3. create a style.less file inside your theme’s folder.
4. paste this in your theme’s functions.php file:

require dirname( __FILE__ ) . '/bootstrap-for-theme.php';
$WPLessPlugin -> dispatch( );

function theme_wp_hook( ) {
	wp_enqueue_style( 'ID-FOR-FILE', get_template_directory_uri( ) . '/style.less', array( ), false, 'screen,projection' );
}
add_action( 'wp', 'theme_wp_hook' );

note that the only thing you can change is the ID-FOR-FILE, it’s an arbitrary name/identifier, if you leave it as is it will work the same.

Hope that helps.

Hi Obvio, many thanks for your reply!

Your solution works, but it has the same issue: the parsed CSS file is placed in the upload folder (within another folder named after my current theme).

So I have the same issue again with my images, they do not link anymore to the correct place.

Am I doing something wrong? I would like the parsed CSS file to be in the current theme folder…

Many thanks for any hints!