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.
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.
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.
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:
I will be writing more tutorials in the coming days to show how this technique can be used in Oxygen.
Session expired
Please log in again. The login page will open in a new tab. After logging in you can close it and return to this page.
Thanks, that was exactly the answer to a recent question I posted in O2 FaceBook group I was looking for.
[…] Reference: https://wpdevdesign.com/how-to-add-data-attributes-to-elements-in-oxygen/ […]
hey man this is not working for me, they are just showing up as classes…
URL?
What classes have you added?
https://ibb.co/iMp00U
Have you added
data
class?Is there a way to add multiple attributes at one? I need data-lax-preset=”spin fadeInOut” but if i add a space it fails
Follow https://wpdevdesign.com/data-attributes-in-oxygen/ instead.
[…] my earlier tutorial on this topic did provide a working solution to this, it is clunky compared to the simplicity of […]