When it comes to developing original themes for WordPress, the development time spike up when there’s a need for a responsive theme and the clients keep implementing changes. Instead of overriding css with stricter rules and creating a whole lot of havoc, using the .less option would speed things up considerably and keep the code clean.

I’ve been using Espresso to develop websites for the longest time and I can’t live without it. Especially since CSSedit have been merged with Espresso already. Although the child app CSSedit within the current Espresso(version 2) are laggy compared to the standalone app, I am sure the folks at MacRabbit are working on improving it.

Anyway, here are the steps involved.

Make WordPress Play Nice with Less

If you are developing on another cms platform, these bunch of steps can be ignored.

  1. Install this plugin, WP-less in your WordPress site
  2. Activate it
  3. Create a .less file somewhere in your theme.
  4. In your WordPress theme functions.php, paste this in and change the location of the file to reflect your new .less file’s location:
     add_action('init', 'theme_enqueue_styles');function theme_enqueue_styles() {
    wp_enqueue_style('misfits', get_stylesheet_directory_uri().'/css/misfits.less');
    }
  5. Fire up your ftp and edit your WordPress wp-config.php
  6. Paste this in
    /**less recompiling**/
    define('wp_LESS_COMPILATION', 'deep');
  7. And you are done! If you have a name.less file, you can put in all your less codes. And when you load your WordPress website in the browser, you can see that your name.less file have been compiled to a name.css file with all your variables converted.

**Notes : I’m using Espresso to develop my WordPress websites but if you are using something else and want a better visual representation of your .less files when you work with them, you can consider the CodeKit. With the CodeKit, you don’t even need the plugin as the app compiles the .less files to .css before they go on the server.  Using the WP-less plugin makes your server compile the codes everytime your .less file is modified or updated.

 

Quick way to get Espresso to go Less

There are a few Sugars on Less for the Espresso but they are not that solid yet. Working with .less files in Espresso gives you a plain text visual representation. I can’t work with that, I can go code blind. The simplest way to fix this is to extend the CSS native plugin to support .less files.

  1. Go to Applications folder and find Espresso App, Right click (Control + Click) and “Show Package Content” then look inside “Content/SharedSupport/Sugars”  and you will find  the CSS.sugar. Alternatively, if the sugar can’t be found, look into the “Content/SharedSupport/Plug-Ins/” folder and you will see a CSS.espressoplugin
  2. Copy this file.
  3. In your Finder window, click on Go. A dropdown of locations will show up, hit ALT/Option and the hidden Library folder will come up. Click on it. Navigate to “Application Support/Espresso/Sugars or Plug-Ins” depending on which file you’ve ended up with.
  4. Paste in the file you’ve copied.
  5. Right click on the file and “Show Package Content“. Edit the language.xml file with a text editor.
  6. Find this line :
    <extension>css</extension>

    and add this line below it :

    <extension>less</extension> //.less syntax support
  7. Save and exit.
  8. Edit the info.plist file.
  9. Locate this chunk of code
    <key>CFBundleVersion</key>
    <string>2.0.1</string>
    
    

    and adjust the number within the <string></string> to a slightly higher number. This forces Espresso to use this modified plugin instead of the original one that you’ve duplicated from.

  10. Save and Exit. You are done! Enjoy using Less. For More. Haha.