{"id":3750,"date":"2013-07-24T15:20:41","date_gmt":"2013-07-24T07:20:41","guid":{"rendered":"http:\/\/hazelong.com\/?p=3750"},"modified":"2013-07-24T15:20:41","modified_gmt":"2013-07-24T07:20:41","slug":"wordpress-espresso","status":"publish","type":"post","link":"https:\/\/musenmaker.com\/hazelong\/?p=3750","title":{"rendered":"Using LESS for WordPress with Espresso"},"content":{"rendered":"

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.<\/p>\n

I’ve been using Espresso<\/a> 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.<\/p>\n

Anyway, here are the steps involved.<\/p>\n

Make WordPress Play Nice with Less<\/h3>\n

If you are developing on another cms platform, these bunch of steps can be ignored.<\/p>\n

    \n
  1. Install this plugin, WP-less<\/a> in your WordPress site<\/span><\/li>\n
  2. Activate it<\/li>\n
  3. Create a .less file somewhere in your theme.<\/li>\n
  4. In your WordPress theme functions.php<\/code>, paste this in and change the location of the file to reflect your new .less file’s location:
    \n[php] add_action(‘init’, ‘theme_enqueue_styles’);function theme_enqueue_styles() {
    \nwp_enqueue_style(‘misfits’, get_stylesheet_directory_uri().’\/css\/misfits.less’);
    \n}[\/php]<\/li>\n
  5. Fire up your ftp and edit your WordPress wp-config.php<\/code><\/li>\n
  6. Paste this in
    \n[php]\/**less recompiling**\/
    \ndefine(‘wp_LESS_COMPILATION’, ‘deep’);[\/php]<\/li>\n
  7. And you are done! If you have a name.less<\/code> 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<\/code> file have been compiled to a name.css<\/code> file with all your variables converted.<\/li>\n<\/ol>\n

    **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<\/a>. 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. \u00a0Using the WP-less plugin makes your server compile the codes everytime your .less file is modified or updated.<\/p>\n

     <\/p>\n

    Quick way to get Espresso to go Less<\/h3>\n

    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.<\/p>\n

      \n
    1. Go to Applications folder and find Espresso App, Right click (Control + Click) and \u201cShow Package Content<\/strong>\u201d then look inside \u201cContent\/SharedSupport\/Sugars\u201d<\/strong> \u00a0and you will find \u00a0the CSS.sugar<\/strong>. Alternatively, if the sugar can’t be found, look into the “Content\/SharedSupport\/Plug-Ins\/”<\/strong> folder and you will see a CSS.espressoplugin<\/strong><\/li>\n
    2. Copy this file.<\/li>\n
    3. In your Finder window, click on\u00a0Go.\u00a0<\/strong>A dropdown of locations will show up, hit\u00a0ALT\/Option<\/strong> and the hidden Library folder will come up. Click on it. Navigate to “Application Support\/Espresso\/Sugars<\/strong> or Plug-Ins”<\/strong> depending on which file you’ve ended up with.<\/li>\n
    4. Paste in the file you’ve copied.<\/li>\n
    5. Right click on the file and “Show Package Content<\/strong>“. Edit the language.xml<\/code> file with a text editor.<\/li>\n
    6. Find this line :
      \n[xml]<extension>css<\/extension>[\/xml]
      \nand add this line below it :
      \n[xml]<extension>less<\/extension> \/\/.less syntax support[\/xml]<\/li>\n
    7. Save and exit.<\/li>\n
    8. Edit the info.plist<\/code> file.<\/li>\n
    9. Locate this chunk of code
      \n[xml]<key>CFBundleVersion<\/key>
      \n<string>2.0.1<\/string><\/p>\n

      [\/xml]
      \nand adjust the number within the <string><\/string><\/code>\u00a0to a slightly higher number. This forces Espresso to use this modified plugin instead of the original one that you’ve duplicated from.<\/li>\n

    10. Save and Exit. You are done! Enjoy using Less. For More. Haha.<\/li>\n<\/ol>\n

       <\/p>\n","protected":false},"excerpt":{"rendered":"

      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…<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[1776,2005],"tags":[],"class_list":["post-3750","post","type-post","status-publish","format-standard","hentry","category-coding-tutorials","category-geekery"],"acf":[],"_links":{"self":[{"href":"https:\/\/musenmaker.com\/hazelong\/index.php?rest_route=\/wp\/v2\/posts\/3750","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/musenmaker.com\/hazelong\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/musenmaker.com\/hazelong\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/musenmaker.com\/hazelong\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/musenmaker.com\/hazelong\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=3750"}],"version-history":[{"count":0,"href":"https:\/\/musenmaker.com\/hazelong\/index.php?rest_route=\/wp\/v2\/posts\/3750\/revisions"}],"wp:attachment":[{"href":"https:\/\/musenmaker.com\/hazelong\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=3750"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/musenmaker.com\/hazelong\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=3750"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/musenmaker.com\/hazelong\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=3750"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}