Posts Tagged ‘wordpress’

SimpLESS: An Easier Way of Getting LESS Done

LESS

When I first took a look at LESS as a CSS replacement, I wasn’t too interested in having even a command-line compiler. The idea of having my stylesheet loaded and parsed by Javascript didn’t sound that great either, but tolerable if it saved me enough time and effort writing CSS.

SimpLESSWhile testing LESS on my local server, I used less.js to process my .less stylesheet on the client side. It worked well, and on modern browsers the processing time is minimal, but I decided to look around for LESS compilers anyway. I discovered SimpLESS nearly immediately, and it looked perfect.

Compiling a .less file is as easy as drag-and-drop, and it monitors the file for changes. When your file is saved, it is nearly immediately compiled into a CSS file. If you’ve made an error in your file, the file highlights red and specifies the line number at which the problem occurred. Output is pure, minified CSS goodness.

SimpLESS, by default, inserts a comment at the top referring to its website. This can easily be disabled if you like.

When I first started using SimpLESS, I was copying and pasting the output into a WordPress template style.css file, which requires a properly-formatted comment at the top to describe the theme. Since SimpLESS performs minification, comments are stripped out. I thought this was the only way to keep my WordPress theme comment intact while still using the features of LESS. This copy-paste tedium was something I specifically wanted to avoid in the first place.

Note: The remainder of this post was written before SimpLESS users complained enough about this very issue, so theme comment preservation is no longer an issue.

I thought that there must be some way to preserve a comment when compiling. Surely that wasn’t an uncommon use case? I checked out the SimpLESS source code to see how it was performing its minification (master/Resources/js/clean_css.js, line 30 if you’re interested), and saw they included a special character to preserve certain comments: the exclamation mark.

To preserve a CSS comment in SimpLESS (not that this will not work using the Javascript version, as WordPress will not find a style.less file), simply put an exclamation point after the initial comment delimiter, like so:

/*!
Theme Name: My Super-Cool Theme
Theme URI: https://www.pixelbath.com/
Description: Blah blah blah...
[cut for length]
*/

The exclamation point is ignored by WordPress, and if you have SimpLESS processing your style.less file, you can continue to upload your theme’s style.css file as usual.

Comments

WordPress Tip: Adding Custom Menus to a Theme

If you’re using WordPress 3.0 or above (which, if you’re using WordPress, you really should be), you have the option of adding custom menus to your theme without extra plugins.

In the past, this was managed via plugins such as “Page Links To” and “Exclude Pages.” Now, this can all be managed within the WordPress admin console and in your theme, with a decent amount of customization.

In this tutorial, I’m assuming you know the basics of PHP (enough to create your own theme, at least).

To tell WordPress that this theme supports menus, add the following code to your theme’s functions.php file:

// I want to add a header and footer
register_nav_menus( array(
'header' => 'Top Navigation',
'footer' => 'Top Navigation',
));

To use a menu in your theme files, you will need to add a line similar to what’s shown here. I added this in my header.php file for the top navigation, and added a similar line to footer.php:
wp_nav_menu('sort_column=menu_order&menu_class=header-nav&menu=header');

There are many more options available for how your menu is displayed; see the WordPress Codex page for wp_nav_menu.

To create your new menus in WordPress, go to the admin console, click Appearances > Menus. This screen is fairly self-explanatory. I was able to replace three plugins and some custom header and footer code using only this method, in about 10 minutes (including research on wp_nav_menu).

For even more hardcore customization using custom walkers (a feature described in the Codex), check out Christian Budschedl’s excellent post, Improve Your WordPress Navigation Output.

Happy blogging!

Comments