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 other day I read an article written by Greg Gifford, board member of our DFWSEM group, called 10 Common Mistakes to Avoid on Local Websites and this made me think. First...
You’ve been putting off a web redesign for far longer than you care to admit. Now the numbers demand it: Your conversion rate is falling faster than Miley Cyrus’s reputation in a...
The quick answer is absolutely! The need for responsive website design is a tricky concept for many business owners to grasp.  People are conditioned to be skeptical and say “no” when they...