Grow your CSS skills. Land your dream job.

Codekit + WordPress + LESS

  • # October 8, 2012 at 4:56 pm

    Wordpress requires the theme meta in the style.css file. When we compile a compressed stylesheet with Codekit, it strips the commented meta. Is there a work around for this? We found adding an exclamation point directly after the opening comment works, but we noticed css-tricks.com does not have the exclamation point and is still compressed. What is your method?

    # October 8, 2012 at 11:28 pm

    I think I’m gonna write an article about this tomorrow.

    # October 9, 2012 at 5:32 am

    I use Codekit with LESS and it took me awhile to figure out how to make this work too. The way I got around the issue was to strip everything but the theme/template meta out of the style.css file and import the compiled LESS fiile into that same style.css. If you’re using a Twenty Eleven child theme like I am for customizing and tweaking, you can take advantage of the Appearance > Theme Options > Color Scheme by saving your compiled LESS files to the theme’s “colors” folder (you have to do some tweaking to your functions.php file to include your compiled files as selectable colors schemes in the Appearance menu though).

    # October 9, 2012 at 10:10 am

    We used to do that as well holter, but we didn’t like importing another CSS file just to get that done.

    We’ve been using some custom code we built to compile LESS and preserve WordPress theme data with lessphp: [https://gist.github.com/3859017](https://gist.github.com/3859017) but it puts more stress on the server than what is needed, and lessphp doesn’t provide us with some optimization elements we want.

    # October 9, 2012 at 11:52 am

    I understand. That’s why it took me awhile to figure out a good solution to the problem, which is why I mentioned that doing an import into the style.css of the compiled LESS file is a second option. What I did, which doesn’t do any extra importing, is added a filter to my functions.php (mytheme_enqueue_color_scheme()) that overrides the “inc > theme-options.php ‘twentyeleven_enqueue_color_scheme()’” (assuming you are using TwentyEleven, child theme preferably). This simply gives you an additional choice of color schemes right from the admin panel > appearance > theme options. You can change the name of the compiled file in Codekit to save alternate versions if you are experimenting. This has been working great for me. No extra load on the server whatsoever. All my importing is done via LESS files, then compiled so it’s nice & simple.

    # October 9, 2012 at 12:11 pm

    Got ya … misread. That is definitely a viable option as well, might look into it.

    # December 6, 2012 at 2:15 am

    > I think I’m gonna write an article about this tomorrow.
    Chris! Where is the article?

    # April 28, 2014 at 3:24 pm

    Before purchasing CodeKit you should be aware of the following limitation:

    I have the problem that the auto-refresh feature for less/css does not work using WordPress + CodeKit.
    I mailed the developer of CodeKit (Bryan Jones <bryan@incident57.com>).
    He told me that this is due to <link> elements at the end of the <body> which is against the specs.
    I wrote a small WordPress plugin that deletes those elements et voilà it worked.

    So I asked Bryan if he could fix the problem by allowing <link> elements also to be in the <body>.
    He refused since this is against the specs – ignoring that this is common practise. In WordPress this behaviour can be even triggered using wp_enqueue_script + $in_footer = true.

    It’s frustrating. You can only change all plugins that don’t meet the, catch all the output and rewrite (performance penalty!) or use an alternative to CodeKit.

Viewing 8 posts - 1 through 8 (of 8 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".