As of Oxygen 2.2.1, there is no built-in provision for adding data attributes to elements.

While my earlier tutorial on this topic did provide a working solution to this, it is clunky compared to the simplicity of the method in this article.

We can add a Code Block and utilize jQuery’s attr property like this:

$('#link_text-19-224').attr('data-featherlight', '#lightbox');


In your Oxygen Template/editor, add a Code Block component at the end of all others.


	// echo "hello world!";


(function($) {
'use strict';

	$('#link_text-19-224').attr('data-featherlight', '#lightbox');


Replace link_text-19-224 with the ID of your element.

With the above code in place, we are telling the browser to wait until the webpage (DOM – Document Object Model) loads and then run the code inside an anonymous function that takes in jQuery as a parameter and runs the code replacing all instances of $ with the passed parameter, jQuery.

Info on use strict can be seen here.

For adding data attributes to multiple elements, simply add more lines like this:

(function($) {
'use strict';

	$('#section-2-224').attr('data-lax-preset', 'spin fadeInOut');
	$('#link_text-19-224').attr('data-featherlight', '#lightbox');


Need help implementing a tutorial in your site or want to hire me for custom work?


Find the article helpful and wish to donate?

linkedin facebook pinterest youtube rss twitter instagram facebook-blank rss-blank linkedin-blank pinterest youtube twitter instagram
%d bloggers like this: