Zen Coding In WordPress

What is Zen Coding?

To quote the Zen Coding Wiki “Zen Coding is an editor plugin for high-speed HTML, XML, XSL (or any other structured code format) coding and editing. The core of this plugin is a powerful abbreviation engine which allows you to expand expressions—similar to CSS selectors—into HTML code.”

Check out the Zen Coding main page and the example page to get familiar with Zen Coding.

Zen Coding is available as a plugin/extension to many popular editors. You can also try the demo online.

Expanding abbreviations

Zen Coding speeds up the task of writing HTML. I think the easiest way to demonstrate how with an example. Lets take some HTML markup that might be used for a list of links in a sidebar

<div id="sidebar">
  <ul id="links">
    <li class="link1"><a href="#">Lorem Ipsum Dolor</a></li>
    <li class="link2"><a href="#">Lorem Ipsum Dolor</a></li>
    <li class="link3"><a href="#">Lorem Ipsum Dolor</a></li>
    <li class="link4"><a href="#">Lorem Ipsum Dolor</a></li>
    <li class="link5"><a href="#">Lorem Ipsum Dolor</a></li>
    <li class="link6"><a href="#">Lorem Ipsum Dolor</a></li>
    <li class="link7"><a href="#">Lorem Ipsum Dolor</a></li>
    <li class="link8"><a href="#">Lorem Ipsum Dolor</a></li>

Even if your editor of choice is helping you along that is quite a bit of HTML code to write. With Zen Coding you can simply type

#sidebar>ul#links>li.link$*8>a[href="#"]{Lorem Ipsum Dolor}

and then press your Zen Coding expansion hotkey to expand the abbreviation.

I have found it is easier to write multiple smaller Zen Coding abbreviations then larger ones. Using Zen Coding for lists, table, etc is much easier to work with then writing an entire page with one abbreviation.

Wrapping Abbreviations

Want to use some real values instead of dummy text? Zen Coding has you covered with wrapping abbreviations. Taking some real world values


Select the text and hit your Zen Coding abbreviation hotkey. You will see a dialog box. Enter a modified version of our example above


and you will get an output like this

<div id="sidebar">
  <ul id="links">
    <li class="link1"><a href="#">Home</a></li>
    <li class="link2"><a href="#">About</a></li>
    <li class="link3"><a href="#">Products</a></li>
    <li class="link4"><a href="#">Blog</a></li>
    <li class="link5"><a href="#">Testimonials</a></li>
    <li class="link6"><a href="#">Contact</a></li>

Notice in the abbreviation there is no set number for the multiplier. This is because Zen Coding will loop through each line in the selection.

Other possibilities?

There is an entire community who uses the Zen Coding engine to do some pretty cool stuff. For example Phillip Walton has written a php class/WordPress plugin using the Zen Coding engine. I won’t go into how to use it here but there are a lot of applications. Using our example above you could populate the link source and anchor text from database entries. There are lots of projects using the Zen Coding engine.

No Comments

Comments are closed.

Recent Blog Posts in Web Development
The Cyclist at Law website redesign was a great opportunity to create a modern and mobile-responsive twist on its existing theme. Ideally we wanted to personalize the “Cyclist at Law” brand by...
As a landscaping company, Blooms Landcare needed a more vibrant and mobile-responsive site to attract its target audience. Before The Blooms Landcare Website Redesign Mobile Responsive Website Design Mobile responsiveness is more...
Recently we launched a redesign for the Todd Durham Law Firm website. We aimed to simplify the site’s overall design, as well as make it much more mobile-friendly. With Google’s recent update,...