Basic Javascript Template Function


Pass the function a template with curly brace delimited values e.g. <h1>{{ value }}</h1>
Returns a function that accepts an object of your values to be applied to the template;


Permission Fix For Node JS


I ran into the following problem when installing Yeoman:

It turns out the problem was a permissions error with my node_modules directory. The following command fixed it:

sudo chown -R `whoami` /usr/local/lib/node_modules

If you think this may be the problem you can check the ownership of your directories with:

ls -l ~/.npm and ls -l /usr/local/lib/node_modules

Privileges Owner Group
drwxr-xr-x 4 matthew staff 136 24 Apr 21:56 abbrev/

Check that owner of the files match the whoami command. In this case, it is indeed me. But if it isn’t you then above command will fix your node_modules directory permissions and sudo chown -R `whoami` ~/.npm

Foundation Reveal Shortcode Plugin for WordPress


I like using Zurb’s fantastic Foundation framework. I’ve been using it heavily over the last year for many projects.

One of my favourite parts is their Reveal modal box. It’s fast, responsive and looks pretty slick. However, in versions prior to the latest version 5, it doesn’t play nicely with WordPress, if you want to add a modal box inline in your content it falls over.

In Foundation versions 3 & 4, Reveal modal content needs to be placed before the closing </body> tag, else your modal box ends up displaying in some pretty awkward places. Not so slick.

I couldn’t find any plugins at the time to handle this functionality so I wrote a simple one to allow myself and my team to quickly and simply add modal box content in the WordPress editor using shortcodes. This prevented us having to spend time handling copy and allow editors to edit their modal box content within WordPress. It also prevents delineating otherwise well written copy.

[reveal id=”example” link=”Here’s a working example” ]


Highlight the text your’d like to place in your modal box.

Click the reveal icon in your editor toolbar.

Enter a unique ID for the Reveal.

Optionally enter some link text to replace the modal content, or manually place it wherever you like in your content.

You can also manually create a modal box like this.


The plugin can be found on my GitHub account. If anyone has any suggestions for improvements please let me know or make some pull requests.

GitHub Project

Edit: I’ve now added a simple editor plugin for TinyMCE to make it extra easy to drop in the shortcode to your editor.

Deferred and Asynchronous Script Loading with Javascript


It’s a widely known fact that page speed is an important factor in most search engines’ ranking algorithms, Google has categorically stated as much in their developer guidelines.

Google’s goal is to provide users with the most relevant results and a great user experience. Fast sites increase user satisfaction and improve the overall quality of the web

Plus, we are all instinctively aware that visiting a site which loads faster is a much more pleasant experience than one which takes several seconds. A factor that should make page speed a priority regardless of any benefit to search engine ranking.

Scripts block the rendering of a page until each has been parsed in turn by the browser. Therefore, deferring the loading of non-essential scripts until after the page has loaded is a critical step in optimising a users experience of your site.

Ignoring Files in a Subversion Repository


Oftentimes, with Subversion it’s pretty handy to ignore the status of files in your working copy. Cache files or other auto-generated data files can quickly become a pain to other users of your repository.

If you’re using SASS for example, that creates a lot of cache files in the .sass-cache folder that can take a long time to checkout and generally make the place look untidy especially when you’re viewing your svn status.

Git has the useful .gitignore file, but you can do the same tricks with Subversion it’s just not quite so obvious.

When including files within your WordPress theme use locate_template() to allow them to be overridden by child themes.

locate_template() will search for the file within STYLESHEETPATH and TEMPLATEPATH, returning the path as a string if it exists.


Organising WordPress Themes – Partial Templates


The root directory of your WordPress theme can get pretty crowded pretty fast as a project get steadily more complex. One thing that I found used to frustrate me was differentiating at a glance, my partial template files, from my page template files, from all the others that find their way in there.

De-cluttering your workspace makes it easier to spot items you require at a glance, helping you to avoid losing concentration whilst you’re working.

This becomes especially true when you start collaborating on a project, using task runners and css pre-compilers. All these things can make a theme fairly bulky, so if you know where everything is going to be in advance then it can help to speed up your work process.

Other articles in this series

  1. Organising WordPress Themes – Partial Templates
  2. Organising WordPress Themes – Setting Up a Compass Project