WordPress.org

Ready to get started?Download WordPress

Forums

WP-LESS
I really can't get this plugin to work (31 posts)

  1. firefusion
    Member
    Posted 3 years ago #

    I'm trying to bootstrap the plugin with a theme but it's not working, nor is the other method. Can someone post the exact code you need in functions.php to make this work? The readme file contains a lot of errors.

  2. obvio
    Member
    Posted 3 years ago #

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

  3. obvio
    Member
    Posted 3 years ago #

    bump?

  4. stijnjanmaat
    Member
    Posted 2 years ago #

    Bump! Is it incompatible with WP 3.2.1 or something?

  5. stijnjanmaat
    Member
    Posted 2 years ago #

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

  6. oncletom
    Member
    Plugin Author

    Posted 2 years ago #

    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 ;-(

  7. stijnjanmaat
    Member
    Posted 2 years ago #

    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.

  8. oncletom
    Member
    Plugin Author

    Posted 2 years ago #

    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.

  9. stijnjanmaat
    Member
    Posted 2 years ago #

    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!

  10. oncletom
    Member
    Plugin Author

    Posted 2 years ago #

    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.

  11. bento
    Member
    Posted 2 years ago #

    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:

    http://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!

  12. oncletom
    Member
    Plugin Author

    Posted 2 years ago #

    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.

  13. bento
    Member
    Posted 2 years ago #

    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.

  14. bento
    Member
    Posted 2 years ago #

    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...

  15. obvio
    Member
    Posted 2 years ago #

    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.

  16. bento
    Member
    Posted 2 years ago #

    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!

  17. bento
    Member
    Posted 2 years ago #

    I found a work-around for my main issue, background images in CSS.

    1.) First I am setting a variable with the absolut path to the image folder, like this:

    @base-url: "http://website-name.com/wordpress/wp-content/themes/theme-name";

    2.) In your CSS use this variable to reference images:

    background-image: url("@{base-url}/images/bg.png");

    ---

    Still not really happy that the parsed CSS file ends up in the WP upload folder, but the above seems to work alright.

    Any new hints how to parse the CSS file directly into the WP theme directory appreciated.

  18. obvio
    Member
    Posted 2 years ago #

    That's my solution also..
    Regrading the output folder, I think oncletom has a point regarding the folder permissions on the server and where to write files to, but what you can do is after finishing the development on the site is just copy the parsed file, move it into your theme and just include it as any other css file the normal way.

  19. oncletom
    Member
    Plugin Author

    Posted 2 years ago #

    OK, I understand the concern.

    However, if you have an url('images/blah.png'), the replacement takes care of all this.
    If you look at your compiled CSS file, resources are called with absolute URL.
    If it's not properly done, it may be a bug and in this case, I would fix it.

    Your themes and plugins folders don't always have write permission access. And indeed, you should never rely on this. WordPress has a writeable directory which is made for that.

  20. bento
    Member
    Posted 2 years ago #

    @oncletom:
    Thanks, I understand. It seems to be a WordPress folder permission issue then.
    Ideally however the bootstrap file should take care of that. Would it be possible to achieve a permission change to the current theme directory with the bootstrap file?

    It seems impossible to package a WP theme with the bootstrap file for distribution/sale, unless you uses a variable for the CSS image path. Also this fact need to be mentioned in the documentation.

    It does interrupt the normal WP work-flow a little where I would expect all project files in the theme folder.

    @obvio:
    It happens so often that a website is *not* done (we you think it`s done) and one has to go back and fix CSS. So I would not change the setup even on a client server.
    It`s unfortunate that we need this setup and parse into the upload folder first.

    Also when backing up an updated theme it`s easy to forget the parsed CSS file in the upload folder (ok, one still has the original .less file, but it feels not quite right somehow).

  21. oncletom
    Member
    Plugin Author

    Posted 2 years ago #

    However, you can alter the upload dir (file access) and upload uri (file URI for browser) through the WPPluginToolkitConfiguration class.

    Example:

    ...
    $WPLessPlugin->getConfiguration()->setUploadUrl(get_template_directory_uri());
    $WPLessPlugin->getConfiguration()->setUploadDir(get_template_directory());
    $WPLessPlugin->dispatch();
  22. oncletom
    Member
    Plugin Author

    Posted 2 years ago #

    Can you write here example of URL in stylesheet that are failing?

    In one of my LESS stylesheet, I have this:

    .rss{
      a{
        background: url('images/feed-readers.png') no-repeat left center;
      }
    }

    And the path is properly replaced, even if the resulting CSS file is located in wp-content/uploads folder.

    Keep me in touch.

  23. bento
    Member
    Posted 2 years ago #

    @oncletom:

    In which file can I change the WPPluginToolkitConfiguration class?

    Would I replace this..:
    $WPLessPlugin->getConfiguration()->setUploadUrl(get_template_directory_uri());

    ..with this?:
    $WPLessPlugin->getConfiguration()->setUploadDir(get_template_directory());

    --

    Strange, are you saying the plugin should automatically create the absolute path for CSS images? It doesn`t for me.

    Something like this would still look the same after parsing:

    background: url('images/feed-readers.png') no-repeat left center;

    I have to use a variable to add the absolute path as explainded above:

    @base-url: "http://website-name.com/wordpress/wp-content/themes/theme-name";
    
    background-image: url("@{base-url}/images/bg.png");
  24. oncletom
    Member
    Plugin Author

    Posted 2 years ago #

    You can do this change in any theme you bootstrap the plugin from.
    The explained need is quite specific to you, so I won't change the usual behavior only for that.

    If you want to bundle wp-less in your theme, follow the steps in the boostrap-for-theme .php file. Basically it is:

    1. drop wp-less in your theme (so as you have wp-content/themes/your-theme/wp-less
    2. include the bootstrap file in your theme functions.php file
    3. register the hooks to let the plugin do silently the work with your LESS files (through $WPLessPlugin->dispatch();)

    Usually you include the bootstraper like this:

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

    In your case, it should looks like this:

    require dirname( __FILE__ ) . '/wp-less/bootstrap-for-theme.php';
    $WPLessPlugin->getConfiguration()->setUploadUrl(get_template_directory_uri());
    $WPLessPlugin->getConfiguration()->setUploadDir(get_template_directory());
    $WPLessPlugin->dispatch();

    Not so hard.

    Anyway, I'll look at your problem because yes, relative URL should be replaced properly.

  25. bento
    Member
    Posted 2 years ago #

    Thanks again for your explanation, will try to figure this out.

    Yes, there seems to be still a bug that relative paths in CSS are not replaced with absolute ones, which you said would be the default behavior.
    Using a separate variable for the absolute path is a work-around.

  26. oncletom
    Member
    Plugin Author

    Posted 2 years ago #

    Could you please copy/paste me your stylesheets properties causing this problem?

    Because on my side I can't reproduce it.

    Thanks.

  27. bento
    Member
    Posted 2 years ago #

    Basically any incidence where I reference an image in CSS i.e.

    html {
    	height: 100%;
    	margin: 0 auto 1px auto;
    	overflow-y: scroll;
    	background: url(images/background_splatter.gif) repeat top left;
    }

    The parsed CSS looks the same.

    However I noticed CSS images in stylesheets which are included via @import have the correctly added absolute path.

  28. oncletom
    Member
    Plugin Author

    Posted 2 years ago #

    Okay I figured out the problem.

    It should be fixed in the next release (1.4.1).

    Thanks for reporting the issue!

  29. bento
    Member
    Posted 2 years ago #

    Thanks, very much appreciated.

    One more issue, when changing CSS in an @import stylesheet (a .less stylesheet) the changes are not updated in the parsed CSS somehow.

    Each time I make a change in a @imported stylesheet.less I need to unlink it from the main stylesheet (i.e. delete the @import rule) and add it again afterwards.

    Not sure if this is an issue of the plugins too.
    Thanks again.

  30. oncletom
    Member
    Plugin Author

    Posted 2 years ago #

    Hello,

    I can't check imported files without opening recursively every less files… which would be terrible for performances.

    In case you are in a development process, the 1.4.2 version of the plugin now recompiles every time when the WP_DEBUG constant is set to true.

Topic Closed

This topic has been closed to new replies.

About this Plugin

About this Topic

Tags