Ultimate super basic introduction to LESS

LESS is really easy to get into but if you want a super fast point of entry before diving into the syntax why not stick to what you know and try it out using plain old CSS first?

1: Get a LESS compiler

First you’ll need a free LESS compiler. LESS.app  is good to go until 2015 for OSX ( after that it turns into a pumpkin ). If you’re into all that Windows business then WinLess does the same trick. If you’re a Linux head you can probably do all this in binary with a divining rod or whatever it is you do.

2: knock up a couple of files

You can set up a dummy web page if you like but let’s just get on with a quick bit of LESSing about shall we?

Create yourself four files, for example:

  • header.less
  • content.less
  • footer.less
  • style.less

The compiler just needs .less as an extension ( don’t worry you’re still going to be writing some CSS )

By the way, I do hope you’re saving all of these in the same folder.

3: Style according to taste

In each of your .less files just add some random classes and a few settings. It doesn’t matter what as long as it’s valid CSS ( if you’re doing this with a dummy HTML page why not style that? ).

For example in header.less:

in content.less:

and lastly in footer.less:

What about style.less? Read on…

4: Start your LESS compiler

Fire up your LESS compiler and add your folder to your watched LESS files ( “Add Folder” in WinLess, “+” in LESS.app ).

Ideally only the style.less file should have a check mark by it. Want to minify? Check that too, why not?

OK, are you ready to do some magic?

If you are a seasoned CSS warrior you’ll know that if these were .css files you could @import all of them in one further style sheet.

This is great and all you say but blah blah server calls, hosting bandwidth yada yada. I know. Just be quiet a minute and look what happens next.

Add the following to style.less ( it’s OK, I’ll wait ):

Save it.

Now take a peak in your folder and see what auntie LESS has baked you, that’s right, a fresh little style.css file ( did you see the puff of purple smoke too? Just me? ).

Lets have a look at what’s inside ( or this is what you’ll see if you went for the minified option ):

Woah! Yeah?

You feeling that?

Now think back to that web site you’ve got with a bajillion imported, uncompressed css files and multiple style links in the head.

Yep, the whole lot in one tidy CSS file and all minified if you so desire.

Now that’s before you’ve even looked at LESS variables, mixins and all that other heady stuff.

If you think you can handle it then this tutorial over at tutsplus would be my first port of call for a well explained and pretty comprehensive overview of LESS.

I think you’re ready 😉

Creating a clickable Google map of blog posts using WP_Query in WordPress

Last year I completed a WordPress site that presents a collection of photographs taken for the Worktown Mass Observation project.

The site uses a custom post type for each photograph. One problem I had to get my head around was how to display all of these photographs on a clickable Google map.

Luckily I found this excellent tutorial by Marty Spellerberg which served as my jumping off point.

Ease of use

Marty’s method uses custom meta fields to pull in the data.  As there are about 800 photographs in the collection I wanted to make it easy for site editors to add the map data.

My workaround involved using Ben Huson’s WP Geo plugin which adds a handy drag and drop Google map to your post editor. Lattitude and longitude coordinates on the Worktown site are pulled from that.

On the front end it wasn’t going to be practical to display 800 or so map positions at once so I needed to adapt Marty’s solution to incorporate the Google MarkerClusterer library to tidy up the map and to make it load quicker for visitors.

The MarkerClusterer visually groups map pointers into a single clickable area. Clicking these automatically zooms the map into an area with a smaller cluster of pointers.

The code

If you check out Marty Spellerberg’s post first, then have a look at the Google MarkerClusterer documentation the following might make a bit of sense 🙂

The following would go in your map page template:

And in your .js file:

And the rest of this junk needs to go in your header (note you also need to have MarkerClusterer.js on your site too):

Generating nested category lists in WordPress templates using get_terms

I wanted to create an index style page of site links organised by child category nested below each parent category.

The desired layout suggests a nested loop so first we need to list our parent categories:

Note the commented line where
'parent' => 0
ensures that only the top level category is selected.

If this is pasted into a page template then you should now see a list of your parent categories.

Now a look at the loop that will go inside this one:

Now put it all together:

 

Just a couple of caveats with this.

When assigning a category to a post you must check the sub category and the associated parent category or they won’t be displayed.

This snippet only works with one level of subcategory.