How to add data attributes to elements in Oxygen

March 23, 2019: Follow this method instead.

Being able to add custom data attributes for elements is essential in a theme or website builder for me. This is useful and necessary for many use-cases like setting up Schema, adding the markup required by JS plugins for scrolling effects, parallax, and lightbox etc.

Since Oxygen 2.0 does not yet have this feature, I’ve come up with a workaround to add classes to the markup in a specific format, have these be parsed by jQuery and be set as data attributes followed by deleting the classes after the DOM gets loaded.

For example, let’s say I want to add data-featherlight="#mylightbox" to an anchor tag like this:

<a href="#" data-featherlight="#mylightbox">Get Started</a>

After implementing the steps in this article once, in Oxygen editor I could simply add this class to the anchor tag: data-featherlight_hashmylightbox and data-featherlight="#mylightbox" will automatically get added in the frontend.

Step 1

Install and activate my custom functionality plugin.

Create a file named say, data-attributes.js in the assets/js directory having:

(function ($) {

    $('.data').each(function (index1, value1) {
        var getClasses = $(this).attr('class').split(' ');
        var currentElement = $(this);

        $(getClasses).each(function (index, value) {
            if (value.indexOf('data-') !== -1) {
                var d = value.substring(0, value.indexOf('_')); // data attribute name
                var newval = value.replace(d, ''); // set data attribute value. Includes _
                newval = newval.replace('_', '');
                newval = newval.replace('hash', '#');
                newval = newval.replace('__', '.');
                if (d.length > 1) {
                    currentElement.attr(d, newval);
                    currentElement.removeClass(value);
                    currentElement.removeClass('data');
                }
            }
        });
    });

})(jQuery);

Thanks to Jeffrey Carandang for helping me with the above code.

Step 2

Inside the custom_enqueue_files() function, add

wp_enqueue_script(
    'data-attributes',
    plugin_dir_url( __FILE__ ) . 'assets/js/data-attributes.js',
    array( 'jquery' ),
    '1.0.0',
    true
);

to load wp-content/plugins/my-custom-functionality/assets/js/data-attributes.js before the closing body tag.

Step 3

For every element to which you want to add data attribute(s), add a class of data in the Oxygen editor.

Our jQuery code is set to look for all elements having this data class, split them and iterate over each and act on classes that have data- in them.

For setting up the actual data attributes, we need to use the following format for the classes:

• Class names must start with data-. Ex.: data-speed_0__2, data-featherlight_hashmylightbox, data-jarallax.
• To add a data attribute without a value, simply add it after data-: Ex.: data-jarallax_. This will be output as data-jarallax. The part before the underscore becomes the data attribute name
• To add a # in the value of an attribute, use hash. Ex.: data-featherlight_hashmylightbox class becomes data-featherlight=”#mylightbox”.
• To add a data attribute having a value, add the value after an underscore. Ex.: data-featherlight_hashmylightbox. This will be output as data-featherlight=”#mylightbox”.
• To add a decimal value (point/dot) in the attribute value, use double underscore i.e., __. Ex.: data-speed_0__2 becomes data-speed=”0.2″.

I will be writing more tutorials in the coming days to show how this technique can be used in Oxygen.