WordPress Code Snippets

A fresh mix of code snippets and tutorials

Superbox replace rel with data-rel


At WP-Tao.com, I use jQuery Superbox to display lightbox-style popup images and screenshots. Here is a quick mod used to replace rel attributes with data-rel.

For the project, it was necessary to replace rel attributes with data-rel so the script would gel with other events on the page. Here’s how to do it in 2 steps:

Step 1: In the Superbox script, replace all instances of “rel” with “data-rel”.

Step 2: In your markup, likewise replace rel with data-rel.

As of Superbox version 0.9.1, there were three instances of rel that needed changed. That may change in future versions of the plugin.

You can see this modification in action at WP-Tao.com (scroll about halfway down the page).

More about why/how this is useful

Testing the WP-Tao homepage with the W3C HTML Validator, I was getting errors such as:

HTML5 Error: Bad value lightbox for attribute rel on element a: Keyword lightbox is not registered.

The rel attributes generated by Superbox needed changed to data-rel (or whatever is preferred for data-*, so the fix was the modification described previously.

Unfolding the region of code that requires modification results in this:

Then after swapping rel with data-rel:

No other modifications are required, pretty simple really and with no validation errors.

Show Support

Like our new Facebook Page to show support!